bloggerブログの文字をグーググルフォントで変える

初心者Vaster2カスタマイズです。今回は「文字のフォントを変える」です。
前回同様、文字のフォントを替えるだけでも見た目の印象が変わります。

こちらも参考のサイト様があります。
Vaster2の参考は、
ブログ全体のフォントを変更する方法 [Blogger / Vaster2]|あかりlog

フォントの参考は、
はてなブログのタイトルのフォントを変更する方法　日本語対応 - ミニマムコラム

という事で、実際に取り入れた手順をご紹介します。

Google Fontsからフォントを選ぶ

まず好きなフォントを選びます。
グーグルさんで用意されているフォントです。

Google Fonts + 日本語早期アクセス • Google Fonts + Japanese Early Access

この中から気に入ったものを選びましょう。

HTMLにフォントを追加

ミニマムコラムさんの手順で要素を追加します。
今回はHTMLの編集になりますので、事前にバックアップは取っておいて下さい。

バックアップは、管理画面の「テーマ」の画面右上にありますので、「ダウンロード」を選択し、任意の場所へ保管しておいて下さい。

それでは、そのまま管理画面の「HTMLの編集」へ進んで<head>の下に下記のタグを書き込みます。

２０１９年１月追記
</body>タグの直前に記載するほうが読み込み速度が遅くならないです。

（四角で囲んだ部分から<head>が始まりますので、適当な部分へ追加記入してください。私は丸で囲んだ部分に入れています。）

この場合、必要なフォントの分だけの記入で良いです。
当サイトでは「さわらびゴシック」というフォントを使いたいので、

を読み込んでいます。

要するに、下記の黄色部分でフォントを選んでいると思って下さい。

href='https://fonts.googleapis.com/earlyaccess/sawarabigothic.css' rel='stylesheet'/>

M+1Pなら

Rounded　M+1cなら

はんなり明朝なら

こころ明朝なら

さわらび明朝なら

ニクキュウなら

ニコモジなら

Noto Sans Japaneseなら

全体のフォント設定

続いてあかりさんのブログを参考に、HTML中から

body{
margin:0;
font-size:16px;
line-height:1.7em;
}

を探して、｛　｝の中に

font-family:"Sawarabi Gothic","ヒラギノ角ゴ Pro W3","メイリオ","meiryo","游ゴシック",sans-serif;

を書き込みます。（これは、私のブログで使っているものですので上記の中の好きなフォントを入れて下さい。
「font-family:」のすぐ後に下記の必要なフォントを記入するという事です。

Mplus 1p
Rounded Mplus 1c
Hannari
Kokoro
Sawarabi Mincho
Sawarabi Gothic
Nikukyu
Nico Moji
Noto Sans Japanese

また、すぐ下に「* {・・・・」を書き込んでいます。

* {
font-family:"Sawarabi Gothic","ヒラギノ角ゴ Pro W3","メイリオ","meiryo","游ゴシック",sans-serif;
}

あかりさんのブログにある様に、同じようなものですが、２つ書かないと反映されないようです。
そして、
「font-size:16px;」は、文字の大きさ
「line-height:1.7em;」は、行間
になります。こちらは数字を変えるだけ良いので、お好きなサイズに変更して下さい。

ちなみに、私は他の運営サイトでもそれぞれ変えています。

絵本のサイトではかなり丸味のある「Rounded Mplus 1c」を使っています。

ヘッダーの文字のみを変更

続いて、「ヘッダー部分のみを変えたい場合」の手順を書いてみます。

全体の変更と同じように必要なフォントを管理画面の「テーマ」→「HTMLの編集」へ進んで<head>の下に下記のタグを書き込みます。

ミニマムコラムさんと同じニコモジ「Nico Moji」にしてみますので、上の一覧から該当コードを記入して下さい。

続けていきます。
HTML画面のずっと下の方に「ブログタイトル」のという項目があります。

ブログタイトルの中から、「.header-title a{　」を探して、

font-family:"Nico Moji”;

を追加します。

ＨＴＭＬの中から簡単に必要な項目を見つける方法は「Ｃｔｒｌ」キーと「Ｆ」キー同時押しで、検索バーを出して下さい。

出てきた検索バーに「ブログタイトル」と打ち込んで「Ｅｎｔｅｒ」キーを押せば該当の項目にたどり着きます。
（検索バーの文字を変えると他の項目も簡単に見つかります。指定ワードが複数存在する場合は、「Ｅｎｔｅｒ」キーを希望の項目にたどり着くまで何度か押してください。）

変更後がこちらです。
コミカルな文字ですので、姉妹サイトの四コマ漫画ブログのタイトルを変えてみました。

（ヘッダーの緑は広告です、中身は黄色で塗りつぶしたので少々分りにくいですが、ご了承下さい・・・。）

変更しましたが、どうやらニコモジは、「漢字には非対応」みたいですので、却下・・・。

と思ったのですが、ブログの下の説明文をルビみたいな感じで書いて、フォントを活かしてみます。

説明文は、先ほどの部分からすぐ下にある「.header-description p{　」の部分に同じ様に追加します。

ニコモジは少し小さく見えますので、フォントも大きくしてみましょう。

「font-size:28px;」の数字の部分を替えればOKです。

そして説明文を少々変えて・・・・

出来上がりはこの様な感じです。
少し無理がありますが、まぁこんな感じです。

文字を真ん中に寄せたい場合は、「text-align: center;」も一緒に追加すれば大丈夫です。

この要領でいきますと、タイトルを「Rounded　M+1c」で、説明文を「ニコモジ」の設定も可能です。

複数の文字を使う場合は、<head>の下に使う文字のタグを書き込んで下さい。
２種類使いたい場合は、２つの書き込みが必要です。

では、出来上がりです。

どうでしょうか？
漢字の部分に丸みを帯びたので、ニコモジ単体より少し見やすくなったような気がします。
統一感は無いですが、何となくコミカルな感じになりましたね。
この辺りは好みの問題ですので、好きなように変えてみましょう。

・・・という事で、色を替える様に、フォントを変える事で全体の雰囲気も変わりますので参考にしてみて下さい。

bloggerブログの文字をグーググルフォントで変える

Google Fontsからフォントを選ぶ