コピペOK♪Cocoonの目次設定&カスタマイズ方法を紹介

Cocoon
  • Cocoonの目次が表示されない?!
  • Cocoonの目次の文字色を変えたい
  • Cocoonの目次の数字の色を変えたい
  • Cocoonの目次に背景を付けたい

デフォルトのままの目次じゃ我慢できないのです(笑)

デフォルトの目次の紹介と、目次のカスタマイズ方法を私の目次を例に紹介していきます。

Cocoonの目次はプラグインが必要ない

cocoonの目次の場所

「Cocoon設定」→「目次」の順にクリックしてください。

ここで目次の設定が出来ます。

目次設定で設定できる項目

  • 目次の表示/非表示
  • 表示ページ/投稿ページや固定ページなど
  • 目次のタイトル
  • 目次の切り替え(目次の開閉を使用するのか)
  • 目次の切り替えの文字
  • 見出しが何個以上ある時に目次を表示させるのか
  • 目次のNOは数字がいいのか
  • 目次の中央表示をするのか
  • 広告がある場合、広告の手前に目次を表示させるのか
  •  h2-h6見出し内のHTMLタグをそのまま出力するのか

設定できる項目が沢山あるように見えるのですが、残念ながらカラーなどを指定する箇所はありません。

Cocconの目次が表示されない?!を解消

cocconの目次の表示チェック

目次の表示の行を見てください。

この「目次を表示する」にチェックが入っていないと目次は表示されません。

チェックが入っているのに目次が表示されない時

cocoonの目次が表示されない時の確認

記事の見出しを確認してください。
ここで指定した数字より少ない場合は目次が表示されません。

Cocoonの目次カスタマイズのコードを張り付ける場所

「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていってください。
この「追加CSS」にコピペしていきます。

Cocoonの目次のカスタマイズのコード

それぞれ自分のカスタマイズしたい場所のコードをコピペしてください。

目次のタイトル

.toc-title { color:#FFF; background-color:#ffdfc4; width:90%; margin:auto; font-weight:bold; }

目次の数字

.toc-list{
color:#ffcda3; }

目次の文字

.toc-list a{
color:#olive; }

目次全体の背景と枠線

.toc-content{ background-color:#fffbf7; }
.article .toc{
width:100%;
border:11px double #ffcda3;
background-color:#fffbf7;
border-radius:6px;}

張り付けコードの中身を説明

コードを1つづつ紹介していきます。
文字はすべて半角です。
もちろん、空白部分も半角にしてください。

color:#FFF;

文字色です。

background-color:#ffdfc4;

背景色です。

width:90%;

横幅です。

margin:auto;

中央揃えに指定しています。

font-weight:bold;

文字を太字にしています。

border:11px double #ffcda3;

枠線の形状と色の指定をしています。

枠線の形状を変えたい時

線の太さの指定の後ろに、半角スペースを開けて指定します。

実線(1本の線)

solid

点線

dotted

破線

dashed

二重線

double

窪んだ感じの線

groove

隆起した感じの線

ridge

コピペOK♪cocconの目次設定&カスタマイズ方法を紹介 まとめ

もし、思ったように表示されない場合は、全角スペースor全角文字が含まれていないか確認してみてください。
コピペで変換されてしまう場合がありますので、気を付けてください。

目次の行にマウスを置いたときの、コードを知りたい方はコメント下さい。
追記します(笑)

\ランキングに参加していますのでクリックしてくださると嬉しいです(^^♪/

人気ブログランキング

この記事書いた人

sora

soraです。
くまさんのノートは副サイトになります。
宜しくお願い致します!

soraをフォローする
Cocoon
シェアしてくださると嬉しいです(^^♪
soraをフォローする
くまさんのノート

コメント

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