Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
どうも、ケイジです！
今回は賢威７カスタマイズとしてサイト全体の文字の大きさの変更方法を説明していきたいと思います。
文字はPCとスマホ両方で見た時に自然な大きさに
サイトの文字は大きければいいというわけではありません。大きすぎるとPCではスクロールする回数が自然と増えますので、それほど手間を取らせるということ、スマホでは不自然なズレがでてくる可能性があります。文字サイズは何度か設定してみて、PCとスマホのどちらも不自然ではない文字の大きさにするように気をつけましょう。
では早速、賢威７でサイト全体の文字の大きさを変更する方法を説明していきます。
賢威７の文字の大きさの変更方法
ダッシュボード→外観→テーマ編集→base.css
ダッシュボード→外観→テーマ編集→base.css内のメインコンテンツという部分を探します。上記画像の赤枠の部分がメインコンテンツ部分の文字に関する記述です。ここに文字の大きさを指定するソースを付け足すだけで文字の大きさは変更できます。
文字の大きさを指定するソース
font-size: 1.1em;
こちらを挿入すれば文字の大きさを変更できます。文字をもっと大きくしたければ１．１という数字をさらに大きいものにして、小さくしたければ数字を小さくしてみてください。極端な変更は不自然ですので若干くらいがちょうどいいでしょう。
文字の大きさに関するソース全文
.main-conts{
line-height: 1.8;
font-size: 1.1em;
}
挿入するソースは２つ上のものになります。こちらを挿入してもいいですし、すぐ上のソースを全部コピーして上記画像の赤枠部分に上書きしてから数字の部分だけ調整してもいいと思います。
ちなみに賢威６では行間の指定がもともとなかったように記憶しています。line-heightというのは行間の間隔を指す部分で賢威７ではデフォルトで入っている状態になっています。ここの数字を大きくすれば行間の余白を大きく取ることができ、逆に小さくすれば狭くなるということです。
行間スペースに関する記述は文字の大きさを変更するすぐ上にあるので、文字の大きさを変更する際に行間スペースをカスタマイズしたければまとめてやってしまってもいいかもしれません。
文字サイズのカスタマイズ前と後の変化
賢威７-デフォルト時
文字サイズカスタマイズ後
若干大きくしたのですごく分かりにくい画像の比較ですがどうですか？赤枠で囲ってある普通の文字やリンク文字以外にも、実は見出しタグも若干大きくなっているということにも注目してみてください。※ちなみに大きくしたからといってSEOには関係ありません。
まとめ
サイトの文字の大きさの変更方法を説明しました。サイトの文字の大きさを変更する一番の目的は、訪問してくれた人がより見やすいと感じてもらうためです。あまりに極端に大きくしたり、行間スペースを異常に開けたりしてユーザビリティを低下することに注意をすれば自分の好みでカスタマイズしていいかと思いますので参考にしてください。
