WordPressサイト全体で日本語フォントを綺麗に表示する方法

Easy Google Fonts

 

一般的に、ワードプレスのサイト全体で、自分の記事や固定ページのフォントを綺麗にする方法は、

 

Easy Google Fonts というプラグインを使って、サイトのフォントを変えるという方法があります。

 

 

Easy Google Fontsをインストールすることで、

 

ワードプレスの設定画面で、PタグやH2タグに向けてフォントを指定することが出来ます。

 

 

 

 

こんな感じで、タイポグラフィーがカスタマイズに出てますね。

 

これを選択すると、こういう風に、typography(記事の文字のPタグ)や、

 

H2タグにそれぞれフォントが設定できるようになるわけですよ。

 

 

ここでGoogleフォントで採用されてるフォントを選べばいいんですけども、

 

ここで一つ問題なのは、もし自分で独自に、

 

もっと日本語に最適化された可愛いフォントを使いたいって思ったら、どうするんでしょう。

 

ここで選択できるフォントは、既存のフォントしかないわけですからね。

 

こういう場合に便利なのは、ワードプレスの設定画面の拡張CSSを使うことです。

 

拡張CSSはとても便利

 

 

これを選択すると、自分でCSSを書くことが出来るんですけども、

 

そんなに難しいことは何もありませんので安心してください。

 

例えば、自分の記事の文字をCSSで可愛い日本語フォントにしたければ、

 

こういう感じで書けばすぐ適用されます。

 

p{font-family: verdana, geneva;}

 

そして、verdana, geneva; の部分がフォント名なのですが、

 

日本語フォント名をプラグインからダウンロードする方法がございます。

 

それが、Japanese font for TinyMCE というプラグインです。

 

 

こちらのフォントをダウンロードすると、自動で日本語のフォントが使えるようになるんですね。

 

 

プロぐラインをアクティブに機能させた後に、赤丸の部分をクリックして見てください。

 

色々とフォントが追加されてると思います。

 

ここで、試しに日本語っぽいフォントを選択すると、こういう風に変わります。

 

 

それで、このフォントをプレビューで確認してみて、

 

HTMLのエレメントを確認してみると、フォントが適用されてるCSSを見ることが出来ます。

 

 

ちなみに、右側のHTML要素を確認する画面を出すには、

 

マウスで右クリックして「検証」をクリックして見てください。

 

そして、この下の画像の赤い丸で囲った部分をクリックすると、要素を選択できるんで、

 

そこでHTMLの文字にどういうフォントが適用されてるか確認できます。

 

 

それで、styleのフォントファミリーを確認したら、

 

先ほどの、追加CSSの部分で、Pタグに対して、font-family: verdana, geneva; を適用させれば、

 

全ての記事で、日本語フォントが出来ようされます。

ニュースレターを購読する

📨 WordPressのメルマガ、興味ありませんか?

マーケラボが厳選するWordPress運営ノウハウをメルマガでお届けします。ブログでは書いてないちょっぴりお得な特典もあり!

Be the first to comment

Leave a Reply

Your email address will not be published.


*