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

ol番号付きリストの数字をキレイにカスタマイズする例を3コ紹介します。

リストタイプの変更については、CSSのクイックリファレンスlist-style-type…マーカー文字の種類を指定するを参考になさってください。

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

※今まで番号リストの続き番号をHTMLに『olの値にstart=””』など書いたことが無い方限定のカスタマイズになります。書いたことがある方は、リストの装飾デザインのみを参考にしてくださいね^^

リストのデザイン

スポンサーリンク

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

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

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

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

olリストの装飾デザイン例:丸

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

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

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

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

olリストの装飾デザイン例:四角

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3番から始めたいとき、HTMLタグ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タグは、下記。

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

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

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

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

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

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

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

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

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

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

すきな食事

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

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

すきな食事

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

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

リンク:未作成

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

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

下記リンクの目次1.4『HTMLタグにclass属性をつける。書きかた例』を参考まで、どうぞ。

LINKHTMLの要素!属性、属性値とは!?class名を複数設定するHTMLの書き方付

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

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

  1. .inline ol li
    • HTMLの親要素のセレクタ『.inline』の子孫『ol li
    • LINKCSS、子セレクタと子孫セレクタの違いの説明
  2. display: inline-block;
  3. margin-right: 1em;
    • 項目の右側に余白1文字分あけるね。

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

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

さいごに

その他リストの作成方法については、後日ガッツリご紹介します。それではカスタマイズを楽しんでくださいね。

かうたっくでした^^

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー