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

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

それが、目次。

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

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

細かい設定まで、チェックの入れ外しでできます。

ただナンバー表示を「数字（デフォルト）」に設定し、スマホで見ると

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

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

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

スマホ表示だと、こう。

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

不安な人

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

とち

無問題です！不安な人！

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

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

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

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

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

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

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

大きな流れとしては

てな感じです。

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

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

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

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

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

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

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

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

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

②と③をまとめた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; /*アイコンの色を変える場合はここを変更 */
 }

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

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

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

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

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

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

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

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

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

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

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

目次は、せっかちなネットユーザーの特性上、大事なパーツです。

しっかり整えて、ユーザビリティ、上げていきましょう。

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

Cocoonをごりごりカスタマイズした記事、まとめていますので、よろしければどうぞ。

【目的別】Cocoonカスタマイズ15選【初心者でも簡単！】

WordPressテーマ・Cocoonでブログ運営すること1年…都度行ってきたカスタマイズ記事がたまってきたので、Cocoon初心者ユーザーの方へ向けて目的別にまとめました。トップページをサイト型にしたい、サイドバーの表示を変えたいなど、要望別に詳細ページへと飛べます。Cocoonユーザーの方、是非、ご活用ください。

to-chi.org

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

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

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