ルクセリタスで 番号なしリストマークを カスタマイズしてみる
リストは 今から紹介する事柄などを 箇条書きにして分かりやすく表示させる時などに使用しますが
リストには 番号付きのものと 番号なしのリストがあり、それぞれ用途によって使い分けます。
番号なしのリストは デフォルトでは このように 黒丸 ●になっています。
今回は、これをカスタマイズしていきたいと思います。
リストの CSS カスタマイズ
基本の 番号なしのカスタマイズでは ul という属性を使用します。
ul{ から始まるコードで カスタマイズすることができるのですが
当サイトでは、ナビゲーションなどのリストにも影響が出たため
投稿記事にだけ リストのカスタマイズができるように .post ul { を使用しました。
list-style-type: ;
リストマークのタイプを指定するコードが、 list-style-type: ●●; です。
●● の部分を変更していきます。
square (スクエア)の リストマーク
リストマーク( スクエア )と 文字の色・太さを カスタマイズ
1 2 3 4 5 6 7 |
/* リストデザイン*/ .post ul{ list-style-type:square;/*リストマーク スクエア*/ color:#5f9ea0; /*文字色*/ font-weight:bold;/*文字の太さ*/ } |
リストマークに背景を付ける
バックグラウンド(背景)に色を付け 文字をノーマルにカスタマイズ
1 2 3 4 5 6 7 8 |
/* リストデザイン*/ .post ul{ list-style-type:square;/*リストマーク スクエア*/ color:#5f9ea0; /*文字色*/ font-weight:normal;/*文字の太さ*/ background:#f4f4e6;/*背景色*/ } |
文字の幅に合わせて背景の幅を変更する場合、最後の } の前に 下記のコードを追加します。
1 2 3 |
display:inline-block; padding:0.5em 2em 0.5em 2em;/*余白の幅 上 右 下 左*/ |
padding の幅はお好みで調整してください。
ciecle (サークル)の リストマーク
リストマークを サークル( まる )に カスタマイズ
list-style-type: ●●; に Circle
と指定します。
リストマークなしの場合
リストマークを付けない場合は none
と指定します。
この場合、左の余白が多くバランスが悪くなってしまうので padding で調整してあげましょう。
リストマークに囲み枠を付ける
リストマークを囲む場合は border( ボーダー )のコードを追加します。
borderは 線種・幅・色の 3つの項目を指定します。
カンタンな囲み枠の応用
囲み枠は、様々な形にアレンジすることができるので
お好みに合わせて カスタマイズしてみてください。
かんたんなカスタマイズの例をご紹介します。
二重線
ダッシュ
左側にライン
角に丸みを付ける
ほんの少しのカスタマイズで イメージを変えることができますね。
ぜひ、いろいろ試してみてください。