Cocoon数字付きリストの作り方【レスポンシブで壊れない！】

WordPressの神テーマ・Cocoonを使ってブログ書いてるんですが、苦労したのが箇条書き(リスト)のカスタマイズです。

箇条書きって文章の大きなアクセントになるので、こだわりたいところ。

記事に箇条書きを作っておくと、ユーザーとって読みやすい文章になることは間違いないです。1記事に1つは挿入したいアクセントです。

なので、こんな数字付きのリストを作りました。

持っておくと
重宝
しまっせ

不安な人

どうせまたhtmlとかcssとか、ややこしいやつでしょ？

とち

無問題（モーマンタイ）です！コピペのみで作れるようにしております〜

だからhtml＆cssやプログラミングの知識がなくてもサクッとできますよ！

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

Cocoon数字付きリストの作り方
1. WordPressデフォルトリストは欠ける
2. 数字なしリストはCocoonアイコンで十分！
Cocoon数字リストのコード
1. 数字リストは1つあればOK！
2. 使用したいところで、またコピペ
Cocoon数字付きリストの作り方【レスポンシブで壊れない！】：まとめ

Cocoon数字付きリストの作り方

WordPress標準で数字リストがあるにはあるけど…。

WordPressデフォルトリストは欠ける

なぜ数字リストを自作しないといけないか、その必要性だけ説明を（1分で読めますが、理由不要の方はすっ飛ばして次項にいっちゃって下さい！）。

WordPressデフォルトのものが、これ

なんか
ちょっと
寂しくね？

数字だと

1.これも
2.かなり
3.寂しい…

さらに気になったのが、スマホで見たとき（画像はレスポンシブテストのもの）。

あまりにモニタの左にビチビチじゃね？と

横にすると

もう欠けちゃってます…。

この箇条書きをCocoonボックスで囲んだときも、

と、ラインにほおずり…なんとも窮屈です。

数字なしリストはCocoonアイコンで十分！

ならば、いっそのこと作ってしまおうと。

数字なしのポチ（・）バージョンは、ただ中点「・」を打てばいいだけですし、「Cocoonブロック」→「アイコンリスト」にいけば、これだけ使えるアイコンがあります。

リストを使わないただの「・」は、SEO的にはあまりよくありません。

なので、欲しかったのは数字付きの箇条書きというわけ。

順序付けしたいとき、おすすめ3点とか挙げたい場合など、使用頻度が高いです。

とち

なんか目次と干渉したり、レイアウトが崩れたりと、2週間ほどの苦闘の末できた代物でごぜえます。

Cocoon数字リストのコード

数字リストは1つあればOK！

リストの作成にあたっては、ぽんひろさんの記事を参考にさせていただきましたm(__)m

では、コードを貼りましょう！

必ずCocoonの子テーマにコードは貼って下さい。
「こはる（子貼る）」と覚えましょう！

WordPress「外観」→「テーマエディター」に以下を貼り付けてください。

/*--------------------------------- 
数字リスト 
--------------------------------*/
 .list-5{
    counter-reset:number; 
    list-style-type: none; 
    padding:0;
    margin:0;
 }
 .list-5 li { 
    position: relative;
    margin:1em auto 1em 10px !important;
    padding-left: 2em;
    padding-top:0.3em
 }
 .list-5 li:before {
    counter-increment: number;
    content: counter(number);
    background-color: #0e7ac4;/* 文字背景色 */
    color: #fff;/*文字色*/
    position: absolute;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    top:0.5em;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
 } 

@media screen and (max-width: 768px){
 .article ul, .article ol {
     padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}

これでcssのコード貼り付けは終了です！

「保存」を押すの、お忘れなく。

使用したいところで、またコピペ

あとは使いたい箇所で「フォーマット」→「カスタムHTML」を選択し、
下のコードを貼り付けてください（※はじめと終わりに入れた【】は除いてコピペを！）。

 【<div class="list-box-3">
 <!-- ここから下にリストを貼り付ける -->
 <ol class="list-5">
   <li>ここにテキストを入力</li>
   <li>ここにテキストを入力</li>
   <li>ここにテキストを入力</li>
 </ol>
 <!-- ここから上にリストを貼り付ける -->
 </div>】

すると…出来上がり〜！