Cocoonの目次をカスタマイズ【コピペでスマホでもキマる!】

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

Cocooonは完全レスポンシブ対応の最強の無料テーマですが、スマホで見るときに気にかかっていたことがありました。

それが、目次。

Cocoonの場合、プラグインの追加なしに目次を自動的に表示されるよう設定できます。

「Cocoon設定」を開き、ズラリと並んだタグから「目次」を開くと

かなり細かい設定まで、チェックの入れ外しだけでできちゃいます。

ですが、ナンバー表示を「数字(デフォルト)」に設定し、スマホで見ると

このように、数字がほぼ縦に一直線に並んでしまってH2とH3の判別がわかりづらくなっていました。

なので、今回は目次のデザインごとカスタマイズしちゃいます!

完成形はPC表示だと、こんな感じ。

スマホ表示だと、こんな感じ。

だいぶスッキリしたんじゃないかな。

不安な人
不安な人

また難しいプログラミングとかの知識がいるんじゃないの?

とち
とち

無問題です!不安な人!

ブログ歴2カ月ちょっと、HTMLやCSSの知識もほぼない私でもできました。

【20年4月追記】※その後、本記事のような見出しのデザインに変えました。

さぁレッツ、カスタマイズ!!

とち
とち

私は本記事を書いたあとも、独学(Progate)でHTML・CSSの勉強をしました。デザイン超絶楽しい^_^

プログラミングが分かり始めると、Cocoonのような“育てる”型のテーマは100倍楽しくなります。私のようなアラフォーITさっぱり人間でもできたんで、アナタもできる・ω・

\STAY HOME学習/

Cocoonの目次をカスタマイズ【コピペで簡単!】

Cocoonの目次をカスタマイズ【コピペで簡単!】

Cocoon目次カスタマイズの流れ

大きな流れとしては

  1. Cocoonの目次設定でベースを作る
  2. H2とH3の表示に違いをつける【コピペ!】
  3. 目次の横にアイコンを挿入【コピペ!】
  4. レスポンシブを調整していく

てな感じです。

①Cocoon設定の目次でベースを設定しておく

  • 目次表示の深さ:H3見出しまで
  • 目次ナンバーの表示:数字(デフォルト)

②Ccocoon見出しH2&3の表示に違いをつける【コピペ!】

H2とH3に強弱を持たせるために

  • H3フォントを小さく、薄く
  • H3の前の数字を消して「・」に変更

cssコードは、その都度より、わかりやすい上に作業の手間も少ないので③が終わったあとにまとめて記載します。

\STAY HOME学習/

③Cocoon目次の横にアイコン挿入【コピペ!】

ぶっちゃけ、アイコンはなくてもいいですがアクセントにはなりますね。

当ブログと同じような「ザ・目次」アイコンなら、そのままペーストすればできます。

もっと違ったアイコンにしたいという方はアイコンサイト・Font Awesomeで探してみてください。

cocoonでFont Awesome 5(最新版)が使えるようになりました。cocoon設定→全体→サイトアイコンフォントでFont Awesome 5にチェックを入れればOK。製作者のわいひらさん、やっぱすごい!

②と③をまとめたCSSコードが、こちら!

CSSデザインコードは必ず「子テーマ」のスタイルシート(CSSデザイン)に貼ってください!なぜかはややこしいため割愛!…てかよく知らん。とにかく「こはる(小貼る)」と覚えましょう。

目次CSSコード

/*目次カスタマイズ*/
.toc{
display: block;
padding: 0px;
}
.toc-title{
position: relative;
padding: 10px 0px;
background: #4169e1;/**背景色**/
color: #fff;
font-weight: bold;
}
.toc .toc-content{
padding: 5px 35px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}
.toc-list > li li ::before {
content: ”;
width: 5px;
height: 5px;
display: inline-block;
left: -7px;
/**左の位置**/
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}
.article .toc-list > li li {
list-style: none;
}
/* 目次のアイコン設定 */
.toc-title:before {
top: 0;
left: -45px;
width: 50px;
height: 50px;
font-family:
“Font Awesome 5 Free”;
content : “\f03a”; /*アイコンを変える場合はここを変更 */
font-size:20px;
margin-right:5px;
color:#FFF; /*アイコンの色を変える場合はここを変更 */
}

どうです?できました?

\自宅でWebデザイン学習/

④Cocoon目次をスマホでもチェック!

必ずレスポンシブでスマホの見え方も確認してください。

Cocoonならプレビュー画面下にあるリンク↓から、簡単にチェックできます。

端末によっては、こんな感じに崩れてしまうことがあります。

枠からはみ出しているときは、コードの/**左の位置**/の数値を変えて調整してみてください。

数値を減らすほど、右に寄っていきますので、バシっとはめちゃってください。

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

今回はコピペでできたと思いますが、HTML&CSSだけでもプログラミング知識があればCocoonは100倍楽しくなります(^O^)

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

とち
とち

私はHTML&CSSを独学しましたが、1万回絶望しました(*_*)
コスパ考えたら、プロに学ぶのが速いです。

\STAY HOME学習/

Cocoonの目次をカスタマイズ:まとめ

まとめ

カスタマイズ性も抜群だから、Cocoonって使うごとに楽しくなってきます。

何度も言っているけど、また言っとこ。
←製作者のわいひらさん、ほんと神!

10記事ほどCocoonカスタマイズ記事まとめているんで、よかったらどうぞm(__)m

参考Cocoonカスタマイズ【まとめ】

\STAY HOME学習/

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

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

コメント待ってます!

  1. コメント失礼します。
    当サイトでもこの記事を参考にさせていただきました。ありがとうございます(*^_^*)

    1点CSSの記述にミスがありましたのでお伝えさせていただきます。
    font-family: “Font Awesome 5 Free”;
    という部分ですが
    font-family: “Font Awesome 5 Free”;(誤)
    font-family: “Font Awesome 5 Free”;(正)
    でした。
    クォーテーションが全角表記になっているので、コピペではFont Awesome 5 Free動作しませんでした。口出し申し訳ございません。(T_T)

    • RYUさん
      コメント、ご指摘ありがとうございます!

      コードミス大変失礼しましたm(_ _)mしかも、箇所まで特定してくれるとは助かります。

      今出先なんで帰ったら、訂正しておきます!拙ブログ読んで頂きありがとうございます

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