WordPressで箇条書き(リスト)の間隔を広くする方法

WordPressで箇条書き(リスト)の間隔を広くする方法

WordPressでは、リストという機能があります。

この機能を利用することで簡単に箇条書きのようなデザインにすることができます。

しかしながら、デフォルトでは少し文字と文字の間隔(高さ)が狭いような気がします。(テーマにもよりますが)

さらには、文字のサイズを大きくすると余計に間隔が狭まいのが目立ってしまいます。

そこで、今回はリストの間隔を広くする方法をご紹介します。




完成イメージ

完成イメージ

まずは、今回の完成イメージを見てください。

編集前(フォントサイズ16px)

  • リスト1
  • リスト2
  • リスト3

編集後(フォントサイズ16px)

  • リスト1
  • リスト2
  • リスト3

編集前(フォントサイズ28px)

  • リスト1
  • リスト2
  • リスト3

編集後(フォントサイズ28px)

  • リスト1
  • リスト2
  • リスト3

見てわかるように、編集前は文字の間がきっちりと詰まってしまっていますが編集後は文字の間に余白ができています。

この余白の大きさは自由に変えることができますので、自身のサイトに適したサイズにしましょう。

箇条書き(リスト)の間隔を広げる

箇条書き(リスト)の間隔を広げる

では、実際にリストの間隔を広くしていきます。

方法はいくつかありますが、すべてCSSでデザインの編集を行います。

 line-height

line-hight」を使用します。

line-hightは、行の高さを指定することができます。

※マイナスの値は指定できません。

使用方法

WordPressのテキストモードで<ul>タグに「style=”line-hight:〇〇px;”(〇〇は数字)」を追記します。

使用例

注意

リストに背景を設定している場合は、

  • リスト1
  • リスト2
  • リスト3

このように背景の間隔は開きません

padding

padding」は、領域内のスペースを指定します。

line-hightと少し似たデザインになりますがpaddingは左右の値も指定できます。

使用方法

WordPressのテキストモードで<li>タグに「style=”padding:〇〇px 0;”(〇〇は数字)」を追記します。

0」の部分は左右の間隔です。今回は使用しませんので「0」にします。

使用例

注意

paddingもline-heightと同様に背景を指定している場合は、背景の間隔は開きません

  • リスト1
  • リスト2
  • リスト3

margin

margin」は、領域間のスペースを指定できます。

<li>タグ同士の間隔を指定できます。

使用方法

注意

marginは、line-heightとpaddingとは違い背景の間隔を広げることができます

  • リスト1
  • リスト2
  • リスト3

style.cssにCSSを追加しよう

style.cssにCSSを追加しよう

上記の例では、WordPressのテキストモードで直接HTMLにCSSを指定する方法でご紹介しました。

しかしながら、毎回毎回、直接HTMLにCSSを指定していては相当な手間がかかってしまいます。

特に、「padding」「margin」に至ってはすべての<li>タグに指定する必要があるのでとても面倒です。

そこで、「style.css」というファイルに書いておくことでCSSによる指定を楽にすることができます。

操作方法

では、「margin」を例に紹介します。

テーマの編集

まずは、WordPressの「ダッシュボード」を開き、「外観」→「テーマの編集」を選択してください。

スタイルシート(style.css)

右のほうに「ファイル一覧」がありますので「スタイルシート(style.css)」を選択してください。

表示されたエディタの最後に上記を追加して「ファイルを更新」ボタンを押してください。

li-mUB5」の部分は任意で指定できますので自身のわかりやすいものにしてください。

その際に先頭の「.(ドット)」を忘れないようにしましょう。

あとは、適応したいリストの<ul>タグに以上のように追加すればOKです。

この方法は、あとで一括で変更したいときにとても便利なので、できる限りこの方法で行うようにしましょう。

まとめ

WordPressで「リストの間隔を広くする方法」をご紹介しました。

基本的には「line-height」を使用すれば大丈夫ですが、凝ったデザインにしたい場合は「padding」や「margin」を使用してみましょう。

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク




コメント

  1. nekomi より:

    読者様の指摘によりミスに気づきました。
    最後の

    の部分を修正しました。