英語の海外テーマを日本語で利用する場合のフォント問題について

英語テーマが日本語に対応していない問題。

ワードプレスには海外製のオシャレなテーマがとってもとってもたくさんあります。

ただ日本語が基本的には指定されていないため、ものすごくフォントがアレな感じになってしまうことが多いです。これは多くの初心者が非常に悩むところです。

そんなときにフォントの設定を変更すると見やすくなり、海外テーマでも違和感なく使えるようになることも。

ただしフォントのサイズ変更なども必要になることもあり、調整が面倒です。

yStandardのように最初から日本語に対応しているテーマで見た目をカスタマイズしていく方がもしかしたらカンタンかも知れません(/ω＼)

また日本語のテーマでもフォントをお好みに変更できますので参考にしてみてくださいね。

CSS編集でひとまずフォントを変更してみましょう

個人的な好みでWindowsはこのPDFでも使っている”游ゴシック”が好きなので設定してみました。

基本的なやり方はCSS編集の中に以下のようなコードを書くだけです。

赤い文字のところがフォントです。一部のフォントは例のように””や’’で囲む必要があります。（どっちでも良いです）

body {

font-family: “游ゴシック”,’Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;

}

私のお師匠様が教えてくれたシリーズも良い感じになります。

これはmacだと” ヒラギノ丸ゴ”が使われWindowsだとメイリオが使われています。メイリオもすっきりですね。（私はWindowsユーザーです）

GoogleフォントはWEBフォントと呼ばれるものの1種でフォントのデータがWEB上にあり、そこから読み込む感じで使えます。

まだ日本語フォントは正式にサービスを開始していないようですがお試しできます。

お好みのフォントをクリックすると右下あたりに設定用の情報が出てきます。スクロールしないと見えないので以下にコピペしてみました。

上の段：<link href=”https://fonts.googleapis.com/earlyaccess/hannari.css” rel=”stylesheet” />
下の段：.wf-hannari { font-family: “Hannari“; }

それぞれこんな感じのことが書いてあり、使うのは赤い部分です。

わたしは「さわらびゴシック」というフォントが気に入ったので使ってみることにします。

続いてCSS編集には以下のように書くと有効になります。赤い文字のところを、それぞれ自分の使いたいフォントの情報に差し替えるだけで利用可能になります。

@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

body {

font-family: “Sawarabi Gothic“,’Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;

}