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

Jimdoウェブデザイン
リスト上下の間隔を調整する

Jimdoでは、コンテンツ「文章」のメニュー「番号付きリスト」または「番号なしリスト」を使うことで、簡単にリストを設置することができます。

しかし、Jimdoのこの既存機能ではデザインを調整できないという弱点があります。

生成したリストの上下(前後)の間隔を広げたい、あるいは狭めたいという場合には、ヘッダーにCSSコードを記述します。

手順

  1. コンテンツ「文章」からメニュー「番号付きリスト」または「番号なしリスト」を適用します(以下は番号なしリスト)。
  2. Jimdo コンテンツ「文章」からリストを作成する。
  3. 管理メニューから「基本設定」→「ヘッダー編集」と進みます。
  4. 下記コードをコピーして、ヘッダー編集画面にペーストします。
  5. <style type="text/css">

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

    </style>
    ヘッダー編集画面にCSSコード(li, margin)を記述する。
  6. 保存して完成。
  7. リスト上下(前後)の間隔の調整完了。

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

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

liは、リストを作るHTMLタグで、リストに対してデザイン情報を付加することを示しています。

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

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

pxを大きくすれば間隔はより広く、pxを小さくすれば感覚はより狭くなります。なお、通常、上下の間隔は同じ値にしておくと整然として見やすくなります。

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

こちらも役立つかも?

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

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

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

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

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

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

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