WordPressテーマ変更!SimplicityからCocoonへ

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リストマーク

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

.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タグを入れ子にする方法で、スッキリ見やすいブログへ

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

リスト前マークの装飾例

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

リストで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が指定されてないから置き去りになりズレ・はみ出しの原因になります。

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

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

リスト内のリストのズレ修正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のリストにテキストインデント入れたものを抜いた後

/*ulリストビフォー前の位置調整*/
.entry-content ul li  a[href^="https://bibabosi-rizumu.com/"]:before {
    margin-left: 2em;
}

この記載をけしたあと

修正したら正常になる

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

さいごに

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

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

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
スポンサーリンク
カスタマイズ
フォローする
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る