シンプルでスタイリッシュなWordPress無料テーマ

ナンバーリスト(ol)の設定

2019.03.122018.06.27カスタマイザー
laptop-in-a-dark-room

ナンバーリスト(ol)

「ナンバーリスト(ol)」には以下の設定項目があります。

  • ol タイプ
  • 数字マークを太字にする
  • 数字マークのボーダーを太字にする
  • 数字マーク色
  • 数字マークの背景色
  • 数字マークのボーダー色

文章の手前に数字が付くタイプのリストです。

olタグはデザインを特に加えないと以下のように表示されます。

  1. あいうえお・かきくけこ
  2. さしすせそ・たちつてと
  3. なにぬねの・はひふへほ

これだとあまりにそっけないので、当テーマではデザインを設定できるようにしました。実際のものは以下のようになります。

  1. あいうえお・かきくけこ
  2. さしすせそ・たちつてと
  3. なにぬねの・はひふへほ

順序立てて説明する際に重宝するデザインです。

ol タイプ

ol-design

「スクウェア」と「サークル」の2つから選択できます。

数字マークを太字にする

ol_decimal-bold

数字マークを太字にできます。

数字マークのボーダーを太字にする

ol_decimal-border-bold

数字マークのボーダーを太字にできます。

数字マーク色

ol-with-light-blue-numbers
数字を水色にした例

数字マークの色を設定できます。

数字マークの背景色

ol-with-blue-background
背景色を青色にした例

数字マークの背景色を設定できます。

数字マークのボーダー色

ol-with-white-background-and-black-border
背景を白くして、ボーダーを黒くした例

数字マークの背景色を設定できます。マークとボーダーの色を黒くして、背景を白くすると上のようなデザインが出来上がります。

ol-with-a-border

また当テーマのデザインのひとつであるボーダーで囲むと以上のようになります。

ボーダーの説明はこちらからどうぞ。

author

\ 広告エリア /
rectangle-ad
rectangle-ad
Post image for Facebook Like