MENU
papi
ブログ運営者
興味深い。笑える。あるいは為になる。
読み物として面白いブログでありたい。
そんなことを常に考えています。
 

【SWELLカスタマイズ】フォントを部分的に明朝体にするCSSコード

     

SWELLでは、カスタマイザーでベースとなるフォントを選ぶことができますが、その設定はサイト全体に反映される為、部分的に別のフォントにしたい場合はCSSで変更する必要があります。

個人的には、文章等はゴシック体の方が読みやすいと思いますが、明朝体の華やかさも捨てがたいです。

今回は、そんな私の様な欲張りさんの為に、ベースは読みやすいゴシック体を使い、タイトル等にワンポイントで明朝体を使うといった感じで、フォントを効果的に使い分けるポイントとCSSコードをご紹介させていただきます。

当たり前ですが、ベースとなるフォントを明朝体にされている方には、全く意味のないカスタマイズですのであしからずw

この記事の内容

フォントの印象

SWELLのカスタマイザーで選べるフォントは以下の4つです。

  • 游ゴシック
  • ヒラギノゴシック
  • Noto Sans JP
  • 明朝体

ゴシック体

明朝体以外のゴシック体フォントはどれも似たり寄ったりですが、総じて親しみやすく読みやすいので、ベースに据えるならゴシック体の方が適当かなと思います。

個人的な好みで言えば游ゴシックがおすすめで、このブログもベースは游ゴシックになっています。

明朝体

明朝体はこの4フォントの中では明らかに異質で、与える印象も全く異なります。

ゴシック体と比較すると上品で華やかな印象の明朝体ですが、サイト全体に使うと堅苦しくなりがちなので、ジャンルや内容によってはやや扱い辛いフォントです。

明朝体を使うポイントとCSSコード

ここからが本題ですが、前述のようにやや扱い辛い明朝体も、タイトルや見出し等のワンポイントで使うことで効果的なアクセントになります。

  • ヘッダー周り(サイトタイトル、グローバルメニュー)
  • メインビジュアル
  • ページタイトル

具体的な例を挙げるとこんな所で、1つずつCSSコードをご紹介していきます。

カスタマイズは自己責任でお願い致します!

ヘッダー周り

まずはサイトタイトルですが、このブログはロゴは使用せず、明朝体でタイトル(PAPILOG)をそのまま表示させています。

下手にサイトロゴを作るよりも、明朝体パワーでゴリ押した方がいい感じになるので、おすすめですw

コツは字間letter-spacingを少し空けることですね。

.c-headLogo.-txt {/*サイトタイトル*/
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    letter-spacing: .25em;
}

なお、タイトルを游ゴシックのままぶち込むと、何だか締まりのない非常に残念な見た目になってしまいますw

これぞ明朝体パワー。まさに適材適所です。

続いてグローバルナビ。

.c-gnav {/*グローバルナビ*/
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    letter-spacing: .125em;
}

グローバルナビも、サイトタイトルに合わせた方がまとまりがいいですね。

タイトルにロゴを使用している場合は、無理に明朝体にする必要はないかもしれません。

メインビジュアル

.p-mainVisual__scroll {/*Scrollボタン*/
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}
.p-mainVisual__slideTitle {/*メインテキスト*/
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	letter-spacing: .125em;
}
.p-mainVisual__slideText {/*サブテキスト*/
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
   letter-spacing: .05em;
}
.c-mvBtn__btn {/*ボタンテキスト*/
   font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

Scrollボタンなんて言われなければ気付かない様な微細な変化ですが、一応ねw

ページタイトル

.c-pageTitle {/*ページタイトル*/
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    letter-spacing: .25em;
    text-align: center;
}
.c-pageTitle__subTitle {/*サブタイトル*/
    display: none;
}

ページタイトル(固定ページとアーカイブページ)は、フォントの他にテキスト中央寄せとサブタイトルを削除するカスタマイズをしています。

タイトルの表示位置を「コンテンツ上」にすると、より見栄えがよくなるかと思います。

まとめ

以上が、ゴシック体の読みやすさと明朝体の華やかさを両立させるカスタマイズのご紹介でした。

明朝体をワンポイントで使うだけで、雰囲気が断然おしゃれになるのでおすすめです!



ご意見やご感想などは、お問い合わせまたはTwitter (@papillon_tw)にて承っております。

お気軽にご連絡くださいませ。

この記事の内容
閉じる