【Stingerplus】コピペで出来る！CSSでリストデザインのカスタマイズ！

2016/10/01 2017/03/30

wordpress

title

こんにちは。ゆすこです(@shufication)です。
項目が多いとき、数字で1.2.3...と記述することは多いと思います。
しかし、
何の装飾もない数字で、

1.hoge
2.hoge
3.hoge

と書いても味気なく、見づらさが生じてしまいます。

装飾すればいい！とは言っても毎度一つ一つhtmlで書くのは面倒です。
そこで、数字を自動でインクリメントするようにしてみました。
完成系はこうなります。

hoge

見やすくなりましたか？^^

今回もコピペのみで出来ます。
親、もしくは子テーマのstyle.cssに追記してください。
バックアップ必ず！各自の責任でお願い致します。

1 コピペ用ソースはこちら！
2 記事で使用するときはこんな感じ！
- 2.1 実際に記事に書いてみる
- 2.2 ソースはこちら！
3 まとめ

コピペ用ソースはこちら！

以下がスタイルシートに追記するソースです。

.numorder {
position:relative;
margin-left:40px;
padding:10px 3px 10px;
margin-top:10px;
font-size:24px;
font-weight:bold;
}
.numorder:before {
counter-increment:number;
content:counter(number);
position:absolute;
top:0;
left:-52px;
padding:3px 10px;
background:#4096ee;
border:solid 2px #4096ee;
color:#fff;
font-weight: bold;
border-radius:5px;
}

.numorder {

position:relative;

margin-left:40px;

padding:10px 3px 10px;

margin-top:10px;

font-size:24px;

font-weight:bold;

}

.numorder:before {

counter-increment:number;

content:counter(number);

position:absolute;

top:0;

left:-52px;

padding:3px 10px;

background:#4096ee;

border:solid 2px #4096ee;

color:#fff;

font-weight: bold;

border-radius:5px;

}

記事で使用するときはこんな感じ！

htmlを使う場合はこのように記述してください。

<section>
<div class="numorder"></div>
</section>

</section>

数字を増やしたい場合はdiv classで追加すると良いです。

実際に記事に書いてみる

4項目をリスト化した例です。
先ほどページ頭でも書きましたが念のため。
全部hogeですみません。笑

hoge

hogehoge

hoge

hogehoge

hoge

hogehoge

hoge

hogehoge

ソースはこちら！

先ほどの1例は、htmlでこのように書いています。

<section>
<div class="numorder">hoge</div>
hogehoge
<div class="numorder">hoge</div>
hogehoge
<div class="numorder">hoge</div>
hogehoge
<div class="numorder">hoge</div>
hogehoge
</section>