<>

ルクセリタスで 番号なしリストマークを カスタマイズしてみる

リストは 今から紹介する事柄などを 箇条書きにして分かりやすく表示させる時などに使用しますが
リストには 番号付きのものと 番号なしのリストがあり、それぞれ用途によって使い分けます。

番号なしのリストは デフォルトでは このように 黒丸 ●になっています。
番号なしリスト画像 - デフォルトのリストマークは黒丸 -disc-
今回は、これをカスタマイズしていきたいと思います。

リストの CSS カスタマイズ

基本の 番号なしのカスタマイズでは ul という属性を使用します。

ul{ から始まるコードで カスタマイズすることができるのですが
当サイトでは、ナビゲーションなどのリストにも影響が出たため
投稿記事にだけ リストのカスタマイズができるように .post ul { を使用しました。

list-style-type: ;

リストマークのタイプを指定するコードが、 list-style-type: ●●; です。
●● の部分を変更していきます。

square (スクエア)の リストマーク

番号なしリスト - リストマーク suqare のイメージ画像
リストマーク( スクエア )と 文字の色・太さを カスタマイズ

リストマークに背景を付ける

リストマーク に背景色を指定したイメージ画像

バックグラウンド(背景)に色を付け 文字をノーマルにカスタマイズ

文字の幅に合わせて背景の幅を変更する場合、最後の } の前に 下記のコードを追加します。

padding の幅はお好みで調整してください。

ciecle (サークル)の リストマーク

番号なしリスト - リストマーク circle のイメージ画像
リストマークを サークル( まる )に カスタマイズ
list-style-type: ●●; Circleと指定します。

 リストマークなしの場合

リストマークを付けない場合のイメージ画像
リストマークを付けない場合は none と指定します。
この場合、左の余白が多くバランスが悪くなってしまうので  padding で調整してあげましょう。

 リストマークに囲み枠を付ける

リストに囲み枠を付けた場合のイメージ画像
リストマークを囲む場合は border( ボーダー )のコードを追加します。
borderは 線種・幅・色の 3つの項目を指定します。

カンタンな囲み枠の応用

囲み枠は、様々な形にアレンジすることができるので
お好みに合わせて カスタマイズしてみてください。

かんたんなカスタマイズの例をご紹介します。

二重線

囲み枠の応用 - 線種を二重線に- border:double 5px #c1e4e9;

ダッシュ

囲み枠の応用 - 線種を破線に- border:dashed 8px #c1e4e9;

左側にライン

囲み枠の応用 - 線種を左に縦ラインborder-left:solid 8px #c1e4e9;

角に丸みを付ける

囲み枠の応用 - 囲み枠の角を丸く-border-radias:15px;

ほんの少しのカスタマイズで イメージを変えることができますね。

ぜひ、いろいろ試してみてください。