以前はデフォルトのゴシック体にしていましたが、明朝体にしました。
Windowsでは游明朝(游明朝がない場合はメイリオ)、Macではヒラギノ明朝で表示されます。
しかし、ちょっと一筋縄では行かなかったので、ここにその時の記録を残したいと思います。
今回は、記事のタイトルと本文を変更しました。
基本的にこういったフォントなどの装飾を変更する時は、CSSを追記します。
「テーマ」 > 「カスタマイズ」 > 「上級者向け」 > 「CSSを追加」
上記のように辿ると、CSSのソースを記述するテキストボックスが現れます。
このように入力することで、無事に反映させることができました。
| h3.post-title a { text-decoration: underline; font-family: '游明朝', 'ヒラギノ明朝 ProN W3' !important; font-size:200%; font-weight:600; } .post-body { margin: 0.75em; line-height: 1.6em; font-family: '游明朝', 'ヒラギノ明朝 ProN W3' !important; font-size: 17px; font-weight:400; } |
実は、この形に行き着くまでに結構時間を要しました。
上手く行かなかった要因は大きく3つ。
①font-familyでフォントを指定する際、全角文字が含まれるフォント名を記載する場合は"(ダブルクォーテーション)ではなく、'(シングルクォーテーション)で囲む。
→参考にしていた幾つかのサイト様をコピペして使っていましたが、両方混在していたため、上手く反映されませんでした。
最初は、どちらでも認識されるものと思っていたのですが、どうやらそうではないようです。
②font-familyでフォントを指定した後、最後に必ず「!important」を付与する。
→通常の指定方法では、どうやってもBlogger側で指定しているデフォルトのフォントの方が適用されてしまいます。
「!important」と指定することで、強制的にCSSで指定したフォントで表示させるよう設定します。
③MacのChromeではどうやっても反映されない!?
→この検証をするにあたり、ずっとChomeでやっていましたが、どうやっても反映されず、しびれを切らして、Safariで見てみたら、問題なく反映されていたことを確認。
WindowsではChrome、Edgeで見ましたがどちらも問題なし。
他のブラウザではひょっとしたら、上手く反映されていないかもしれませんが、参考までに。
当然ながら、利用者側のPCにインストールされていないフォントを指定すると、利用者側はデフォルトのフォントで表示されてしまうので、OSに最初からインストールされているフォントの中から選ぶのが無難です。
とは言え、最初からインストールされているフォントも以前と比べて多いような気もするので、よっぽどフォントにうるさい人でない限り、お気に入りのフォントは1個ぐらい見つかるかもですね。
0 件のコメント:
コメントを投稿