注意
デザインが崩れる恐れがあります。元に戻せる状態でお試しください。この記事ではGoogleフォントであるMegrimをSANGOで利用する手順を紹介します。
SANGOではロゴや日付部分にQuicksandというフォントが使われています。
丸みをおびてころんとした可愛さがあります。
対して今回変更したフォントはシュッとしておしゃれ。フォントだけで印象がガラッと変わるので、量産型SANGO感をなくしたい人は試してみてください。
手順
STEP.1
heder.phpにコピペ
画面左の外観＞テーマの編集＞SANGO＞テーマヘッダーに移動します。
普通だとテーマの編集に移動したときこの画面になっていると思います。テーマヘッダーは親テーマにしかないので、
画面右上の「編集するテーマを選択：SANGO」を選択し、header.phpをクリックしましょう。
6行目くらいに「＜head＞」の文字があると思います。その真下の行に
コード
<link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">をコピペして追加してください。
STEP.2
子テーマスタイルシートにコピペ
先ほどと同じ手順で「編集するテーマを選択：SANGO Child」を選択して子テーマのスタイルシートに
コード
をコピペします。/*英数字部分のフォントを変更*/
.dfont {
font-family: 'Megrim', cursive;
font-weight: 900;
}
STEP.5
完成！
QuicksandだったところがMegrimになっておしゃれになりました。
Q＆A
STEP2でこちらのコードをコピペしてください。
コード
/*ロゴ部分のフォントを変更*/
#logo {
font-family: 'Megrim', cursive;
font-weight: 900;
} コード
STEP2でこちらのコードをコピペしてください。
h4.widgettitle{
font-family: 'Megrim', cursive;
font-weight: 900;
} 上のコードたちを列挙しても動くのですが、もっと短いコピペで済む方法があります。ちなみに私のサイト（少なくともこのページ）ではこのコードを書いています。
コード
h4.widgettitle, .dfont, #logo {
font-family: 'Megrim', cursive;
font-weight: 900;
}CSSはセレクタ｛プロパティ：値｝という形で構成されています。ざっくりいうと適用する場所｛何を適用するのか｝の形。｛何を適用するのか｝が一緒の場合、適用する場所は「,」コンマで区切って書くことができます。
コード
h4.widgettitle, .dfont, #logo {
font-family: 'Megrim', cursive;
font-weight: 100;
}
font_weight（フォントウェイト）の値を小さくすると細くなります。ただし細すぎるとデバイスやモニターによってかすれて見えにくい恐れがあります。
おすすめのサイトリンクを張っておきます。
font-familyの書き方まとめ：CSSでフォント種類を指定しよう
自分で考えるのが大変、面倒な人はこの記事のコメント欄に質問してみてください。わたしも初心者なので答えられるかわかりませんが、書くだけ書いてみてください（匿名OKです）
コメントを残す