【CSS】ブログの表示フォントと大きさを変更する-font-family-

Total 7,304 views
この記事の所要時間は約 5分です。

今日は珍しく立て続けにワードプレスのサポートが入って
嬉しいやら忙しいやらのきゅいじんです。

スポンサーリンク


表題にもあるように、テーマファイルによっては
ブログ本文の表示フォントが見にくかったり小さかったりする時ってありますよね。

その大元のフォントのカスタマイズについてのお話です。

 

イメージ画像

 

フォントの設定ひとつで読む快適さも大きく異なるもんです

フォントの設定は、スタイルシートの body に設定してあるのが一般的だと思います。

body というのはサイト全体を包括するタグで、
そこに設定したものが大元の設定と考えてもいいでしょう。
(といっても設定できるものはそんなにはないですけど^^;)

表示フォントのカスタマイズ

ワードプレスなら
テーマファイルの中にある style.css というファイルを探します。
(ワードプレスの場合、CSSファイルは常にこの名前です)

style.css を開くと最初の方に body と書かれた部分が見えると思います。
こんな↓感じです。
(もしも他の CSSファイルを@import している設定であればそちらの CSSファイルに記述されている場合もあります)

キャプチャ画像

ここで設定します。

 

フォントの色設定は①「color: (色指数);」になります。

色指数には 3桁ないし 6ケタの 16進数で値を指定します。

例えば黒なら「#000」、薄い灰色なら「#CCC」、赤なら「#F00」になります。

といってもすべての数値を覚えることなんて不可能ですので、
色見本参考などを見て値をコピーして貼り付けます。

色の 16進数カラー値は、検索で「html 色見本」と入力すれば続々と出てくるので、
ご自身で一番見やすいサイトをブクマしておきましょう。

ちなみにフォント色をで設定するなら、濃い順に
「#000」「#333」「#666」を使っているサイトが多いかと思います。
お試しください。(細かく分ければもっとあります)

 

フォントに何を指定するかですが、
その設定が②の「font-family:」以下に書いてあるモノです。

一応原則というのがあります。

  • 基本はどのパソコンにもインストールされていると思われるフォントを指定する
  • 一番左が優先順位最高度のフォント指定で、そのフォントがなかったら右側のフォントで表示して、それもなかったらさらに右側の…………となる
  • フォント名は勝手に全角・半角を変えてはいけない
  • 日本語フォント名と空白の存在するフォント名は「" "」もしくは「' '」で囲み、空白の存在しないローマ字フォント名はそのままの表記で問題なし
  • 日本語フォントは日本語とローマ字の両方を併記しておく

といったものです。

フォント名を間違えると当然のことながら反映しません。

また最後の sans-serif はゴシック系フォントという総称みたいなもので、他に何もなかったらゴシック系フォントで表示しなさいという保険のようなものです。

ベースとなるフォントの大きさは③の「font-size:」で指定します。

大きさの単位は px だったり large だったりいろいろありますが、
私が推奨するやり方としては、
『body へのフォントサイズは絶対値の「px」で指定し、それ以外の個別のフォントサイズの変更は「em」指定にする』というものです。

emというのは倍率みたいなもので、
1.4emと書けば bodyフォントサイズの 1.4倍の大きさ、
0.85emなら 0.85倍の大きさという意味になります。

ご参考までに当サイトのフォント設定は以下のようになってます。
(度々変わる恐れもあります。ご了承を)

キャプチャ画像

 

①ベースとなるフォントサイズは 16px。

line-height行間のことで 1.4 と設定してあります。単位をつけない方が扱いやすいです。

③英数字には Tahoma を優先採用、日本語にはメイリオを、なければヒラギノ角ゴで~。

④フォントカラーは一段だけ薄い黒で。

おまけ:編集画面のフォントサイズの変更

私は老眼です。

しかもフル HD 表示ノート PC で記事を編集しようとしたら…………
文字がちっちゃくて見づらいんです。

そこでもっと見やすくするために投稿編集画面のフォントサイズを大きくしてます。

将来の老眼のためにこのカスタマイズを覚えておくと便利ですよ。
今はそうでなくてもすぐに老眼になりますから。(笑)
(ただしテキストエディタモード時のみです&ワードプレス3.3以降で有効です)

カスタマイズの注意点として、失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておきましょう。

カスタマイズは、
テーマフォルダの中にある functions.php に直接下の↓コードを書き込みます。

貼り付ける位置ですが、どこに貼り付けていいかわからないということであれば、
冒頭の「<?php」の次の行にでも貼り付けてみてください。

↓コピーペースト用コード

フォント指定やサイズ、色などはお好みのものに変えてください。

またカスタマイズの必要のないモノは無理に記載する必要はありません。
たとえばフォントカラーはそのままでよければ「color:#000;」をそっくり削除するだけです。

おまけ:文の途中の一部分だけのフォント変更

文の一部分だけちょっとフォントを大きくしたい、色を赤にしたいなんて言う時は
span style もしくは span class を使います。

例えば次のような一文があったとします。

「これはサンプル文です。」

このうち「サンプル」という文字だけを少し大きくしたい場合、直接スタイルを設定するのであれば
「これは<span style="font-size:1.5em;">サンプル文</span>です。」
と書きます。

こういった設定を書き込む箇所がちょくちょく出てくるのであれば、
クラス(class)を付与してフォントサイズの設定は CSS に記述しておくのが効率的です。

「これは<span class="f_small">サンプル文</span>です。」

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

2件のコメント

  • 初めまして、ジンと申します。

    この記事がとても参考になりました!ありがとうございました。

    フォントの設定が上手くいかずに凹んでいたので、助かります。

    お陰様でとても見やすくなりました。また参考にさせて頂きます!

    • cuisine

      ジンさん、きゅいじんです。
      お役に立ててよかったです。

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)