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

SANGOカスタマイズ

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

この記事ではGoogleフォントであるMegrimをSANGOで利用する手順を紹介します。

SANGOではロゴや日付部分にQuicksandというフォントが使われています。

丸みをおびてころんとした可愛さがあります。

対して今回変更したフォントはシュッとしておしゃれ。フォントだけで印象がガラッと変わるので、量産型SANGO感をなくしたい人は試してみてください。

手順

    Q&A

    [open title=’ロゴだけMegrimにしたい’] STEP2でこちらのコードをコピペしてください。[codebox title=”コード”]

    /*ロゴ部分のフォントを変更*/
    #logo {
        font-family: 'Megrim', cursive;
    	font-weight: 900;
    }

    [/codebox] [/open]

    [open title=’ヴィジェットタイトルに適用したい’]

    [codebox title=”コード”]

    STEP2でこちらのコードをコピペしてください。

    h4.widgettitle{
        font-family: 'Megrim', cursive;
        font-weight: 900;
    }

    [/codebox]

    [/open]

    [open title=’ロゴにもヴィジェットタイトル、日付欄にも適用したい’] 上のコードたちを列挙しても動くのですが、もっと短いコピペで済む方法があります。ちなみに私のサイト(少なくともこのページ)ではこのコードを書いています。

    [codebox title=”コード”]

    h4.widgettitle, .dfont, #logo {
        font-family: 'Megrim', cursive;
        font-weight: 900;
    }

    [/codebox]

    CSSはセレクタ{プロパティ:値}という形で構成されています。ざっくりいうと適用する場所{何を適用するのか}の形。{何を適用するのか}が一緒の場合、適用する場所は「,」コンマで区切って書くことができます。

    [/open]

    [open title=’もっと文字を細くしたい’]  [codebox title=”コード”]

    h4.widgettitle, .dfont, #logo {
        font-family: 'Megrim', cursive;
        font-weight: 100;
    }

     

    font_weight(フォントウェイト)の値を小さくすると細くなります。ただし細すぎるとデバイスやモニターによってかすれて見えにくい恐れがあります。

    [/codebox][/open]

    [open title=’その他やりたいことがある・もっと知りたい’]

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

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

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

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

    [/open]

     

     

    コメント

    タイトルとURLをコピーしました