こんにちは。旅する先生のJunです。
このブログでは、「Diver」というWordpressのテーマを使って運用しています。 WordPressの人気テーマといえば、「STORK」や「SANGO」が有名ですが、最近では、この「Diver」も少しずつ人気が出てきています。
その理由の１つとして、カスタマイズ機能が豊富なことでしょう。サイトの色を細かく設定できたり、メインカラムとサイドバーのサイズを自由に変更できたり、初心者ブロガーにはとてもオススメのテーマです。
ここで機能の説明をしているとキリがないので、詳しく知りたい方は、以下の関連記事を読んでください。
さて、私のお気に入りのテーマ「Diver」ですが、実は１つ不満があります。 それはフォントです。
「STORK」や「SANGO」と比べて頂けると、わかると思いますが、Diverのフォントはちょっと「線が細くて」、「シンプル」という印象です。
個人的にはもう少し「柔らかくて」、「可愛らしさ」が欲しいと思っていたので、「Diver」のフォントはあまり好きになれませんでした。 そこで、今回は、「Diver」のデフォルトのフォントを変更する方法をご紹介します。
Diverで使われているフォント
「Diver」では親テーマのスタイルシートの中で、デフォルトフォントが幾つか指定してあります。
この指定してあるフォントは左側に書いてあるフォントが優先して適応されます。そのため、Diverでは「游ゴシック体」が先頭されることになります。
よって、指定するフォントを変更することで、デフォルトのフォントを自分の好きなフォントに変えることができるのです。
フォントの変更手順
カスタマイズをする時は、子テーマを使用します。親テーマは「Diver」のアップデートのたびにクリアされてしまうため、絶対に変更しないでください。 変更手順は以下です。
それでは、今回は、デフォルトのフォントを「メイリオ」に変更してみましょう。 以下のコードを子テーマのスタイルシートの中に貼り付けて「保存」してみてください。
/* フォント変更 */
*, *:before, *:after {
font-family: メイリオ, Meiryo,游ゴシック体, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic",FontAwesome, sans-serif;
}
保存ができたら、画面を確認しましょう。
いかがでしょうか。少しわかりづらいですが、フォントが「游ゴシック体」から「メイリオ」に変わりました。
メイリオ以外のフォントを設定したい方は先ほどのコードの左端のフォントを、お好みのフォントに書き換えてください。
ちなみに、私はWEBフォントを使っています。
WEBフォントは「メイリオ」や「游ゴシック体」のようにあらかじめ用意されているフォントではなく、WEB上にある特定のフォントを読み込んで表示させます。
色々なフォントがあって、自分好みのフォントを表示できるのが魅力的ですが、ページの読み込みのたびにWeb上のフォントファイルにアクセスするため、画面の表示スピードが少し遅くなるかもしれません。
私が使っているのは、以下のフォントです。特に画面表示速度に変化はないし、こちらのフォントの方が少し丸みがあって、可愛らしいので、私はこちらを利用しています。興味がある方は、以下のコードをスタイルシートに貼り付けて保存してください。
/* Webフォント：Noto Sans JP */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 100%;
letter-spacing: 0.1em;
}
最後に
今回は、「Diver」でフォントを変更する手順を紹介しました。
皆さんも、フォントを変更して、自分好みのデザインにカスタマイズしちゃいましょう！
