ブログのフォントを游ゴシック体にして大きさや行間を変えたら読みやすくなった!

最後まで読んでいただきありがとうございます!良かったらシェアをお願いします!!

記事のタイトルとURLをコピーする

こんにちはコーヘイ(@k3809)です。カスタマイズがいかようにでも可能はWordPress。今回はフォントを変更して大きさや行間をイジって読みやすいように工夫してみました。

スポンサーリンク

WordPressでブログを運営しています。

当ブログはWordPressを使っていて、「マテリアル」というテーマを使っています。

参考:テーマをマテリアルに変更して良いと思った3点をまとめてみた。 | こーへいんふぉ

初心者もカスタマイズが面倒臭い方にもオススメ!

WordPress無料テーマ「マテリアル」がおすすめ!スマホでも見やすくて素晴らしすぎる件 – ままはっく

マテリアルは月間50万PVのブログままはっくを運営まなしばさん(@manami1030)も勧めている無料テーマです。

カスタマイズもプロフィール挿入も、アドセンスの広告も管理画面から手軽にできます。

レイアウトも美しくてPC、スマートフォン、タブレットもピッタリ最適化されます。

これからWordPressではじめる方やカスタマイズが面倒な方に適したテーマです。

使っているテーマのフォントを変えたい!

ただ個人的な不満点としてフォントや行間が手軽に変更できないのです。

そんな訳で、カスタマイズしてみました。

スポンサーリンク

フォント、行間の変え方

スタイルシート(style.css)を開く!

スタイルシートを開きます。手順は

「ダッシュボード」

「外観」

「テーマの編集」

「スタイルシート(style.css)」

開けましたか!?では次にいってみましょう。

「font-family:〜」を見つける。

スクリーンショット 2015 05 15 21 08 55

スタイルシートを開いたら「font-family:〜」と表記にされているコードを見つけましょう。

ちなみに、変更前は「font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, “MS Pゴシック”, “MS PGothic”, Sans-Serif;」となっておりました。

「font-family:〜」を変える。

スクリーンショット 2015 05 15 21 21 54

そして、今回上記のコードを廃して以下のコードをいれました。

「font-family: ‘YuGothic’, ‘Yu Gothic’,’游ゴシック’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,’Meiryo’,sans-serif;」

游ゴシック体」というのを取り入れてみることにしました。

ついでに、文字の大きさや行間もこのタイミングで変更しました。

【font-size(文字の大きさ)を17px→18px】

【line-height(行間)を1.7→2.5】

変更したら良くなった(個人談)

フォントは以前のよりも読みやすくなり、行間も空いたので、ゆったりしました。

OSのバージョンによって見えたり見えなかったりとの事

えっ、フォント変わったの!?と思われる方がいるかもしれません。それは実装した「游ゴシック体」がOSによって入ってたり、なかったりするそうです。以下引用です。

OS X MavericksとWindows 8.1以降であれば「游ゴシック体」を使い、それ以外のMacならびにiOSでは「ヒラギノ角ゴシック」、Windows8以前の場合はメイリオを使います。それ以外のOSでは標準フォントにて表示されます。

出典:表示フォントを游ゴシック体を中心に変更しました。 | ものくろぼっくすより引用

つまり、Android系のスマホとか、タブレットで当ブログを読んでも特に変わらないって事ですね。

そんな訳で、PCで且つ最新バージョンのOSが入ってると、変化がわかるかもです。

フォント変更で参考にしたブログ記事

表示フォントを游ゴシック体を中心に変更しました。 | ものくろぼっくす

ものくろぼっくす」を運営されている、大東さん(@monochr)の記事を参考にしながらコードを変えてみました。ありがとうございます。

☞まとめ

文字だらけでカツカツギッチリした文章は読みにくいです。

せっかく良い事が書いてある記事でも、スルーされてしまう可能性が生じます。

文字は大きく行間は空いていたほうが、ゆったりして読みやすいです。

はてなやライブドアなど無料でできるブログも多少は調整可能ですが、限界があります。

その分WordPressは自分の好きなようにフォントの種類も大きさも行間も変えることができます。

WordPressで書いているブロガーさんは是非一度やってみてはいかがでしょうか!?

トップへ戻る