Simplicity2で、タイトルとサイドバーのフォントファミリーを変更する方法

初心者にも優しく、人気の高いテーマの「Simplicity」

私が訪問したことのあるブログの中で、Simplicityのテーマを使っているブログも何度も見たことがありました。

自分のブログも含めて、実は「タイトル」と「サイドバー」タイトルのフォントが少し気になっていました。

好みの問題だと思いますが、私個人的にはちょっとした威圧感を感じるとでも言うのでしょうか、こちらのフォントをもう少し柔らかい印象のものに変更してみました!

スポンサーリンク

font-family

「メイリオ」「MS ゴシック」「MS 明朝」といった、文字の種類を指定している部分は、「font-family」というプロパティとなります。

そしてこの「font-family」という部分は、よく

font-family: ‘Segoe Script’,’Zapfino’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,sans-serif;

こういった形で、多くのフォントが指定されている場合が多いのです。

これはフォントには、OSによって表示出来るものと出来ないものがある とのことで、大体の場合は「Windows」「Mac」「IPhone・IPad」と、3つくらいを指定してあげるケースが多いようなのでした。

フォントファミリーを生成できるサイト

Font-familyメーカー

こちらのサイトでは、自分の好みにあったフォントを選び、ドラッグ&ドロップをするだけで、自動でコードを生成してもらえるので便利です!

変更の方法

WordPressのダッシュボード画面から「外観」→「CSS 編集」を選択

追加CSSに、フォントを変更したい箇所と、先ほど生成したフォントファミリーのコードをを記述します。

私の場合は記事タイトル「.entry-title」、サイドバーのタイトル「.widget_title」となり、PCのフォントは「游ゴシック」にしてみました。

(ちなみにサイドバーのタイトルは「.widget_title」で変更できましたが、私が他に運営している方のブログでは何故か反映されませんでした。 「#sidebar h4」だと反映されたので、環境によって多少異なる可能性があります)



.entry-title,.widget_title { 
 font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}


そして公開ボタンを押して反映してみます!

変更前と変更後の比較

変更前

変更後

わずかな違いかもしれませんが、変更後の方が文字が少し細くなって柔らかい印象となり、私のイメージ通りに変更することが出来ました!

まとめ

本文等、その他の部分のフォントについては、デフォルトのままで良いと思っていたので、自分が気になっていた部分のフォントが変更できで良かったです!

自分好みのサイトのイメージに近づくと嬉しい気持ちになり、またブログの更新の意欲も沸いて来たりもします!

CSS初心者ながらも、妥協せずに他の人のブログ等を調べて、やってみても何故かブログに反映されない等ということもありながら、最終的に自分のイメージ通りに変更できたのでとても良かったです!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする