賢威のテキスト行間と段落幅を広げるカスタマイズ方法

ども、Kiyoです。
今回は賢威テンプレートのテキストデザインを変えるカスタマイズです。

テキストデザインといってもフォントではなく「行間」と「段落」のスペースのことです。この部分をカスタマイズしていこうと思います。

文章の行間や段落の幅の好みって人それぞれですよね。行間が詰まっている方が読みやすいという人もいれば、段落が広い方が見やすいと言う人もいます。

個人的には、長文であれば行間や段落にスペースがあった方が読みやすいように思えます。一方、メルマガのような文章は、行間や段落が詰まってた方がいいように思えます。

賢威テンプレートでは、少し行間が詰まっているように見え、さらに段落も詰まっていると感じます(主観ですけど)。そんなわけで、この行間と段落のスペースを広げるカスタマイズしていきます。

行間スペースを広げるカスタマイズ

行間を広げるカスタマイズの手順は以下の通りです。

まず、ワードプレス管理画面の外観から「base.css」を選択します。

ワードプレス管理画面 > base.css

その中にある、行間のタグ「 line-height:  」を探しだします。

賢威の行間をカスタマイズ1

この「 line-height: 」の数値を大きくしていきます。そうすれば行間スペースが広がります。因みに僕の場合は「 line-height: 」を「2.1」にしました。

賢威の行間をカスタマイズ2

数値を変更したら、更新します。これで行間のスペースは広くなりました。

段落スペースを広げるカスタマイズ

次は、段落幅を広げるカスタマイズです。

先ほど、行間を広げるカスタマイズをしているので、バランスをとるために段落幅も広げていきます。段落幅のカスタマイズ方法は、まず、ワードプレス管理画面の外観から「base.css」を選択します。

ワードプレス管理画面 > base.css

その中の「 p{ 」を探し、そのすぐ下の「 margin: 0 0 1em; 」の数値を変更します。

賢威の段落幅をカスタマイズ1

この数値を大きくすれば、段落幅が広がります。僕は「 margin: 0 0 2em; 」に変更しました。

賢威の段落幅をカスタマイズ2

数値を変更したら更新をクリック。すると段落のスペースもカスタマイズされ、広げることができました。

以上が、賢威の行間と段落のスペースのカスタマイズ方法です。今回のカスタマイズは読者が読みやすいように配慮したカスタマイズですが、好みが分かれるので悩むところですね。

個人的には好きなテキストデザインなので、良いと思います。

なお、今回の解説を動画で撮りました。良かったらご試聴ください。

では、また。