ブログ

WordPress(ワードプレス)×”JIN” 番号付きリストの番号変更方法

WordPressをはじめて、JINを購入し1~2記事書いた人に送ります。

いろいろ書き始めると、箇条書きって多用しますよね。

番号付きリスト」を使ってうまく番号が指定できないことがあったので、その解決策を紹介します。

番号付きリストの使い方

番号付きリストとは?

↓これです。

  1. りんご
  2. ゴリラ
  3. ラッパ

ちなみに、番号なしリストは
↓これです

  • りんご
  • ゴリラ
  • ラッパ

WordPressの記事を投稿する画面からは、このボタンを使って使うことができます。

プログラムではこのようになっています。
テキスト表示で確認してみましょう。

<ol>
     <li>りんご</li>
     <li>ゴリラ</li>
     <li>ラッパ</li>
</ol>

 

解説します!

番号付きリストは「ol」は「ordered list」の略。orderdは順序のあるという意味です。
順番のある箇条書きを書く場合に、使用します。

ちなみに、番号無しリストは「ul」は「unordered list」の略。unorderedは、un+orderdなので順序がないという意味です。順番を気にしない箇条書きを書く場合に、使用します。

何のために使うの?

リストを書くために使います。
この「番号付きリスト」を使うことで、勝手に上から採番されていきます。

  1. りんご  ←エンターキーを押すと

  1. りんご
  2.      ←番号が続きます。

リスト状の文章がどんどん書けちゃいますね!

番号を途中から始めるには?

このリストは、連番で採番されていきます。

例えば、

  1. りんご
  2. ゴリラ
  3. ラッパ

の間にそれぞれ画像を入れたい場合に、画像をリストに挟むことでリストが途切れてしまいます。すると、こんな感じに仕上がります。

 <りんごの後に、リンゴの画像や説明を入れた場合の例>

  1. りんご

  
  赤いりんごです。

  1. ゴリラ   ←1からスタート
  2. ラッパ

番号が1から再スタートしてしまいます。

番号付きリストは「start=”数字”」で変更可能

通常の、WordPressでは、「start=”数字”」をつけることで番号の指定が可能です。

<ol>
     <li>りんご</li>
</ol>
<ol start=”1″>
     <li>ゴリラ</li>
     <li>ラッパ</li>
</ol>

出力結果

  1. りんご

  
  赤いりんごです。

  1. ゴリラ     ←2から始まる!
  2. ラッパ

 

 

通常のWordPress(ワードプレス)の場合の解説

通常のWordpressであれば、Startを指定することによって、すでに”1″までは始まっていることを示しすことができます。

この場合、ゴリラは”2″から始まります。

ここまでは、普通のWordPressケースです。

しかし、”JIN”を入れた場合、この方法では変更できません。

JINを使った、番号付きリスト(ol)の番号指定方法

JINの番号付きリストが必ず「1」から始まる理由

JINの番号付きリストが必ず「1」から始まる理由は、テーマに含まれる
プログラムが影響しています。

JINのstyle.cssを見てみると、「counter-reset: li 」の行があります。

cps-post-main ol {
counter-reset: li;
….

「ol」(番号付きリスト)が現れると毎回「li」を0にリセットするという指示です。

この設定をすることによって、数字付きリストの番号を丸囲みにしています。
「counter-reset」の設定は番号のデザインを変える際の方法の1つです。

しかし、この設定により start=”数字” の設定は無視され、
番号付きリストは1から始まるようになってしまったというわけです。。

JINで番号付きリストの番号を変更する方法

JINで番号付きリストの開始番号を指定するには、

<ol>
     <li>りんご</li>
</ol>
<ol style=”counter-reset: li 1”>
     <li>ゴリラ</li>
     <li>ラッパ</li>
</ol>

のように「style=”counter-reset: li 数字”」と表します。(コピペOK!)

JINでの出力結果

出力結果

  1. りんご

  
  赤いりんごです。

  1. ゴリラ  ←JINでも2から始まる!
  2. ラッパ

これでめでたし、解決されました!