リスト表示の行間を広げたい!

JIMDOには二つのリストスタイルが用意されています。
それは『黒丸』と『数字』です。


文字数が少ないうちは良いのですが、文字数が少し多くなると、行間をあけて読みやすくしたくなりませんか?このページでは、リストの行間を少し広げる方法を解説しています。

JIMDOで用意されているのは以下の二つの標準リスト

黒丸のリストスタイル(もっとも多く使われている標準のスタイルです)

  • リストの行間が狭くてよみずらいと感じている方
  • リスト表示って何ていう方?
  • リスト表示をすると、おかしな表示になってしまうという方

◀ 頭に黒丸が入るリストは通常のリスト表示になります。箇条書きなどの際に利用すれば、自動的に改行してくれて読みやすく整形してくれます。


数字付きのリストスタイル

  1. 左のコードをコピーする
  2. 設定ボタン(歯車のマーク)を押す
  3. ヘッダー部分を編集を選択する
  4. コピーしたコードを貼り付ける
  5. 保存ボタンを押す
  6. ページの再読み込みをする

◀ 数字リストは、手順などを説明したりする時に便利ですよね。途中に追加しても削除しても、自動的にナンバリングしてくれるのが、ありがたいです。


リストの行間を広げる

JIMDOでは、リストがいたるところに使われています。

例えばナビゲーションなどもリストで書かれています。

そのため特定のリストだけに行間指定が出来るようにします。
そうしないとテンプレートに影響が出てしまうからです。

基本設定の手順

  1. 下のコードをコピーする
  2. 設定ボタン(歯車のマーク)を押す
  3. ヘッダー部分を編集を選択する
  4. コピーしたコードを貼り付ける
  5. 保存ボタンを押す
  6. ページの再読み込みをする(F5のボタンを押す)

コピーするコード

<style>

.list1em li{

    margin-bottom:1em;

}

</style>

リスト側の設定方法

黒丸を使ったリストスタイルの行間を広げる

  • 左のコードをコピーする
  • 設定ボタン(歯車のマーク)を押す
  • ヘッダー部分を編集を選択する
  • コピーしたコードを貼り付ける
  • 保存ボタンを押す
  • ページの再読み込みをする(F5のボタンを押す)

行間を約1文字分広げることで、リストごとの文章がずっと読みやすくなりました。

◀ リストが記載されている文章をクリックし、HTML編集から<ul>の部分に[class="list1em"]を以下のように追加しします。

<ul class="list1em">
保存ボタンクリックで反映されます。


黒四角を使ったリストスタイル(square)

  1. 左のコードをコピーする
  2. 設定ボタン(歯車のマーク)を押す
  3. ヘッダー部分を編集を選択する
  4. コピーしたコードを貼り付ける
  5. 保存ボタンを押す
  6. ページの再読み込みをする(F5のボタンを押す)

数字を使ったリストも行間を約1文字分広げることでリストごとの文章がずっと読みやすくなりました。

◀ リストが記載されている文章をクリックし、HTML編集から<ol>の部分に[class="list1em"]を以下のように追加しします。

<ol class="list1em">
保存ボタンクリックで反映されます。


行間の広さを変更したい場合

行間を変えたい時には、1emの数値を変更します。(emとは文字1文字分のサイズです)

0.5emのように小数点も使えますので0.5emとすることで文字半分だけ行間を空けることが出来ます。0.1em ~2emくらいまで、読みやすさを追求して色々と試してみてください。

※ピクセル単位で指定する場合には、1emを16pxなどを置き換えることも可能です。

メルマガに登録していただければ最新記事が届きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422