番号なしリスト – ul 要素 -の CSSカスタマイズ注意点
投稿記事で使用するリストや 目次やグローバルナビなどのリストのカスタマイズにはul という要素を使用します。
Webサイト内では リストを使用するコンテンツが多く
それぞれにCSSカスタマイズを指定した時に 同じコードを使用してしまっていると
画像が崩れてしまったり カスタマイズがうまくいかないケースがあります。
カスタマイズコードの “セレクター"(場所を指定する)コードをうまく使い分けてCSSを指定していきます。
リスト表示の要素
投稿ページでは番号ありのリストと 番号なしのリストがあります。
番号あり リストの要素は " ol " " ul " の部分と置き換えてカスタマイズに使用できます。
番号なしリスト – ul –
サイト全体で表示されるリストのほとんどが ul を使用していて
リストのカスタマイズを " ul " だけで指定したコードでは他のコンテンツにまで影響が出てしまいます。
リストに背景を付けただけのイメージですが、
他のリストとは 別の色で表示させるなど追加でCSSを指定します。
今回は背景色だけのカスタマイズコードですが参考にしてみてください。
1 2 3 4 5 6 7 8 9 |
/*番号なしリストの背景色設定*/
.post ul{
background:#f1f1; } /*目次の背景色修正*/
.toc_list ul { background:#fff; } |
番号なしのリストでは ほかに文字に関する指定はできますが
inline-block
の指定をするとまた 目次の画面が崩れてしまいますのでご注意ください。
リストマークのカスタマイズ
番号なしのリストでは リストマークをカスタマイズすることもできます。
カスタマイズに関してはこちらの記事が参考になります。
箇条書きリストの使い分けと 番号なしのリストマークをカスタマイズ|ルクセリタス