CSSで番号なしulリストマークのカスタマイズ!※子要素がズレる・はみ出す原因text-indentは入れちゃダメ

シェアする

番号なしulリストマーク、WordPressテーマのカスタマイズ・Simplicity2・Stingerシリーズの例番号なしulリスト前li:beforeマークの数字をCSSでスタイルをキレいに見やすく装飾するカスタマイズです。

リストの装飾にtext-indentを使ったカスタマイズを使っていたら子要素がズレて、毎回CSSで修正が必要だったので面倒でした。カナリ…例えば下記リスト内のもの。

  • 親リスト
    1. 子リスト内番号リスト、ズレてはみ出す
  • 親リストの子。以下もズレたり、はみ出したり。。
    • 子リスト内、キャプション
    • 引用
    • その他この階層以下リスト内タグ

リストなど親要素になるものには、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リストマーク

番号なしリストを見やすく、キレいなスタイルに変更する基本のスタイルになります。

CSSのスタイルの説明が必要な場合は、番号リストolの装飾と同じですので、style横に書いている説明をチェックしてくださいね。

LINKol番号付きリストのカスタマイズ!デザインをきれいに変更する方法。リストの数字を任意の番号3から始めたい時のCSS

リスト内にリストを作ると文がスッキリして見やすくなります。HTMLの書きかたは、下記を参考にどうぞ^^

LINK箇条書きulとol!liタグを入れ子にする方法で、スッキリ見やすいブログへ

更にリスト内のリストマークを変更したい場合は、下記を参考にどうぞ。

リスト前マークの装飾例

LINK番号なしulリストを記号・マーク・画像で装飾!CSS初心者が応用できるカスタマイズ説明あり

リストでtext-indentを使うと、ズレてはみ出す、ダメなCSSコード

text-indentを使えば、リストの装飾は簡単でキレいにできますが、リストを入れ子にして親子にする事で、子がすべてズレてエリアからはみ出す原因になります。

装飾例と、ズレたモノを修正するCSSを紹介します。面倒なので、上記のカスタマイズに変更した方が、後々困らないのでオススメです。

リストでtext-indentを使うと、リスト内がズレてはみ出す原因

原因はtext-indentの性質です。

指定した数字:値だけ左右に押しやってズラすことで、キレいに行の頭を揃えることができます。その性質はリスト内のリストにも反映するのは、CSSでリストをtext-indentで装飾しているから。

リスト内に、別のHTMLタグでマークアップされている画像<img>キャプション<div class=”wp-caption-text”>引用<blockquote>など、text-indentが指定されてないから置き去りになりズレ・はみ出しの原因になります。

修正するにはどうすれば良いか気になるかたは、初心者向けに書いたものをチェックしてくださいね。

LINKCSS初心者へ❦スタイルの不具合ってどうやって直すの?その工程、見てみよぉ!

リスト内のリストのズレ修正CSS

リスト内に入れた番号リストもズレる

テキストインデントが入っているので、それを初期化するCSSを追加する

CSS追加で正常になったリスト内olリスト

リストに入れたキャプション画像・テキストがズレ、はみ出す・修正のCSS

リスト内キャプションのズレ

画像と画像のテキストは、HTMLでマークアップされてるから、テキストインデントは反映せず元の位置のままだからズレて、はみ出す。

CSSで修正するコード

修正すれば反映する

引用を入れたら、引用がズレた。CSSで修正

リスト内子要素、引用がズレる

CSSで修正する

CSS修正後、リスト内に収まった引用

その他リスト内リストに入れた装飾のズレを修正するCSS

ulのリストにテキストインデント入れたものを抜いた後

ulのリストにテキストインデント入れたものを抜いた後



この記載をけしたあと

修正したら正常になる

テキストインデントを抜いた上記のカスタマイズしたら、修正がいらないからオススメ!

さいごに

リストに限らず、タグ内にHTMLタグを挿入する可能性のあるものには、テキストインデントを使うと、その都度修正が必要になる。と言うことを分かって頂けたらと思います^^

入れ子に出来るdivなどにtext-indentをしていすると、すべて修正が必要になるので、注意してくださいね。

それでは、かうたっくでした!

スポンサーリンクと関連記事

関連記事(広告含む時あり)

シェアする

フォローする

  • Follow Me →
スポンサーリンク
トップへ戻る