- Cocoonの目次の文字色を変えたい
- Cocoonの目次の数字の色を変えたい
- Cocoonの目次に背景を付けたい
デフォルトのままの目次じゃ我慢できないのです(笑)
デフォルトの目次の紹介と、目次のカスタマイズ方法を私の目次を例に紹介していきます。
wordpress無料テーマ♪Cocoonの目次設定
「Cocoon設定」→「目次」の順にクリックしてください。
目次設定で設定できる項目
- 目次の表示/非表示
- 表示ページ/投稿ページや固定ページなど
- 目次のタイトル
- 目次の切り替え（目次の開閉を使用するのか）
- 目次の切り替えの文字
- 見出しが何個以上ある時に目次を表示させるのか
- 目次のNOは数字がいいのか
- 目次の中央表示をするのか
- 広告がある場合、広告の手前に目次を表示させるのか
- h2-h6見出し内のHTMLタグをそのまま出力するのか
設定できる項目が沢山あるように見えるのですが、残念ながらカラーなどを指定する箇所はありません。
wordpress無料テーマ♪Cocoonの目次カスタマイズのコードを張り付ける場所
「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていってください。
この「追加CSS」にコピペしていきます。
wordpress無料テーマ♪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, .blogcard{
weight: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;
枠線の形状と色の指定をしています。
枠線の形状を変えたい時
線の太さの指定の後ろに、半角スペースを開けて指定します。
実線（１本の線）
solid
点線
dotted
破線
dashed
二重線
double
窪んだ感じの線
groove
隆起した感じの線
ridge
コピペOK♪wordpress無料テーマCocoon♪目次設定＆カスタマイズ方法を紹介 まとめ
もし、思ったように表示されない場合は、全角スペースor全角文字が含まれていないか確認してみてください。
コピペで変換されてしまう場合がありますので、気を付けてください。
目次の行にマウスを置いたときの、指示を指定しようか迷ってます。
知りたい方がいたらコメント下さい。
追記します(笑)
コメント