WEBデザイン

ブログのタイトルをgoogle fontsを使って好きなフォントに変える

石垣島ITブートキャンプで習った知識を使って!ブログをカスタマイズしていこう♪

前々から、MAGテーマのタイトルの文字が好きではなかったんです。まぁロゴで画像にすればいいんですが…なんとなく文字が良かったので。なので変更してみました。

MAGのタイトルフォントを好きなフォントに変更

f8d4ece7-40c0-4248-b653-e7962d37ecc1
私は現在このブログはMAGというテーマを利用しています。とてもいいんですが、やっぱり自分好みにカスタマイズしたい!まずは、タイトルを別のフォントに変更しました。

1.まずはgoogle fontsで選ぶ

まずはgoogle fontsのサイトから好きなフォントを選びます!
▶︎google fontsのサイトへ行く

沢山ありすぎて正直悩んで決まらないです。。。悩みに悩んだ結果、Fredericka the Greatというのを使うことに決定!

google_fonts
このフォント。ちょっと手書き風で可愛いです。

2.クリックしてタグを表示

google_fonts2
決めたら、右上の➕を押します。そしたら下に黒いバナーみたいなのが出てくるのでそれをクリックします。そうすると画像のように2種類のタグが出てきます。

上のLink〜と書いてあるのが、header.phpに入れるタグ、『font-family: ‘Fredericka the Great’, cursive;』がstyle.cssに入れるタグです。

3.タグをそれぞれ指定の場所にコピペ

linkの方のタグは、header.phpの方に入れます。テーマによって違いますが、MAGをお使いの方は、header.phpを開いての直前にコピペしましょう!
photo1

こんな感じです。このフォントを使うよっていう宣言です。これ書かないと反映されないので重要です♪

次に、font-familyのタグは、style.cssに記入します。MAGのテーマのこのタイトル部分は、h1を使用しています。見るとこのlogo_textのところのh1みたいです。

photo2
ここに、写真のような感じでコピペしましょう。

‘Fredericka the Great’, cursive;というタグなのですが、手前の方のフォントを指定しますよ、でも反映されなかったらcursiveというフォントを使いますよっていう意味です。

順番です。なので、3つ4つかいても大丈夫。順番に使えるか判断してくれてどれかのフォントを反映してくれます。ブラウザによってフォントが反映されない場合があるみたいですね。

これで、無事にタイトルのフォントが変更されました!

tokyo_girls_days
良い感じです!可愛くなりました❤️

phpファイル、cssファイルをいじる時は必ずバックアップを取りましょう。バグって下手したらテーマ入れ直しなどになるので面倒ですよ。

皆さんも色々とカスタマイズしてみましょう!私もこのサイトをどんどんカスタマイズしていってご紹介したいと思います。