番号なしリスト – ul 要素 -の CSSカスタマイズ注意点

投稿記事で使用するリストや目次やグローバルナビなどのリストのカスタマイズにはul という要素を使用します。

Webサイト内ではリストを使用するコンテンツが多く
それぞれにCSSカスタマイズを指定した時に同じコードを使用してしまっていると
画像が崩れてしまったりカスタマイズがうまくいかないケースがあります。

カスタマイズコードの “セレクター"（場所を指定する）コードをうまく使い分けてCSSを指定していきます。

Contents - 目次 -

リスト表示の要素

投稿ページでは番号ありのリストと番号なしのリストがあります。

番号ありリストの要素は " ol " " ul " の部分と置き換えてカスタマイズに使用できます。

サイト全体で表示されるリストのほとんどが ul を使用していて
リストのカスタマイズを " ul " だけで指定したコードでは他のコンテンツにまで影響が出てしまいます。

リストに背景を付けただけのイメージですが、
他のリストとは別の色で表示させるなど追加でCSSを指定します。

今回は背景色だけのカスタマイズコードですが参考にしてみてください。

/*番号なしリストの背景色設定*/ 
.post ul{
 background:#f1f1;
}
/*目次の背景色修正*/ 
.toc_list ul {
background:#fff;
}

/*番号なしリストの背景色設定*/

.post ul{

background:#f1f1;

}

/*目次の背景色修正*/

.toc_list ul {

background:#fff;

}

番号なしのリストではほかに文字に関する指定はできますが
inline-block の指定をするとまた目次の画面が崩れてしまいますのでご注意ください。

番号なしのリストではリストマークをカスタマイズすることもできます。

Posted by 45