top3

賢威で文字(文章)の行間を変えたり改行の幅や大きさ整える方法

Pocket

1965708320_f42b8aa9a8
コンテンツの見やすさは一瞬で判断されます。

それは文字の大きさや色だけではなく、行間や改行の幅の大きさを変えることが重要です。


しっかりと改行を意識しているつもりで「どうも自分の文章が読みづらいなぁ」と思っている方は、行間と改行を変えてみましょう。


文字の行間を変える


「外観」⇒「テーマ編集」⇒「design.css」と進みます。

296b5fa3fe65989b13a3776a6ce4bc7a-e1413274516838
                  
「メインコンテンツ(本文)」のすぐ下にある、#main-contents{ font-size: 1.4em; }を見つけましょう。

69cbf6c49745905ff74e2e5a3706bb8f


まずは、

#main-contents{ font-size: 1.4em; }
       
#main-contents{ font-size: 1.4em;
line-height: 1.7em;
}


と、変更しましょう。



以下と同じようになりましたか?

493b9eb9fe1c56794fe2f567086f926f                   

line-height: 1.6em;の数字を変えることで行間を調整することができますが、ここでは効果をわかりやすするため、3.0emにしてみました。


【before】
1675965ad0cc05b8af2a4075fc3a7206
【after】
dd8fcd7b40d166332ba64aa26ee6a430
これで、行間を調整することは完了です。

               

改行の大きさを変える


行間を変えたら、改行の大きさも変えてみましょう。

現在の改行幅だとこんな感じです。

39e65773a05ab32be676697b8df1c9b8                   

では、design.cssの最下部に以下を追加しましょう。

.article p {
line-height: 180%;
}


09260573655b09a5ba5a866fcba8e352
※180%はお好きな数値に変えましょう。ここでは効果をわかりやすくするために300%にしました。
                  

【変更後】
7a99f89d2c9e3d14eb83c9834e52d329

これも、自分が客観的にみて読みやすいと感じる幅に設定しましょう。

コメントを残す

サブコンテンツ