2018年11月18日

BloggerでのGoogle Fonts(日本語Webフォント)の使い方

Bloggerは管理画面のメニュー操作だけで日本語フォントを設定することができません。日本語フォントを設定するには、ある程度HTMLの書き込みが必要です。

ここでは、BloggerのブログをGoogle Fontsの日本語Webフォントで表示する方法を紹介します。

Google Fontsへのリンク設定

Google Fontsの公式サイトではなく、GitHubのGoogle日本語フォントのページにアクセスして、使いたいフォントをクリックします。
画面右下に現れる<link href=で始まるタグを1行まるごとコピーします。
ブラウザで新しいタブを開いて、Bloggerの管理画面にアクセスし、「テーマ」→「HTMLの編集」をクリックします。
<head></head>タグ内の適当なところに、コピーしておいたタグを貼り付けて、「テーマを保存」します。このブログでは、<b:include data='blog' name='all-head-content'/>の直後の行に貼り付けています。
なお、コピーしたタグをそのまま貼りつけてもIEには反映されません。IEに反映させるにはフォント名の直後に &amp;subset=japanese を加えます。また、コピーしたタグをそのまま貼り付けるとエラーでテーマを保存できない場合があります。その場合は、rel="stylesheet"の直後に半角スペースと半角スラッシュを入れます。
  • Noto Sans JPの例→ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet" />
  • さわらびゴシックの例→ <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&amp;subset=japanese" rel="stylesheet" />
  • さわらび明朝の例→ <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&amp;subset=japanese" rel="stylesheet" />
無事にテーマを保存できたら、「戻る」をクリックします。

日本語Webフォントの指定

再び、GitHubのGoogle日本語フォントのページに戻って、画面右下にあるスタイルのタグをコピーします。コピーするのは、{中括弧}の範囲だけでかまいません。
Bloggerの管理画面に戻って、「テーマ」→「カスタマイズ」をクリックします。
上級者向け」→「CSSを追加」をクリックして、「カスタムCSSを追加」欄に、コピーしたタグを貼り付けます。{中括弧}の前に*(半角アスタリスク)と (半角スペース)、中括弧の後半の"(ダブルクォーテーションマーク)と;(セミコロン)の間に , sans-serif と打ち込みます。明朝フォントを使う場合は、 , sans-serif のところを , serif に変えます。
  • Noto Sans JPの例→ * { font-family: "Noto Sans JP", sans-serif; }
  • さわらびゴシックの例→ * { font-family: "Sawarabi Gothic", sans-serif; }
  • さわらび明朝の例→ * { font-family: "Sawarabi Mincho", serif; }
ブログに適用」→「Bloggerに戻る」をクリックします。

以上の設定で本文のフォントが変わります。表題のフォントも変えたい場合には、「カスタムCSSを追加」欄で、*(半角アスタリスク)と{(中括弧)の間に , .Header h1 を追加します。
または、1行追加して、.Header h1についても同様のタグを追加します。
  • Noto Sans JPの例→ .Header h1 { font-family: "Noto Sans JP", sans-serif; }
  • さわらびゴシックの例→ .Header h1 { font-family: "Sawarabi Gothic", sans-serif; }
  • さわらび明朝の例→ .Header h1 { font-family: "Sawarabi Mincho", serif; }

注意

*(本文)と.Header h1(表題)のフォントを変えたい場合には、両方のGoogle Fontsにリンクを設定する必要があります。ただし、複数の日本語Webフォント(Google Fonts)の同時使用は、ページの読み込みスピードが遅くなるため、全くお薦めしません。

0 件のコメント:

コメントを投稿