カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

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

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

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

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

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

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

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

手順

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

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

    </style>

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

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

水平線の長さを調節する

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

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

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

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

    </style>

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

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

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

オフィスペンぎん
作者:オフィスペンぎん(オフペン)
日英中翻訳者/メディアディベロッパー/ライター。ペンギンの教室の他、タブストックにてソロギター向け編曲や採譜。依頼、相談、メッセージはフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter

教習所の口コミ投稿サイトレビュープラスを立ち上げました。ぜひ経験談や感想をお寄せください!