賢威でメインコンテンツの文字サイズの大きさやフォントの色を変更するやり方

Pocket

10980851454_25b3f45586
賢威でメインコンテンツの文字の大きさを変える方法です。

個人的な感想ですが、デフォルトの文字の大きさだと小さくて読みづらいので多少大きくすることをオススメします。


また、大きさを変えることと伴い、文字の色も変更してみましょう。


メインコンテンツの文字の大きさを変更する


まずは「外観」→「テーマ編集」→「design.css」と進みましょう。

296b5fa3fe65989b13a3776a6ce4bc7a                   

「メインコンテンツ(本文)」の#main-contents{ font-size: 1.4em; }を探しましょう。

※Windowsの場合「Ctrl + F」で検索をかけましょう。


6cbdfe96e58fac420247bc71f417b58d
で、ここの1.4emがデフォルトの文字サイズなので、好きな大きさに変更します。

1.4em~1.7emぐらいがオススメです。


大きさが変わったことをわかりやすくするために、ここでは2.0emに変更してみます。

すると・・・

                  
【before】
95cefe4b99a331e347b7df28152580de

【after】
463a621680d9ad46ca4f3ff66ae2005b
こんな感じで文字の大きさが変わっています。


いくつかのサイトを参考にして、自分が見やすいと思った文字サイズを覚えておく。そして、実際に少しずつ変更してみて、自分の目で確かめてみる。

これを繰り返して、自分にとって最適な文字サイズを見つけましょう。


文字の色を変える


続いて、文字の色を変えてみましょう。

同じくdesign.cssの「サイト全体の共通設定」のすぐ下にある、body{ color: #333; }をみつけましょう。

8802eafb6cdf621181ae4ac477cf329f

この#333を好きな文字色のHTMLに変更します。

ここでは、わかりやすいように、赤(#FF0000)に変更してみましょう。
                  

df4958bbc913b0bbd37d31e4f8059a13
こんな感じで文字色が赤になりました。


注目するのは、「サイト全体の共通設定」の色を変えているので、本文だけではなく、記事タイトル、年月日、グローバルナビゲーションなど、すべてが赤文字になっているということです。


デフォルトは#333なので、真っ黒ではなく少しだけ薄い黒であることが特徴です。

実は真っ黒だと、とても光が反射してとても読みづらいので、黒を使う場合は少しだけ色を薄くするのがポイントです。

サイト・ブログの印象が良く読みやすい文字(フォント)の色に変更しよう


個人的には#444444(#444)ぐらいが見やすいかなと思っています。

コメントを残す

サブコンテンツ