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

olのリストマークのデザインをきれいにカスタマイズする方法3コ、リストの続き番号を途中（任意）の番号から始めたい場合CSS、おまけでリストを横並びにするHTMLを紹介します。

番号なしulリストマークのデザインは下記を参考にどうぞ＾＾

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

olのスタイルを見やすくキレイにカスタマイズ！※Gsuh4でも採用のもの

olの番号付きリストのデザインをキレイに見せたいので、リストマークをカスタマイズします。序列ありリストolの項目（リスト）を装飾する前の下地と、その説明をご覧ください。

ol {
	counter-reset: li; /*olのリストの数字をリセット*/
}

ol > li {
	list-style: none; /*元のスタイルを非表示にする*/
}

ol > li:before {
	counter-increment: li; /*リストの数字を1つ進める。IE7以下、未対応*/
	content: counter(li); /*リストを連番にする*/
	margin-right: 1em; /*要素が重なるから右へ移動*/
	line-height: 1.6; /*文字が重なるのを防止*/
}

これが基本のolスタイルになります。

olリストをCSSでカスタマイズ！数字を丸○で囲む。例1：Stingerシリーズ

数字を丸○で囲むカスタマイズです。Gush4でも採用してますけど、別のテーマでカスタマイズしました。例えとしてStingerシリーズ（7：純正フォントサイズ14px）。

※olの前には、テーマの親要素を付けるので.postはテーマによって変更します。元々の記載が強いと優先順位で負けてしまって反映しないからです。

LINKCSSの基本、class・id・子孫セレクタなど！HTMLタグの装飾、セレクタの指定方法と優先順位

.post ol {
	counter-reset: li;
}

.post ol > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
	padding-left: 2.5em; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8em;*//*リストの数字がくっついてしまう場合*/
}

.post ol > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1em;
	background: #ffc0cb; /*薄いピンク*/
	border: 1px solid #ff99ab; /*濃いピンク*/
	color: #ffffff; /*白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3em; /*幅を決めるheightと同じ数値に*/
	height: 1.3em; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: 0em; /*項目の基準、左にあわせる*/
	top: 2px; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.4;/*数字の位置あわせで数値を指定*/
}

上記は丸いリストを作ったものですけど、四角いのが好きならborder-radius: 50%;を削除すれば四角いものが出来上がります。

この場合は横幅widthを変えても面白いかもしれません＾＾

.post を使ってるテーマのものに変更してください。親要素の確認方法は超簡単！ご自身の『テーマのCSS』を確認します。『ol』『ol > li』『ol > li:before』の前に付いているものと同じに変更してくださいね。

例えGush4の場合は、.article-inner ol のように変更します。

スタイルシートで親要素を確認する方法

• Simplicity2の場合は、コンテンツの親要素『.entry-content』をしていしてくださいね＾＾

リストマークのカスタマイズ！ロケット型にしてみる。例2：Stingerのセレクタ

olリストの装飾デザイン例：ロケット型

CSSをちょっと変化することで、可愛いロケット型にも変身できます。

.post ol {
	counter-reset: li;
}

.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 3em; /*li:before分左に余白をli:beforeの横幅widthにあわせて調整*/
	/*margin-bottom: 0.8em;*//*リストがくっついてしまう場合*/
}

.post ol > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1em;
	background: #ffc0cb;
	border: 1px solid #ff99ab;
	color: #ffffff;
	text-align: center;
	width: 2em; /*幅を決める*/
	height: 1.3em;
	position: absolute;
	left: 0em;
	top: 2px;
	line-height: 1.4;
	border-radius: 3px 100% 100% 3px; /*左上 右上 右下　左下の角丸を指定*/ 
}

このように、数値を変えてみたら無限にカスタマイズが広がりそうです。色々さわって、カスタマイズを楽しんでください＾＾

olリストの続き番号、3から始めたいときのHTMLタグ

番号付きリストの間にpタグ段落を使うと、リストが途切れ番号が1から始まりますよね。番号を続けたいとき、任意の番号『3番』から書きだす方法を紹介します。※olリストのスタイルにcounter-reset: liを使っている場合

1. 『3番』から始める
2. 次は自動的に『4番』がくる。

3番から始めたいとき、HTMLタグolを下記のものに変更します。

<ol style="counter-reset: li 2">
 	<li>『3番』から始める</li>
 	<li>次は自動的に『4番』がくる。</li>
</ol>

