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

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

番号なしのリストは デフォルトでは　このように 黒丸 ●になっています。

今回は、これをカスタマイズしていきたいと思います。

リストの CSS カスタマイズ

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

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

list-style-type: ;

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

square （スクエア）の リストマーク

リストマーク（ スクエア ）と 文字の色・太さを カスタマイズ

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

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

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

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

ciecle （サークル）の リストマーク

リストマークを サークル（ まる ）に カスタマイズ
list-style-type: ●●; に Circleと指定します。

 リストマークなしの場合

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

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

リストマークを囲む場合は border（ ボーダー ）のコードを追加します。
borderは 線種・幅・色の 3つの項目を指定します。

カンタンな囲み枠の応用

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

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

二重線

ダッシュ

左側にライン

角に丸みを付ける

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

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