賢威カスタマイズ-文字の大きさと行間幅の変更方法

賢威テンプレートでWordPress(ワードプレス)サイトを作った際に
投稿した記事の文字全体を大きくしたり、行間の文字と文字の
間の幅を調整する方法を説明します。

賢威カスタマイズ-全体の文字幅や大きさ変更で見やすいサイトに

賢威カスタマイズ-文字の大きさと間隔調節

賢威を使った際に、文字の間隔が詰まりすぎてるかな、
ちょっと読みにくいかもと思うことってありますよね。
あなたが自分の記事を見て読みにくいと思うのなら、
構成もそうですが、もっと基本的なことで文字の大きさ
上下の文字幅間隔を調整することでぐっと良くなるかもしれません。
では方法を順番に説明していきます。

 

 

文字が小さくて文字行間の詰まった状態は非常に読みにくい

賢威カスタマイズ-サイト文字幅と大きさ変更

どうでしょうか?これは私の記事の1つを参考にあげました。
これくらいの文字数であれば問題なく読めると思うのですが、
これが長文になるとどうでしょうか?
印象的には文字がぎっしり詰まっているというような印象を受ける
人が多いのではないでしょうか?もしくはどこが悪いか分からないけど
なんか読みにくいといった感想を心のどこかで感じる人も多いと思います。
せっかく中身がいいものであれば、最高の表現方法をしたいものですね。

 

 

文字幅、大きさのカスタマイズ手順

編集するテーマを確認する

テーマ選択

ダッシュボード内の外観→テーマ編集を押すと右上に編集するテーマを
選択するところがあるので、必ず編集したいテーマを確認しましょう。

design.cssで大きさと行間の幅を指定する

賢威カスタマイズ-文字大きさ変更

外観→テーマ編集→design.cssを開くと、その中にメインコンテンツ(本文)
という部分があるかと思います。
こちらの1行目に文字の大きさを指定する部分があります。
上画像赤枠部分に『1.4em』と書いてあるかと思いますが、こちらは賢威を
インストールした後では最初はこの数字となっています。
単に文字を大きくしたいだけであればここの数字を変更するだけでいいのですが、
文字行間の間隔を調整するにはさらに2行目に下記画像のように記載します。
文字の大きさと行間間隔の幅のバランスが大事なのでこちらの微調整については
ファイルを更新ボタンを押して、実際にサイト自体を確認してください。

賢威カスタマイズ-文字行間間隔

最近ではスマートフォンからのアクセスも非常に多いのが現状です。
PCで見た状態とスマホで見た状態はけっこう違うものですので、
PCでは最高だったけど、スマホでは間隔が空きすぎてむしろ見にくい・・・。
なんてことのないように設定する際にはどちらも確認しながら設定しましょう。

 

 

調整をするだけでやはり断然読みやすくなる

賢威カスタマイズ-文字大きさと間隔

どうでしょうか?上部にある画像と同じ文章ですが、
かなり読みやすくなりましたね。
このように少し文字の大きさと行間の間隔を微調整するだけで
詰まっていない自然な形に仕上がりました。
参考にしてください。

コメントを残す

サブコンテンツ

このページの先頭へ