『Blogger』のフォントをGoogleの日本語Webフォントに変える方法

先日、『Blogger』に新しいブログを作った
マユ〜。(@mayuu_pp)です。

mayuu’s CG and Games Diary

以前も書きましたが、
『Blogger』で選べるフォントは
日本語に対応していないので、
デフォルトだと微妙な感じに
なっちゃうんですよね。。。

そこで、わたしは今回
Googleで提供している日本語Webフォント
『 Google Fonts + 』に変えてみました!

BloggerにWebフォントアイキャッチ

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

こちら、まだ正式発表前ということなんですが、
カッコイイ日本語Webフォントが
無料で使えるので良いかな、と。

わたしが選んだのは『Noto Sans Japanese』と言うフォント。

細字では読みやすく、
太字では個性的という、
実に使い勝手の良いフォントです。

では、このWebフォントを
『Blogger』で使う方法を
ご紹介!

①ブログ管理画面の「テーマ」→「HTMLの編集」から

「head」タグの中に、使いたい
「WebフォントのURLを読み込むコード」を書き込む

BloggerにWebフォントスクショ1

②ブログ管理画面の「テーマ」
→「カスタマイズ」から

「上級者向け」
→「CSSの追加」
→「カスタムCSSを追加」という欄に
「ブログ全体にWebフォントを適用する」コードを書き込む

BloggerにWebフォントスクショ2

という2ステップでOK!

ちなみに、この
「書き込む」コードは
GoogleのWebフォントを紹介している
ページの右下に書いてあるんです!
親切!

BloggerにWebフォントスクショ3

上のコードをコピーして
①の場所に貼り付け。

下のコードを②の場所に。。。
と言いたいところですが、
それだと一部しか適用されなかったので、
いろいろ調べてこういう感じで書いたら↓


* {font-family: "Noto Sans Japanese","meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif !important; }


バッチリ、全体に適用されました!
(わたしは見よう見まねのド素人なので、もっとスマートな書き方があるかもしれませんが(汗)

ただ、これだと「ブログタイトル」の
フォントは変えられないんですけどねー。
(わたしには方法が見つけられませんでした。。。)
ブログタイトルは画像で上げるのが
一番速いかな?

。。。と、こんな感じで。

Webサイトにあるコードをコピー、ペーストするだけなのでかなり簡単!

他のCSSに詳しいサイト様の情報を探せば、もっと理解が深まると思いますが。。。

こんなシロウトでもできたよ!という
ことで(笑

HTMLとかサッパリ分からない!という人も、
ぜひチャレンジしてみて下さいね!

Posted from するぷろ for iOS.

Follow me!