WordPress+Simplicityのリストマーカーと行間をカスタマイズする

リストは、ulやliなどから構成されている一覧ですが、デフォルトの状態だと間隔が少々狭いです。

また、リスト項目の頭につくマークもなんだか色気がありません。

今回は、リストの行間とマーカーのカスタマイズを行います。

スポンサーリンク

表示サンプル

  • リストの表示サンプルです。
    こんな感じでインデントが一行目に合うようになっています。

    • 入れ子部分です。
      項目>小項目という形にできます。
  • 今回はこんな感じのリストにカスタマイズします。

CSSの編集

例のごとくSimplicityの子テーマのstyle.cssに加筆していきます。

行間の調整

CSSで li { } と入れてしまうと、ナビバーやサイドバー等、ページ上で使用されているリストすべてに影響が及ぶことになるため、記事領域のみとなる .article li { } とします。

margin: 0.5em 0 0.5em 0; でも良いかと思いますが、分かりやすくするため。

行間は数字を調整しながらちょうどいいところを探ってください。

リストマーカーのカスタマイズ

ビジュアルエディタからリストを作成するとき、マークを選べるかと思いますが、今回はその内の「黒丸」が、カスタマイズしたリストマーカーとなるようにします。

というのも、黒丸ではlist-style-typediscが指定されていますが、

  • list-style-typeを指定しないデフォルトで黒丸は出てくる為です。

li::before がマークの部分です。

emは相対的な大きさを表す単位で、1emが1文字分のサイズになります。

マークの幅を1文字分固定にするためinline-blockにし、マージンとか色とか文字とか色々いじってます。

リストマーカーは、 content: ” \この部分 “; のものが表示されます。ここでは、Font Awesome Iconsのウェブフォントを指定しています。

「Font Awesome Icons」から好みのアイコンフォントを探し、そのフォントのUnicodeを指定するのが便利です。

画像の例だと、 content: “\f111”; とすればリストマーカーは画像のような丸になります。

ネストされたリストマーカーのカスタマイズ

いわゆる入れ子、階層構造としたときの2階層目のカスタマイズです。

先ほどと同様にカスタマイズできます。

おわりに

数字を色々いじってみてしっくりくる位置を探ってみてください。

disc circle にすると「白丸」、square にすると「四角」が置き換わり、[ ~ ]部分を削除してstyleを指定しなければデフォルトが置き換わります。

今回は以上です。