counter-reset: li; これがリセットなので、値を『li 2』にすることで、3から始められるんですね。今まで序列リストolに、段落を入れた時は序列無しのulに変更してましたけど、これで安心してリストをつかえますね。

※olのスタイルにlist-style-typeを使っている場合は<ol start="2">を指定すれば、2番からスタートします。

Gush4では、<ol style=”counter-reset: li 数字”>で任意の番号をふることが出来る

Gush4では、olのスタイルを上述で説明した記載で使っています。olのliの数字を任意の番号から始めたい場合、HTMLタグ<ol style="counter-reset: li 2">にすることできます。

ただし他の一般的olの属性start=""で指定しても反映しませんので、このカスタマイズをしたら、上述の方法で任意の数字を指定し使ってくださいね。

olの数字をカウントダウンさせるやり方も同様です＾＾

olのリストをカウントダウンさせる方法

ランキングのカウントダウンをさせたいときに、知ってると便利なHTMLタグを紹介します。

1. 『3番』

1. 『2番』

1. 『1番』

HTMLタグは、下記。

<ol style="counter-reset: li 2">
 	<li>『3番』</li>
</ol>
<ol style="counter-reset: li 1">
 	<li>『2番』</li>
</ol>
<ol style="counter-reset: li 0">
 	<li>『1番』</li>
</ol>

このページで紹介したコードの場合、もっとスマートで効率良い方法は、見当たりませんでした…。ですが、これをAddQuicktagに、下記を登録していると序列ありの番号指定したいとき便利なので、登録をおススメします＾＾

counter-increment: li 数字

LINKプラグイン★AddQuicktag★超便利♪設定方法と使い方＆困った時の対処法付き

参考にさせてもらったものを紹介

Gush4のファイルでデザインを参考にしました。テーマが気になるかたは、製作者さんをフォローしてチェックしてくださいね＾＾

説明の補足には、下記リンクをご覧ください。

counter-reset …… 要素の連番（カウンタ）の値をリセットする

counter-increment …… 要素の連番（カウンタ）の値を進める

counter-increment …… 要素の連番（カウンタ）の値を進める

olリストを横に並べる簡単な方法

番号付きのリストを横並びにしたい時の簡単な方法を紹介します。例えば、好きなものリストを作ったけど、縦に長くなってしまうとき便利です＾＾

すきな食事

1. 和食
2. フレンチ
3. アメリカ料理
4. スエーデン料理
5. イタリアン
6. インド料理
7. タイ料理
8. 韓国料理
9. 略…

縦に長すぎ！！って時、改行を必要としないインラインブロックを指定すればOK！元々olやliは改行を必要とするので、それを改行を必要としないものに変更してあげれば良いってわけです。

すきな食事

こんな感じで、縦長感が減少されます。横幅が広いPC画面でみるもっとわかりやすいです。またリストの順番を重視したいときにこれを使うと検索エンジンにも伝わります。その他olやulなどを入れ子にした場合のインライン化は、下記を参考にしてくださいね。

リンク：未作成

ブロックレベルのolリストのli項目をインラインで横並びにするHTMLタグ

改行が必要なブロックレベル『ol li』をインライン化させたい場所に、範囲を指定したいのでdivで囲ってあげます。divにclass名をつけて、『ol li』の親要素を作るってワケです。

タグに合わせてCSSで装飾すれば、横並びになりますよ。まずはタグから＾＾

<div class="inline">
<ol>
 	<li>和食</li>
 	<li>フレンチ</li>
 	<li>アメリカ料理</li>
 	<li>スエーデン料理</li>
 	<li>イタリアン</li>
 	<li>インド料理</li>
 	<li>タイ料理</li>
 	<li>韓国料理</li>
 	<li>略…</li>
</ol>
</div>

olリストの項目をインライン化させて横並びにするCSS

コードと説明は下記のとおりです。

.inline ol li {
	display: inline-block;
	margin-right: 1em;
}

1. .inline ol li
   • HTMLの親要素のセレクタ『.inline』の子孫『ol li』
   • LINKCSS、子セレクタと子孫セレクタの違いの説明
2. display: inline-block;
   • 改行のが必要なブロックレベル要素をインライン化させて表示するね。
3. margin-right: 1em;
   • 項目の右側に余白1文字分あけるね。

これでかなり簡単に、横並びが完成します。画面の横幅が狭いときは、項目ごとに下段に落ちてくれるし、フロート解除しないで済むので、便利ですね。

@okutani_tさんがヒントくれたりして、教えてもらいました＾＾

さいごに

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