文の行間を調整して見やすくする

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

文の行間を調整して見やすくする

サンプル画像

説明するまでもないでしょうが「行間」というのは文と文との間隔です。

 

シリウスの場合、こちら↓がデフォルトの「行間」での見栄えです。

 

キャプチャ画像

 

行間は狭すぎても広すぎても読みづらいですが、
サイトの”雰囲気”によっては行間を変えたい時もあるでしょう。

 

これはスタイルシート(CSS)を変更することで変えられます。

 

「テンプレート」→「スタイルシート編集」を開き、下の↓部分を探します。
『line-height 』と書いてある部分が行間設定です。

 

キャプチャ画像

 

デフォルトでは 140% となってますね。

 

行間を広げたい時はここを 180 などの大きい値に変更し、
狭めたい時は 120 などの小さい数値に変更します。
(実際にやってみるのが一番わかりやすいです)

 

こちらが 180%に広げたときの行間サンプルです。
だいぶ広がりました。

 

キャプチャ画像

 

ブログ形式の読ませることを中心としたサイトなどでは行間を”広め”に取ると読みやすくなる傾向があります。

それ以外は行間を開けすぎると間延びしてしまってサイトが引き締まらなくなるので、デフォルト設定のままかほんの少しだけ広げるぐらいの方がいいでしょう。

じゃあ狭くするのはどんな時かと言うと、商品説明など必ずしも読ませる必要はないけどないと困るような文章の時ですね。

こういう時はその文章にクラスを付けてクラスごとに line-height を設定してやるとそこだけ行間が狭くなります。

ただしあまり狭めすぎるとホントに読みにくくなるので、その辺は加減が必要です。

 

ここまで説明してきた行間ですが、
行間はあくまで段落内で改行されてできた文と文との空き具合のことで、
段落の空き具合とは異なりますす。

 

さきほどの文章はシリウス編集画面ではこんな↓感じになっています。

 

キャプチャ画像

 

『<P>タグ改行』の場合、
[Enter]キーを 1回押すと”改行”になり 2回押すと”改段落”になります。

 

ソースを見てみましょう。

 

キャプチャ画像

 

<br /> というのが改行([Enter]キーを 1回)を表します。
これが”行間”を作り出します。

 

<p>&nbsp;</p> というのは改段落([Enter]キーを 2回)を表します。
ここの空き具合は『”行間”値+<p> タグのマージン』になります。

 

このため”行間”をいくら広げても”段落”はそんなに広がりません。

 

もしも段落そのものを広げたいのなら次のやり方で広げることができます。

 

「テンプレート」→「スタイルシート編集」を開き、以下の部分を探します。

 

キャプチャ画像

 

デフォルトではマージン下(margin-bottom)が ”0”になっています。
これを 5pxとか 10px とかにすることで段落間が広がります。

 

ちなみにこちら↓は マージン下を 20pxにしてみたものです。
冒頭の画像と比べて行間は変わらず段落部分だけが開いているのがわかると思います。

 

キャプチャ画像

 

ただし上の CSS設定を上書き変更してしまうとすべてのページの段落が大きく広がってしまいます。

たとえばエントリーページの本文だけの段落間隔を空けたいとかであれば、body class を使うという手もあります。

 

なおここで指定した行間は PC上でしか反映されません。
iPhone(スマホ)も同じように変えたいのなら、
「テンプレート」→「iPhoneサイトスタイルシート編集」を開いて
同じように変更する必要があります。

 

以上です。

購入ページへ


TOPへ戻る