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に反映させるにはフォント名の直後に
&subset=japanese を加えます。また、
コピーしたタグをそのまま貼り付けるとエラーでテーマを保存できない場合があります。その場合は、rel="stylesheet"の直後に半角スペースと半角スラッシュを入れます。
- Noto Sans JPの例→ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese" rel="stylesheet" />
- さわらびゴシックの例→ <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&subset=japanese" rel="stylesheet" />
- さわらび明朝の例→ <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&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)の同時使用は、
ページの読み込みスピードが遅くなるため、全くお薦めしません。
の使い方){kind=link}
0 コメント
Privacy Policyに記載の方法で匿名でもコメントできます。