数字付きリストを途中から割り振るやり方

タイトルだけ見ても「？」みたいな感じでしょうね。

あらためてご説明しますと、今回ご紹介するのは数字付きリストの数字を”1”以外の数字から始めるやり方です。

どんな時に使うのかって？

それも含めてこのあと詳しくご説明していきます。

数字付きのリストは通常”1”から数字が割り振られます。

たとえばランキング1番目から3番目までを番号付きリスト形式にした場合、こんな感じになります。

（※1番目・2番目・3番目というテキストを全選択→数字付きリストアイコンをクリック）

1. 1番目
2. 2番目
3. 3番目

さてこのあと何らかの文章もしくは画像等をはさんで今度は4番目からのランキング形式で数字付きリストを利用したい場合、つまり数字を”4”から始めたい場合はどうやればいいのでしょう。

これ、普通に数字付きリストで新規に作成すればまた数字は”1”からになってしまいます。

ということでこのやり方をネットで検索すると実はすぐに見つかるんです。

しかもそのやり方はどれもほぼ共通のやり方（スタイルの調整）なので、ある意味普遍的なやり方とも言えます。

しかしながらSIRIUSでそのやり方を実践しようとしてもうまくはいきません。
なぜかといえば、特殊な設定が最初から付いてるからなんですね。

じゃあ無理なのかといえば、そうでもないです。

予め設定されてる数字付きリスト用の”特殊な”スタイルをちょっとだけ変えてあげれば”1”以外の数字からも始められるんです。

しかも数字のあとに”位”（1位）とか”番”（2番）とかも付けられるんです。

数字付きリストアイコンをクリックして作成したリストがあります。

ここで”1番目から3番目までの概要等を説明した文章が挿入”されたと仮定します。

続いてここに”4”から始まる数字付きリストを表示させようとした場合、まずは下のようなスタイルを新規に作成します。

①#main ol.list-4th {
②counter-reset: number 3;
}

さて上記スタイルはどこに書けばいいのか。

本来ならスタイルシートに書き込むのが一番カンタンなんですけど、そうなるとすべてのページでそのスタイルが”無駄に”読み込まれてしまいます。

それを避けるために、そのリストを表示したい【エントリーページ（個別ページ）の設定】→【上級者向け設定】→【スタイル割り込み】内に書き込みます。

#main ol.（クラス名） {
counter-reset: number x;
}

スタイル設定が終わったら、今度は編集画面に書き込んだ4番目・5番目・6番目といったリスト項目を全選択し、数字付きリストアイコンをクリックします。

するととりあえず下のようなコードで整形されます。

ただしこのままだと数字は再び”1”から始まってしまうので『ol』の後ろに先ほど設定しておいた専用のクラス『"list-4th"』を加筆してやります。

その結果、実際の表示がこちら↓です。

数字が4から始まってますでしょ。

さらに7番目・8番目...というリストを新規で作りたい場合は、先ほど設定したスタイルのクラス名と数値だけを変えたスタイルをさらに追加記載してあげれば同じような結果になります。

①#main ol.list-7th {
②counter-reset: number 6;
}

数字付きリストはデフォルトではアタマに数字が連番で付される仕様になってます。

しかしながらたとえば簡易的なランキングリストを作ろうとした時、数字の後ろに”位”（1位,2位...）とか”番人気”（1番人気,2番人気...）とかの文字を自動表示できたらもっとわかりやすくオシャレにアピールできるんじゃないでしょうか。

そのやり方をご紹介します。

コチラが（見慣れた）通常の数字付きリストです。

上記数字の後ろに”位”という漢字を自動添付させてみます。

とりあえず先に完成形をご覧ください。

編集上の記述はコチラ↓。

先ほどと同じく数字付きリストタグ（ol）の後ろに専用のクラスを加筆しただけです。

（今回は『kanji-i』というクラスを付けてみました）

<ol class="kanji-i">
<li>1位の内容</li>
<li>2位の内容</li>
<li>3位の内容</li>
</ol>
</div>

上記クラス『kanji-i』に設定してあるスタイルがコチラ↓です。

#main ol.kanji-i > li {
①padding: 0 0 0 50px;
}
#main ol.kanji-i > li::before {
②content: counter(number,decimal) "位";
③width: 30px;
④height: 26px;
⑤font-size: 16px;
⑥line-height: 25px;
⑦top: 2px;
}

#main ol.kanji-i {
counter-reset: number 4;
}

※すべてコメントアウトした状態なので、必要な箇所のみコメントアウトを解除して有効化した後、修正してください。

#main ol.（クラス名） > li {
/*padding: 0 0 0 50px;*/
}
#main ol.（クラス名） > li::before {
/*content: counter(number,decimal) "位";*/
/*width: 30px;*/
/*height: 26px;*/
/*font-size: 16px;*/
/*line-height: 25px;*/
/*top: 2px;*/
}