Jimdoウェブデザイン
水平線の上下に間隔を設ける、水平線の長さを調整する

Jimdoでは、管理メニューのデザイン「スタイル」を使うと、水平線の太さ、色、線種（罫線、点線、ハイフン線）を調整できます

しかし、水平線の上下（前後）の間隔を調整したり、水平線の長さを調整したりするには、ヘッダーを編集する（CSSコードを記述する）必要があります。

水平線の上下の間隔を調整する

水平線の上下に間隔を取りたい場合、コンテンツ「余白」を設定すれば、見た目的には同じ状態にできます。

しかし、水平線1本ごとにいちいち余白を設置していては手間だし、後から余白の高さを一括で変更することができません。

そのため、ヘッダーにCSSコード（デザインやレイアウトを指定するコード）を記述するのが正攻法です。

手順

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

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

</style>

これで、水平線の上下に16pxの間隔を取ることができます。

margin: 16px 0 16px 0;のうち、最初の16pxが水平線の上の余白、次の16pxが下の余白を示しています。数値を大きくすれば間隔をもっと広く、数値を小さくすれば間隔はもっと狭くなります。

水平線の長さを調節する

Jimdoで水平線を設置すると、横の長さはいっぱいに広がります（親要素の長さに合う）。

水平線の長さを調節するには、先ほどと同じく、ヘッダーにCSSコードを記述します。

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

hr {
  margin: 16px auto 16px auto;
  width: 80%;
}

</style>

これで、長さが（親要素に対して）80%の水平線になります。

margin: 16px auto 16px auto;のうち、2つのautoは、水平線を中央に揃えるコードです。

また、水平線の上下の間隔は引き続き16pxに指定してありますので、適宜調整してみてください。