WordPressでGoogle Webフォント日本語早期アクセスを表示させる

      2018/04/13

こんにちは。りょうへいです！
今回も実装するまでにいろいろと試行錯誤を繰り返していましたが

やっとちゃんとできました！

何がかって？

ウェブフォントを適用させて、美しいフォントでWordPressブログを表示させることができました！

きっかけとしては、ブログのタイトル部分が寂しいのでロゴ画像でも作ろうかな？なんて思い調べてみると今どきはロゴ画像作成より、ウェブフォントでスマートに修飾する流れなので、これは使いたい〜！とちょっと前から目論んでいたのですが
いかんせん、なかなかうまいこと適用できなくて
いろいろと調べて同じようにやっても全然うまくいかなかったりと、しばらく色々と試行錯誤していたんですよぉ〜！

とりあえず、参考にしたのが古い情報だったり、自分の環境には効かなかったりと
かなり踊らされてハマっていたのでしっかり書いておきます。

 

[2017年11月版] Google Fonts + 日本語 早期アクセスをWordPressに設定する方法

ウェブフォントを利用する方法はいくつかあるようで
@importを使う方法や <link>タグを使う 方法等があります。
りょうへいの環境としてはWordPressテーマにブログマーケッターJUNICHIさんという方が
STINGER5というテーマをもとに作成したものを
無料配布されている「Giraffe」を利用させてもらっています♪

なので、WordPressテーマ「Giraffe」や「STINGER5」を利用している方の参考になったらいいなって思っています♪

 

Webフォント って何？

機種や環境、デバイスに依存せずに、Web上で取得して表示させることができる、美しいフォントなのです！

ブログタイトルなどに画像でロゴを作って表示させるなんてもう古い！グラフィカルだったりおしゃれで特徴的なフォントを使用しつつ、
テキストとして認識されるからSEOにも強い！

これは使わない手はありません。

しかし、英数文字のフォントは、かなり個性的な様々なフォントが存在しているのですが
当ブログを含め、りょうへいの運営サイトは日本語のタイトルが多いんです(^^;

そうなると、日本語が表示できるウェブフォントを利用しないとなりません。
しかも、日本語OKなウェブフォントってあまり無いようでしたが
ちょっと探してみたら Googleが提供している
素敵なWebフォントを発見したので適用させてみました。

 

どんなフォントがあるの？

現在公開されいるフォントはこんな感じ↓

けっこうかわいいものもありました。
普通にメイリオ表示よりも絶対見栄えがよくなりそう！

 

設定1 利用するフォントの選定

Google Fonts + Japanese Early Access (日本語早期アクセス) の公式サイトで利用したいフォントをチェックしましょう。

次に利用するフォントを決めたら ↑の①と②のタグをテキストエディタなどにコピペしておいてメモしておきます。

 

設定２ 子テーマのheader.php と style.css に追記してカスタマイズ

設定方法は簡単でした！
こちら↓のエントリーで実施した子テーマのファイルに編集を行います。

[WordPress]親テーマに施しちゃったカスタマイズを子テーマに移行する

子テーマファイルの編集は、WordPress管理画面の「外観」→「テーマ」の編集からも可能ですが
安全のため、FTPを介して元のファイルのバックアップをとりつつ
ローカルで作業して、編集後のファイルを再びアップロードして反映させていました。

りょうへいはつい色々試してしまい、WordPress環境を破壊することがけっこう多いもので、最近はちょっと作業も慎重になってきました(^^;

 

テーマヘッダー(header.php) に控えておいた①をコピペで追記

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>
<meta charset="<?php bloginfo('charset'); ?>" />

7行目と8行目が追記した内容です。
<head>タグの直下に追記しました。
上記の例では、Google Webフォント２種を利用することにしたので２つ分のタグをコピペしています♪

 

スタイルシート(style.css) に控えておいた②をコピペ追記

style.cssの編集の前に、元の style.css のチェックからはじめましょう。

テキストエディタなどで「font-family」でCSSの中を検索してみると
既存のフォト設定を行っているコードを見つけることができます。

つまり、そこが追記するターゲットです！

* {
  font-family:"Rounded Mplus 1c",  "メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
  margin: 0px;
  padding: 0px;
}
main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
  display: block;
}
body {
  min-width: 320px;
  word-wrap: break-word;
  background-color:#f2f2f2;
}
body.mceContentBody {
  background-color:#fff;
}

/*ブログタイトル*/

header .sitename {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 32px;
  font-family:  "メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
  padding: 10px 0px 0px;
  margin-bottom: 10px;
}
header .sitename a {
  font-family: "Nico Moji";
  color: #333;
  text-decoration: none;
  font-weight: extra bold;
}
header .sitename a:hover {
  -moz-opacity: 0.8;
  opacity: 0.8;
}

（１）上記のコードの2行目のフォント指定のはじめに利用したいフォントを追記
全部のフォントを設定している部分のはじめに利用したいWebフォントを追記しました。
これで、通常の文章も「Rounded Mplus 1c」フォントになりました！

（2）「ブログのタイトル」のフォント指定を 「Nico Moji」フォントにしたいので30行目を追加して設定しています。元のコードにはフォント指定自体が無かったので追記しました。

Webフォント適用前のブログタイトル部分
 
                 ↓

Webフォント適用後のブログタイトル部分 （ニコモジ を利用）

ニコモジフォントには漢字はありません。
なので、次に指定されているフォントで漢字が表示されることになります。
ニコモジを利用してみて判ったのですが、漢字と織り交ざって表示されてもイケるよ！ すごいよ ニコモジ！

個人的に気に入ったので、しばらくコレでいってみようと思います♪

あと、タイトル以外に適用させた Rounded Mplus 1c フォントは
ちょっと丸文字っぽいテイストでかわいいので気に入りました！
（いま、この文章をご覧いただいているフォントです）

Webフォントの適用で、ブログの雰囲気もけっこう変わるので
場合に寄って効果的に利用してみるのがよさそうです！
（自分で気に入ってしまったので全部に適用させておいてｗ）

この記事を読んで、ちょっと試してみる気になったら、正しい設定が判ったら途端に意外と簡単なカスタマイズだったので、ぜひチャレンジしてみてくださいね♪

ほぼゼロでは、以下のような
WordPressに関連した記事を他にも書いていますので
よろしかったら、そちらもあわせて読んでみてくださいね♪

WordPressブログトップの記事一覧にインフィード広告を溶け込ませて表示する方法

WordPressプラグイン Contact Form7 で「お問い合わせ」フォームを追加する方法

既存投稿記事をコピーですぐに新規作成できるWordPressプラグイン Duplicate Post が便利

クリックで応援よろしくお願いします♪


WordPressランキング
にほんブログ村 IT技術ブログ CMSへ
にほんブログ村

よく読まれている記事

 - Tips, WordPress, 設定 , , , ,

%d人のブロガーが「いいね」をつけました。