幻想的なMegrimフォントを適用する方法【SANGOカスタマイズ】 | VIRTUALBANKAS

幻想的なMegrimフォントを適用する方法【SANGOカスタマイズ】

注意
デザインが崩れる恐れがあります。元に戻せる状態でお試しください。

この記事では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(フォントウェイト)の値を小さくすると細くなります。ただし細すぎるとデバイスやモニターによってかすれて見えにくい恐れがあります。

おすすめのサイトリンクを張っておきます。

Google Fontsの使い方:初心者向けに解説!

font-familyの書き方まとめ:CSSでフォント種類を指定しよう

自分で考えるのが大変、面倒な人はこの記事のコメント欄に質問してみてください。わたしも初心者なので答えられるかわかりませんが、書くだけ書いてみてください(匿名OKです)

 

 

コメントを残す