Jimdoウェブデザイン
行間・段落間を調節する

読みやすいページにするのに行間や段落間を調整することは必須です。

Jimdoでは、行間は既存の機能から簡単に設定できますが、段落間は基本的にヘッダーから調整することになります。

行間と段落間の違い

まずは、行間と段落間の違いをおさらいしておきましょう。

青が行間、赤が段落間です。

行間を調節するには

まずは簡単な行間の調節方法から解説します。

1. 管理メニューから「デザイン」→「スタイル」を選択します。
2. カーソルがローラーのアイコンになったら、コンテンツ「文章」から作成した適当な文章をクリックします。
3. 上部メニュー「行間隔」から適当な数字を選びます。ここでの行間隔は、行の高さのことで（CSSのline-heightに相当）、1を選ぶと行の高さがフォントと同じに、2を選ぶと行の高さがフォントサイズx2になります。そのため、1未満を選ぶと、行と行とで、文字が重なってしまうので、基本的に1～2を選びます。

段落間を調節するには

次に段落間の調節方法ですが、こちらはヘッダーにデザインを指定するコード（CSS）を記述します。

1. 管理メニューから「基本設定」→「ヘッダー編集」と進みます。
2. 下記コードをペーストして保存します。
<style type="text/css">

p {
  margin: 16px 0 16px 0;
}

</style>

これで、段落の上下に16pxの余白を設定できるようになります。

margin: 16px 0 16px 0;のうち、最初の16pxが上部の余白、次の16pxが下部の余白を示しているので、これらの数値をいじることで段落間を調整できます。

段落間が文章の読みやすさやサイトのデザインに与える影響は大きいので、なるべく調整しておくことをおすすめします。

見出しの上下の間隔を調整する

段落間の調整は、見出しの前後の間隔を調整するときにも応用が効きます

段落間の調整でペーストしたコードのpを、大見出しならh1に、中見出しならh2に、小見出しならh3に変更するだけでOKです。

特に見出しはデザイン上、メリハリをつけるのが望ましいので、調整しておきたいところです。

ペーストしたコードの解説

<style type="text/css">・・・</style>でデザインを指定します（CSSコードを入力する）。

pは、段落を作るHTMLタグです。HTMLでは、<p>と</p>で囲ったコンテンツが段落として表示され、Jimdoのコンテンツ「文書」に相当します。

pに対するmargin{・・・・}は、隣接する要素との距離を示し、中で指定する4つの数字はそれぞれ上、右、下、左の距離を示します。

なお、marginに似ているものにpaddingがありますが、marginは隣接する要素との距離、paddingは内包するコンテンツとの距離を示します。

marginとpaddingについては、余白を設定する -paddingとmarginの使い方- で詳しく解説しています。

間隔を調節するのにコンテンツ「余白」は使わない

Jimdoには、コンテンツとして「余白」が用意されていますが、行間や段落間を調節するのにこの「余白」を使うのは推奨できません。

なぜなら、一回いっかい「余白」を挿入するのは手間がかかるうえ、後々から余白の高さを調節すると余計に手間がかかるためです。

一方、先に紹介した方法は、一括指定となるので、設定するのも調節するのも手間がかかりません。

見やすいデザイン、きれいなデザインを実現するのに、レイアウトは統一的に処理するのが望ましいので「余白」の使い過ぎは要注意です。