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

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

ありがとうございました。
『いいね!』待ってます!

Twitter で

関連記事

  1. WEBデザイン

    ITブートキャンプ最終課題制作開始

    12日ブートキャンプを終えて1週間弱、ようやく重すぎた腰とお尻を上げて…

  2. WEBデザイン

    WordPressの子テーマの導入ってなに?

    こんにちわ。子テーマってなんとなく聞いた事はあったのですが、実際どんな…

  3. WEBデザイン

    最終課題、終わらず

    お久しぶりです。東京でだらけまくりの日々で、課題が終わりません。明後日…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

新着記事

Twitter でフォロー

  1. ノマド日記

    【秋田&青森ノマド旅 2日目】弘前城と匠館であんみつ
  2. 石垣島ブートキャンプ

    【石垣島ITブートキャンプ到着日】4年ぶりの石垣!
  3. 石垣島ブートキャンプ

    【石垣島ITブートキャンプ8日目】やる気の出ない日々
  4. レストラン&カフェ

    ITALIAN DINNING & BAR VILLAZZA due …
  5. 私のセブ島留学

    【私のセブ島留学 3日目】エスカリオ通り散歩→BIGHOTELでディナー
PAGE TOP