Blogger にGoogle Fontsを入れて日本語フォントを変更する

日付:
2020年元旦、あけましておめでとうございます。Yukonです。
Google bloggerのデフォルトフォント（日本語）がイケていない件、ようやく着手する気になりました。
あまりに期待通りにうまくいかないので、よっぽど別のブログサービスに引っ越そうかと悶々としましたが、いくつかの懸念点を払しょくできるほど下調べが出来なかったので、重い腰を上げて日本語表示のカスタマイズに至りました。
この記事では、私がGoogle bloggerにGoogle fontsに設定した方法と、はまったエラーについて紹介します。
  • STEP1 Google fontsサービス（無料）で使いたいフォントを探す
  • STEP2 Google bloggerのヘッダーへフォントのリンクコードを追加する
  • STEP3 Google bloggerのテーマでCSSにフォントファミリーを追加する
  • Troubleshooting #1 XML解析エラーNo.1
  • Troubleshooting #2 XML解析エラーNo.2
  • Troubleshooting #3 指定したフォントがBloggerに反映されない？


 STEP1 Google fontsで使いたいフォントを探す

Google fontsへアクセスします。https://fonts.google.com/
ここで画面左上のLanguageでJapaneseを選択します。表示された日本語フォントから好きなものを選ぶか、好きなフォントを検索等から探してください。



利用したいフォントが決まったら、各フォントの右上の＋ボタンで追加をします。すべてのフォント選択が終わったら、右下のFamily selected..の黒いバーを開きます。



Customizeメニューから読み込みたいフォントのサイズや太さ、言語を選択します。選択が多くなるとページ読み込みに時間がかかるので、必要なものだけ選択するとよいでしょう。

EMBEDのStandard内の記述をコピーします。

このページを開いたままにしてください。STEP2とSTEP3で使います。

STEP２ Google Bloggerにリンクコードを追加する

Google bloggerへアクセスし、ダッシュボードの左メニューからテーマ ｜HTMLの編集　を開きます。

コード内のフレーム内でCntrol +F（windowsの場合）で検索メニューを出して **/HEAD ** を検索します。
以下の黄色いハイライト：HEADタグ閉じの直前に、STEP1でコピーしたリンクコードを張り付けてください。


ここでエラーが出た場合は、このページのTroubleshooting＃1と#2を参照してください。

 STEP３ Google Blogger CCSに Font familyを追加する

STEP1のGoogle fontsのメニューを開き、Specify in CSS の記述をコピーする。
Google bloggerのテーマ ｜カスタマイズ |上級者向け｜CSSの追加を開く。
コピーした記述をコピペしてブログに適用する。
----------------------------------------------------------------------
* {  
body {font-family: 'M PLUS 1p', sans-serif;}
} 
----------------------------------------------------------------------
複数フォントの場合は以下の通り。
----------------------------------------------------------------------
* {
body {font-family:  'M PLUS 1p','meiryo','Hiragino Kaku Gothic ProN', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
}


----------------------------------------------------------------------


これでご自身のBloggerにアクセスしてフォントが適用されていることを確認できれば設定完了です。



いかがでしたか？


Google bloggerはカスタマイズの幅が広くその気になればいろんなことができるらしいですが、ゆえにある程度HTMLやCSSの修正などもやらねばならず、敷居がやや高いですね。

余談ですが、冒頭で触れた私が他のブログサイトへの引っ越しに関する懸念は以下の三つです。
- そのサービスのプロダクトライフサイクルの長さが読めない。
- NoteやQiitaは盛り上がっているし使いやすいかなと思いましたが、上がっているジャンルがソフトウェア開発などのIT系なので、個人の趣味も混ざったものは合わないかも？
- MediumはNoteのような路線に行きそうで、公共性の高い記事のような気がするのでこれも合わないかも？

結果的に、ある程度Google bloggerは便利な面もあるため、まだGoogle bloggerに残りぽつぽつ続けることになりそうです。


Reference
この設定変更に当たり以下のサイトを情報を参考にしてやってみました。自分用の設定しか確認していませんので、詳細はこちらのサイトもどうぞ。
Google fonts : https://fonts.google.com/?subset=japanese&selection.family=M+PLUS+1p:300,400,700,800&selection.subset=japaneseサルワカ|【2019年版】Google Fontsの使い方：初心者向けに解説！ https://saruwakakun.com/html-css/basic/google-fonts
日々のメモ 帖 |Bloggerで表示するフォントを変更する方法 http://holidaybuggy.blogspot.com/2017/03/blogger_20.html
Georgia Lou Studio | Use Google fonts in Blogger https://georgialoustudios.com/use-google-fonts-blogger/
Google chrome help | 指定したフォントが反映されない https://support.google.com/chrome/forum/AAAAG2Advocdv5OVy789t4

コメント

コメントを投稿