詳しいプロフィールはこちら>>>

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

某全国紙新聞社でスポーツ記者として、オリンピックやプロ野球を担当してきた、とちです。真面目にかるく、わかりやすくが執筆信条。現在は編集者として、日々のスポーツ紙の制作をしています。

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数字付き箇条書きコードをコピペ

数字リストは一つあればOK!

最初はひとつあれば十分なので、冒頭に載せた

  1. この青ベースリストの
  2. 作り方だけを
  3. 書いちゃいます

リストの作成にあたっては、ぽんひろさんの記事を参考にさせていただきました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;
 } 
.list-box-3{
    background: #F0FAFF;/* 背景色 */
    border-radius: 0px;
    max-width: 600px;
    padding: 2em 0.5em;
    margin:5 auto;
    margin-left:0.8em;
    border:2px dotted;
    border-color:#0e7ac4;/* 線の色 */
} 
@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)

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

便利プラグイン

「AddQuicktag」というプラグインを使えば、一撃でフォーマットを呼び出すことができて超絶便利です。

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

不安な人
不安な人

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

とち
とち

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

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

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

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

コード見るだけで白目むく人→有料テーマも検討を^_^

Cocoonはユーザーによるカスタマイズを求めるテーマでもありますので、どうしても多少のプログラミング知識が必要になります。

やっぱりコードとかよくわからんし、
もうカスタマイズで萎える…。

って人はWordPress有料テーマを検討してみてはどうでしょう?プログラミング知識がなくても、綺麗なサイト作りが容易になりますヨ。

カスタマイズにかける時間を、記事に費やせばペイできるぐらいの値段ですし・ω・

>>>WordPressおすすめの有料テーマ

ちなみにですが、プログラミングの中でもHTML&CSSの知識があればCocoonはもっと楽しくなります。

今のご時世(コロナ!自粛!)だと、HTML&CSSを身につけるなら全てオンラインで学べるTechAcademy [テックアカデミー]がいいかなと…STAY HOMEですので。

とち
とち

私はHTML&CSSを独学でやりましたが、1万回絶望しました(*_*)
プロに学ぶが吉です。

\STAY HOME学習/

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

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

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

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

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

Cocoonほんと楽しいです。

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

ではでは〜👋

人気記事【2020年最新】アフィリエイトASPおすすめ7社【悩み無用】

人気記事【最新】Audible(オーディブル)おすすめ本30選【目に休息を】

コメント待ってます!

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