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

とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

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

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

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

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

  1. 持っておくと
  2. 重宝
  3. しまっせ
不安な人
不安な人

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

とち
とち

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

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

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

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

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

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

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

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

  • なんか
  • ちょっと
  • 寂しくね?

数字だと

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

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

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

横にすると

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

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

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

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

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

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

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

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

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

とち
とち

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

Cocoon数字リストのコード

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>】

すると…出来上がり〜!

  1. ここにテキストを入力
  2. ここにテキストを入力
  3. ここにテキストを入力

「ここにテキストを入力」の部分に、テキストを入力してください(そのままやんけw)

ビチビチ感がなくてレスポンシブもいい感じですね。

できたけど、自分のサイトカラーに合わない…、って人はちょっとだけコードをイジってみてください。

不安な人
不安な人

コ、コ、コードヲイジルってか?

とち
とち

大丈夫、不安な人!できます

原色大辞典さんのような色見本サイトから好きな色を選び、貼り付けたcssの /* 線の色 */ の前の「#数字」を変えるだけです。

カラー要素の部分は→/*これは反映されない注意書きの部分だよ。だから何書いてもいいんだよ */このマークで示してあります。

以上で完了です、お疲れ様でした。

コード見るだけで白目むくって人は

できない…。
コードってのを見るだけで頭痛がするんだよ。

Cocoonはユーザーが育てるテーマです。
思い通りに設計するには多少のプログラミング知識が必要になります。

僕から対応策を提案するなら、こちらのいずれか。
①カスタマイズが容易な有料テーマを選ぶ
②プログラミングを学ぶ

もちろん①が簡単ですが、プログラミングがわかるとCocoonは100倍楽しい。
どうせなら②の「学び」に投資した方がいいですよね?

※なんと0円プログラミングスクールがあります。
TechAcademyは1週間の無料体験があります。
無料体験カリキュラムでは『天気予報アプリ』の作成を通じてWebアプリケーションの基礎が学べます。
無料なのでとりあえず試してみるのが良いかなと思います。
»TechAcademyの無料体験はこちら

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

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

いかがでしたでしょうか?

「できねぇぞ!」って方は問い合わせか、ツイッターで知らせてください。

徹底的に謎や疑問を究明します。

Cocoonほんと楽しいです。

製作者のわいひらさんに、止まらない感謝m‥m

ではでは〜!

当ブログで叶えられるCocoonユーザーの願い
【Cocoonカスタマイズ編】
【Cocoonカスタマイズ以外】

ご意見ご感想ぜひ!

タイトルとURLをコピーしました