賢威でブログ全体のフォントを変更する方法

この記事は約4分で読めます。

  • LINEで送る

賢威のフォント変更

賢威のWebサイト・ブログの印象を簡単に・ガラッと変える方法として、
Webサイト・ブログのフォントを変更する方法があります。

この賢威カスタマイズも、賢威テンプレートで初期設定されているフォントから
自分のサイトイメージに合ったフォントに変更しています。
今回は、Webサイト・ブログ全体のフォントを変更する方法を説明します。

「common.css」の「font-family」スタイルを変更する

全体のフォントを変更する方法は非常に簡単です。
「common.css」の「font-family」スタイルを変更します。

賢威のフォント変更

/*--------------------------------------------------------
レイアウトの初期設定
-------------------------------------------------------*/
body{
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
	font-size: 62.5%;
	font-style: normal;
	line-height: 1.5;
}

WordPressの管理画面で「外観 > テーマ編集」を選択し、「common.css」を開きます。
すると、上記のような「body」で囲まれた部分が見つかります。

このうちフォントを決めているのは「font-family」です。
「font-family」のスタイルを変更することで、Webサイト・ブログ全体のフォントが変更できます。

「font-family」をなぜ複数設定しているのか

上記のCSSでは「font-family」を複数指定しています。

  • ヒラギノ角ゴ Pro W3
  • Hiragino Kaku Gothic Pro
  • メイリオ
  • Meiryo
  • MS Pゴシック
  • sans-serif

これは訪問者のためです。訪問者はOSやブラウザなど、それぞれ環境が異なります。
フォントは、各PCにインストールされて初めて表示されます。
よって、訪問者の環境にあなたが指定したフォントがインストールされていないと、
あなたのWebサイト・ブログが意図しない表示となってしまう可能性があります。

そこで、「font-family」を複数指定することで指定したうち、
いずれかのフォントで表示してもらうように複数フォントを指定します。
左から優先順位が高く、そのフォントがなければ次の候補へ移ります。

複数フォントを指定する場合は、各フォントを「,(カンマ)」区切りで指定します。

「font-family」に指定できるフォントは多い

フォントに指定できるパターンは非常に多く、以下のサイトで確認できます。

総称ファミリ名分類のフォント名一覧 | W3G

この中かから、好きなフォントを選択し「font-family」に指定します。
もちろん、しっかりとブログを確認しながら変更しましょう。

この時、「’(引用符)」で区切られているフォントは、「font-family」へ引用符ごと指定します。
例えば「’arial’」は「arial」ではなく、引用符付きの「’arial’」で指定します。

ちなみに、賢威カスタマイズでこの記事を書いている時はこのような指定になっています。

/*--------------------------------------------------------
レイアウトの初期設定
-------------------------------------------------------*/
body{
	font-family: 'Century Gothic', Verdana, Arial, Helvetica, 'Jun 201', 'Hiragino Maru Gothic Pro', 'ヒラギノ丸ゴ Pro W4', 'Meiryo UI', 'メイリオ', Meiryo,Osaka, 'MS Pゴシック', sans-serif;
	font-size: 62.5%;
	font-style: normal;
	line-height: 1.5;
}

昔から「’Century Gothic’」フォントが好きなので、この指定にしています。

フォントの変更は好みで行えば良いと思います。
しかし、あまりこだわりがなければ賢威の初期設定フォントの左側に好きなフォントを追加していく方法がおすすめです。
もし、レアフォントを選択しても表示されない場合は元々の賢威の設定が適用されます。

部品ごとにフォントを変更することはあまりおすすめしません

現在の「font-family」は「body」全体に対して適用されます。
つまり、Webサイト・ブログで表示されている部分は全て同じフォントになります。

そして、「font-family」は実は他の部品に対しても設定できます。
記事部分だけ、サイドバーだけ、ヘッダー部だけ…など、細かくフォントを変更することは可能です。
しかし、細かくフォントを変更すると非常に見づらいWebサイト・ブログになってしまいます。

「font-family」の指定は、余程の理由がない限り今回のように「body」のみの指定とし、
Webサイト・ブログのデザイン性は統一させましょう。

  • LINEで送る

コメントを残す

このページの先頭へ