編集

Blogger『Contempo』でGoogle Fontsとフォント設定

｜2022/05/03
『BloggerでのGoogle Fonts(日本語Webフォント)の使い方』を参考にさせていただきました。

Google Fonts設定をしてみたメモ

フォントを丸く可愛いものにしたいと思っていたところで、ちょうど丸っぽくでも、ちゃんと読める範囲で崩れていないと思ったフォントを見つけたので変えた。……ただ、これを読みこむと重くなるので、乱用はしない方がいいらしいです。が、使いたいので使ってます。

※HTML編集の前にテーマ→バックアップは忘れずに。

*フォントを決める


まずは、Google Fonts + 日本語で使いたいフォントを選ぶ。
右下の<link href=のタグをコピーする。

私は「M PLUS Rounded 1c」を選んだので、その場合のみ書いていきます。

**フォント設定をする


テーマ→詳細設定→HTMLの編集で
コピーした部分に赤文字を加えて</head>タグの直前に入れる。
<!--  Web フォント -->
<link href='https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&amp;subset=japanese' rel='stylesheet'/>

赤色の部分はBlogger用にするために必要な部分らしいです。『'』部分が『"』になってるものもありますが、どちらでもいい…のかなと思ってる。素人なのでよく分かっていません。


***フォント設定

次は、テーマ→カスタマイズ→詳細設定→CSSを追加。
もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。
どちらのやり方でもやりやすい方でどうぞ。

ブログ全体。……一応書いてみるケド、設定はしていない。たぶん、これをすると、重くなるのでやめた方がいい。

/*ブログ全体フォントを指定する*/
* {
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
}

その他の場所のフォント設定↓
一部、個人的好みのための変更も混ざってます。必要部分だけピックアップしてください。

/*記事本文フォントを指定する*/
.post-body{
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
}

/* タブ 太字なしに変更 */
.tabs li a{
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
font-weight: normal;
}

/* 記事タイトル・リンク*/
.post-title a{
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
}

/*記事タイトルフォントを指定する*/
.post-title{
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
text-align: center; /*中央配置*/
}

/*サイドバー*/
.sidebar {
font-size: 13px;
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
}


！フォント設定が上手くいかない

フォントが上手く設定されなかったので、基本的なフォント設定を調べたら日本語名と英名を書くのではなくて英名だけでいいと分かったので、英名だけに統一。情報がどんどん変わっていくので、調べ直さないと置いていかれてしまう。このフォント設定、そう言えば１０年ほど前に拾ったタグだった。
さらに見直すとタグをミスっていた事が判明。ただのコピーミスでした。

参考サイト


記事タイトル中央設定

記事タイトルフォントの中央設定が設定できなかったので、見直し。

テーマ→詳細設定→HTML編集からこれを探す。
.post-title{
font:$(posts.title.font);
float:$(startSide);←ここ１行を削除
margin:0 0 8px 0;
max-width:calc(100% - 48px)
}


で、中央配置になりました。
このブログでは設定してません。創作用ブログで設定しました。
↓こんな感じになります





おまけ


Google Fonts公式サイトから使う場合はこちらの記事が分かりやすいと思うのです。私は日本語フォントにあるもので十分なのです。