特に理由はないのですが、ある日ネットを徘徊している最中に自分のブログのフォントが気になり始めてしまったので、気分転換と幾分かの視認性向上を期待してフォントを変更してみました。
ちなみにいま、このエントリーを書いている時点で適用しているテーマは "UnderShirt" というもので、去年の6月から使用中。
フォントに関してはGoole Fontsから "Open Sans" を使用していました。
Google Fontsに追加された日本語フォント
先ほどネットを徘徊中にと書きましたが、もうひとつ、フォント変更を検討する材料となったニュースがありました。それがこちら：
というわけで、これらの中からパソコンでもスマホでも、あるいはタブレットでもこれまでより視認性が向上して読みやすくなりそうな "M PLUS 1p" から若干太めの "Medium 500" を採用。
これが（macOSの場合、実際には少し違うけど）
変更後はこう：
こうやって並べると太さが変わっただけに見えちゃうなぁ……個人的にはもっと劇的に変化したと思ってたんだけど（^-^;
変更方法
同じ "M PLUS 1p" の "Medium 500" を適用する場合を例にすると：
- Google Fonts "M PLUS 1p / Medim 500" を選択する
- 右側の "Use on the web" の欄で "<link>" を選び、その下のグレーの欄内に記述されているタグを全選択してコピー
- 自分のはてなブログに戻り、設定＞詳細設定を開く
- 詳細設定画面の中段ほどにある "<head>要素のメタデータを追加" と題されている欄内に先ほどコピーしたタグをペーストして、ページ最下部の［変更する］ボタンをクリック
- 先ほどのGoogle Fontsのページに戻り、先ほどコピーしたタグが記されている欄の下にある "CSS rules to specify families" に記されているスタイルシート "font-family: 〜" を全選択してコピー
- 自分のはてなブログに戻りデザインページを開いたら、レンチアイコンをクリックし、一番下に表示されている "デザインCSS" の項目をクリック
ここまででCSS編集用の別窓が開いているはずなので、あとはフォントスタイルを適用したいHTMLタグにこのスタイルを割り当てるだけです。
自分の場合は面倒臭いのでブログ全体に変更が反映されるよう、<body>タグにこのフォント指定を掛けると同時に、本文の文字色だけ黒から濃いグレーに変更しました：
body {font-family: 'M PLUS 1p', sans-serif; }
p {color: #444 !important; }
以上、参考になれば。
