番号なしulリスト前li:beforeマークの数字をCSSでスタイルをキレいに見やすく装飾するカスタマイズです。
リストの装飾にtext-indentを使ったカスタマイズを使っていたら子要素がズレて、毎回CSSで修正が必要だったので面倒でした。カナリ…例えば下記リスト内のもの。
- 親リスト
- 子リスト内番号リスト、ズレてはみ出す
- 親リストの子。以下もズレたり、はみ出したり。。
- 子リスト内、キャプション
- 引用
- その他この階層以下リスト内タグ
リストなど親要素になるものには、text-indentは入れちゃダメです＞＜ ただ使っている人もいるので修正方法も紹介します。
リストを見やすくする番号なしリストul li:beforeは、メンテナンスが要らないスタイルに変更したCSSをチェックしてくださいね！
番号なしリスト前マークをキレイにカスタマイズするCSS
書いたコンテンツのみのulリスト前マークをカスタマイズする方法なので、コンテンツを囲う親要素を紹介する下記CSSの、ulの前に指定してください。.entry-contentは、SimplicityやデフォルトのTwentyシリーズの親要素です。
Stingerシリーズは.postに変更してください。SNSボタンなどのリストまで装飾されるなら、その項目のみCSSの初期化が必要です。よくわからない場合は、コンテンツ部分のみ<div class=”entry-content”>で囲めば初心者さんも簡単にカスタマイズが可能です！
LINKWordPressでコンテンツのみの親要素を作る！カスタマイズした装飾を本文以外、反映させない方法
ulリストのカスタマイズ、CSSのコード
Simplicity2のデフォルトに装飾した番号なしulリストマーク
番号なしリストを見やすく、キレいなスタイルに変更する基本のスタイルになります。
.entry-content ul {
list-style: none;
margin-bottom: 1.5em;
}
.entry-content ul li {
position: relative;
padding-left: 0.9em;
margin: 0.8em 0;
}
.entry-content ul > li:before {
content: "\f00c";
font-family: FontAwesome;
color: #ffffff;
background: #f1afff;
border: 1px solid #eb8dff;
border-radius: 50%;
text-align: center;
margin-right: 0.4em;
width: 1.3em;
height: 1.3em;
position: absolute;
left: -15px;
top: 3px;
line-height: 1.4;
}
.entry-content ul li ul {
margin: 0 0.4em 0 -1.2em;
}
/* toc */
#toc_container .toc_list li:before {
content: none;
}
CSSのスタイルの説明が必要な場合は、番号リストolの装飾と同じですので、style横に書いている説明をチェックしてくださいね。
LINKol番号付きリストのカスタマイズ！デザインをきれいに変更する方法。リストの数字を任意の番号3から始めたい時のCSS
リスト内にリストを作ると文がスッキリして見やすくなります。HTMLの書きかたは、下記を参考にどうぞ＾＾
LINK箇条書きulとol！liタグを入れ子にする方法で、スッキリ見やすいブログへ
リストでtext-indentを使うと、ズレてはみ出す、ダメなCSSコード
text-indentを使えば、リストの装飾は簡単でキレいにできますが、リストを入れ子にして親子にする事で、子がすべてズレてエリアからはみ出す原因になります。
装飾例と、ズレたモノを修正するCSSを紹介します。面倒なので、上記のカスタマイズに変更した方が、後々困らないのでオススメです。
ul {
list-style: none;
}
.entry-content ul {
margin-bottom: 24px;
}
.entry-content ul li {
text-indent: -1.4em;
padding-left: 1.4em;
line-height: 1.8;
}
.entry-content ul li li,
.entry-content ol li li {
margin-left: -2.2em;
}
.entry-content ul > li:before {
content: "\f00c";
font-family: FontAwesome;
color: #CA5EF5;
margin-right: 0.4em;
}
.entry-content ul > li > ul > li:last-child {
margin-bottom: 1.5em;
}
/* 上下マージン */
.entry-content ul li,
.entry-content ol li {
margin: 0.8em 0;
}
リストでtext-indentを使うと、リスト内がズレてはみ出す原因
原因はtext-indentの性質です。
指定した数字：値だけ左右に押しやってズラすことで、キレいに行の頭を揃えることができます。その性質はリスト内のリストにも反映するのは、CSSでリストをtext-indentで装飾しているから。
リスト内に、別のHTMLタグでマークアップされている画像<img>・キャプション<div class=”wp-caption-text”>・引用<blockquote>など、text-indentが指定されてないから置き去りになりズレ・はみ出しの原因になります。
修正するにはどうすれば良いか気になるかたは、初心者向けに書いたものをチェックしてくださいね。
リスト内のリストのズレ修正CSS
リスト内に入れた番号リストもズレる
テキストインデントが入っているので、それを初期化するCSSを追加する
.entry-content ul li ol li {
text-indent: 0;
}
CSS追加で正常になったリスト内olリスト
リストに入れたキャプション画像・テキストがズレ、はみ出す・修正のCSS
リスト内キャプションのズレ
画像と画像のテキストは、HTMLでマークアップされてるから、テキストインデントは反映せず元の位置のままだからズレて、はみ出す。
CSSで修正するコード
/* ul li の中のズレ解消 */
.entry-content ul li .wp-caption img,
ul li .wp-caption-text {
margin-left: 1.4em;
}
修正すれば反映する
引用を入れたら、引用がズレた。CSSで修正
リスト内子要素、引用がズレる
CSSで修正する
.entry-content ul li blockquote {
text-indent: 0;
}
CSS修正後、リスト内に収まった引用
その他リスト内リストに入れた装飾のズレを修正するCSS
ulのリストにテキストインデント入れたものを抜いた後
/*ulリストビフォー前の位置調整*/
.entry-content ul li a[href^="https://bibabosi-rizumu.com/"]:before {
margin-left: 2em;
}
この記載をけしたあと
修正したら正常になる
テキストインデントを抜いた上記のカスタマイズしたら、修正がいらないからオススメ！
さいごに
リストに限らず、タグ内にHTMLタグを挿入する可能性のあるものには、テキストインデントを使うと、その都度修正が必要になる。と言うことを分かって頂けたらと思います＾＾
入れ子に出来るdivなどにtext-indentをしていすると、すべて修正が必要になるので、注意してくださいね。
それでは、かうたっくでした！
Comments