【Cocoon】目次の表示方法とコピペだけ!簡単カスタマイズ

こんな方に読んで欲しい
  • 目次ってどうやって表示するの?
  • 目次の細かい設定がしたい
  • 目次を自分のサイトに合わせてカスタマイズしたい

みぃ
みぃ

目次って記事の中に何が書いてあるか一覧で表示できるってことだよね?設定とか項目をきめるのめんどくさそう・・・

ばう
ばう

超簡単だよ。詳しく説明するね!

1.目次の表示方法

Cocoonでは初期設定で目次が自動的に表示されるようになっています。

みぃ
みぃ

え、でも投稿画面に表示されないよ?

そうなんです、投稿画面には表示されませんが、

プレビュー画面(インターネット上で記事がどう表示されるかを見られる画面)に表示されます。

プレビューは、投稿画面右上のプレビュー新しいタブでプレビューで確認できます。

みぃ
みぃ

でもでも、投稿画面で目次の項目とか決めてないよ?

目次は見出しH2〜H6がそのまま自動的に表示されます。

例えば、

このように見出しを書くと、プレビュー画面に

このように目次が自動的に表示されます。

ばう
ばう

確かに見出しは目次に最適だよね、目次に表示されるということも意識して見出しを書いた方がいいね!

2.プレビューで目次が表示されない場合に確認すること

Cocoonでは初期設定で目次は表示されるようになっていますが、表示するしないを設定で変更できます。

目次が表示されない場合、表示しないに設定しているかもしれないので確認してみましょう。

Cocoon設定Cocoon設定目次を選択します。

この中の先頭にある目次を表示するにチェックが入っていなければチェックをつけて、

一番下にある変更を保存するをクリックして完了です。

ちなみにこの他の項目で目次のタイトルや目次を始めは閉じておく設定、目次ナンバーの表示有無などの設定ができるので、

色々試してみてください。

みぃ
みぃ

目次があるだけでちゃんとしたサイトに見えるね!

ばう
ばう

自分でコードを書くと結構面倒なのでCocoonに感謝しないとね!ありがとー!

3.目次をカスタマイズしよう!

目次が表示されることを確認したらこのままでも十分ですが、せっかくなので自分のサイトに合わせた目次にカスタマイズしてみましょう。

みぃ
みぃ

コードなんて書けません。。

ばう
ばう

大丈夫、先輩方が素敵なコードを書いてくれているからコピペするだけ!

1.目次のコードをコピペしよう!

今回参考とさせていただくのは「Y&K Studio」さんが公開されている目次のコードです。

みぃ
みぃ

素敵な目次を公開してくれてありがとうございます!

コピーする前にご自身のサイトのFont Awesomeのバージョンを確認しましょう。

Cocoon設定>Cocoon設定>全体内の

サイトアイコンフォントが何になっているか確認しておきましょう。

みぃ
みぃ

なんで確認しなきゃいけないの?

ばう
ばう

サイトアイコンフォントのバージョンにより、コピーするコードがかわってくるからだよ。

確認できたら下記リンクからサイト内の指示に従ってコードをコピーします。

2.目次のコードを貼り付けよう!

コピーできたら、

外観>テーマエディター内の

上記キャプチャのあたりに貼り付けます。

ばう
ばう

貼り付けたら保存も忘れずにね!

これで目次のカスタマイズ はできました。

プレビューで確認すると、

このような目次になっていると思います。

みぃ
みぃ

初期のシンプルな目次もいいけどこっちも見やすいね!

見出しの前のフォントや点線が表示されない!

もしプレビューを確認してもフォントや点線が表示されない際は、

目次ナンバーの表示を「表示しない」に設定していないか確認してください。

Cocoon設定>Cocoon設定>目次より

数字(デフォルト)にして保存してからもう一度プレビューを確認してみてください。

3.自分のサイトに合った色などにカスタマイズしよう!

後は自分のサイトのメインの色に変更したり文字サイズなどを調整していきましょう。

参考までに自分がカスタマイズした後のコードを下記に記載しておきます。

ばう
ばう

/* ←○○を変更 */と書いてあるところを変更しているよ!

/* 目次全体デザイン */
.toc{
    background:#F9F9F9;
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center; /* ←目次の位置を真ん中に変更 */
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 20px;
    font-weight: 700;
    color: #778899; /* ←目次の色を変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 20px;
    height: 20px;
    font-family: "Font Awesome 5 Free";
    content : "\f03a"; 
    font-size:18px; /* ←アイコンのサイズを変更 */
    margin-right:5px;
    color:#f5f5f5; /* ←アイコンの色を変更 */
    background-color:#e95295; /* ←アイコンの背景色を変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:10px; /* ←余白を変更 */
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; 
    position: absolute;
    left : 0.5em;
    color: #e95295; /* ←目次の各項目先頭のアイコンの色を変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700;
}
.toc-content .toc-list li li {
    font-weight:normal;
}
/* 目次全体デザイン終わり */

このようにコードを変更すると、

こんな感じになります。

みぃ
みぃ

なんか、、私素敵。

ばう
ばう

はい、以上目次のカスタマイズでした。

目次を見ている人は多いので見やすさを第一に自分のサイトに合った目次を作ってみよう!

コメント

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