Cocoonの目次は「段落▼」から見出し2～見出し6を記事に使うと自動的に作成されます。
初期の設定でこんな感じになります。
目次があると記事の内容が一目で分かり、長い記事でも見たい項目に簡単にたどり着くことができるため、設置しておくのがいいと思います。
ただし、見出しが多くなると目次だけで幅を取りすぎてしまうこともあるため、閉じておきたい場合もあるでしょう。
今回は、目次の設定と枠線や文字の簡単なカスタマイズ（クラシックエディタ版）を解説します。
目次を閉じて中央に設置
目次のカスタマイズは目次設定の画面で行います。管理画面から下記の順番でクリックしていきましょう。
１．画面左側の「Cocoon設定」をクリック
2.画面上部のタブから「目次」をクリック
3.目次切り替えの「最初から目次内容を表示する」のチェックを外す。目次の中央表示の「目次をメインカラムの中央に表示する」にチェックする
4.画面下部の「変更をまとめて保存」をクリックして完了です。
作業が完了したらサイト表示ページから確認してみましょう。
1記事ごとに閉じる・閉じないを変更することはできませんが、「目次を表示するかしないか」は記事の編集画面の右側「ページ内設定」で切り替えができます。
次の項目では、初期表示の目次を少しカスタマイズする方法を解説していきます。
目次の見た目をカスタマイズ
Cocoon初期設定の目次はシンプルです。サイトに合わせて枠線や文字色などを変えてみましょう。
目次の枠線の幅と色の変更
こちらはCSSの編集になります。
下記のコードをスタイルシートにコピペして、希望のデザインになるよう変更してみてください。
画面下の「ファイルを更新」をクリックすると、デザインの変更が反映されます。
/*目次の枠線*/
.toc {
border: 3px solid #FFB6C1!important;
}
枠線の種類は下記を参考にしてください。
- 直線…solid
- 二重線…double
- 点線…dotted
- 破線…dashed
- 立体線…ridge
目次の文字のサイズ、文字色の変更
下記のコードをスタイルシートにコピペして、希望のデザインになるよう変更してみてください。
.toc-title{
font-weight:bold; /*目次の文字を太字にする*/
color:#66CDAA; /*目次タイトルの色*/
}
.toc a{
color:#008b8b;/*見出しの色*/
}
色のコードは原色大辞典が役立ちます。
変更後は「ファイルを更新」をクリックして反映させてください。
「見出し2」だけを太字にする場合は、下記のコードを追加するとOKです。
.toc-list > li{
font-weight: bold;
}
.toc-list > li li{
font-weight: normal;
}
最後に
目次のちょとしたカスタマイズについて解説してきましたが、いかがでしたでしょうか。
Cocoonでは初期のままでも目次が生成されますが、サイト全体のバランスを見て変更してみるのも以下と思います。
簡単にできるので、読者が見やすいように目次のデザインを見直してみるのもいよいでしょう。
コメント