Cocoonカスタマイズ まとめ記事公開中

【Cocoon】コピペだけでWordPressの目次を可愛くカスタマイズ!

WordPress
疑問くん
疑問くん

・Cocoonのデフォルトの目次がシンプルすぎる
・おしゃれに可愛い目次は作れないかな?

そんな方に是非読んで欲しい!

今回は、有料WordPressテーマである「SANGO」が目次を作る際に使用しているプラグイン「Table Of Contents Plus(TOC+)」風に目次を表示させるカスタマイズ方法をご紹介します。

コピペするだけでできるので、HTML、CSSの知識は一切要りませんよ!

【2019年11月17日追記】Font Awesome5に対応しております。

完成イメージ

今回、カスタマイズした目次は以下の通りです。

上に表示されているので、必要ないかもしれませんが(笑)

カスタマイズ方法

手順は以下の通り。

カスタマイズ手順
  • STEP1
    CSSをコピー & ペースト
    外観 > テーマエディター > style.cssにペーストします

STEP1 : CSSをコピー & ペースト

Font Awesome 4を使用している人は以下のコードをコピーしてください!

ペーストする場所は、「外観 > テーマエディター > style.css(子テーマ)」。もしくは、「外観 > カスタマイズ > 追加CSS」のどちらでもOKです。
/* 目次全体デザイン */
.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:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.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: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

Font Awesome 5を使用している人は以下のコードをコピーしてください!

/* 目次全体デザイン */
.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:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.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; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.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: #FFC679; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

これで、目次の表示が恐らく私のブログと同じものが表示されていると思います。

色の変更はコメントに記載している場所を修正して貰えば変えることができます。
色のコードが分からない方は以下のリンクなどでお調べください。

導入済みのブログをサイト紹介させて頂きたいと思います!

「この記事を見て、自身のブログの目次をカスタマイズしたよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

★193万円受給しながら転職可能★
「MamaEdu」プロジェクトは、Web・ITの専門スキルを持ち、活き活きと働く女性を増やしていくことを目的とした活動!

自立支援教育訓練給付金や高等職業訓練促進給付金のフォローを受けることができるため、最大193万円の給付金を貰いながら転職活動が可能です!
この記事を書いた人

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

\Y&K Studio のフォローはこちら/
WordPress
スポンサーリンク
\ SHARE BUTTONS /

コメント

  1. […] 【Cocoon】コピペで目次をSANGO風にカスタマイズ!Cocoonのデフォルトの目次も素敵ではあるのですが、カスタマイズはしたくなるものです。私は先日とあるWordPress勉強会でSANGOを使ってるみ […]

  2. 綺麗な目次だったので使わせて頂きました。設定も5分以内で終わりました。設定後は素敵な目次で読みやすくこれで回遊率は滞在時間が改善されればと思います。ありがとうございました。

    • 通りすがりサイト編集者さん
      弊ブログの記事が役にたったようで何よりです!

  3. […] 僕はCSSを書けませんのでY&K Studioさんの【Cocoon】コピペで目次をSANGO風にカスタマイズ!の記事へ飛んでください。 […]

  4. […] 【Cocoon】コピペで目次をSANGO風にカスタマイズ!こんにちは!自称CocoonカスタマイザーのYoshitaka( @yandkstudio_y )です。Cocoonのデフォルトの目次も素敵ではあるのですが、カスタマイズは […]

  5. […] 【Cocoon】コピペで目次をSANGO風にカスタマイズ!こんにちは!自称CocoonカスタマイザーのYoshitaka( @yandkstudio_y )です。Cocoonのデフォルトの目次も素敵ではあるのですが、カスタマイズは […]

  6. […] 【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!無料WordPressテーマ「Cocoon」の目次は非常にシンプル!有料テーマ「SANGO」っぽく可愛いデザインにカスタマイズする方法をご […]

  7. Yoshitakaさま

     はじめまして。Cocoonでブログ運営を始めたばかりのサントンと申します。ステキなブログですね。

     さて、「【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!」という記事を拝見しました。私もSANGOの雰囲気が好きなのでカスタマイズをしようとしたのですが、ご指示通りにカスタマイズすると、なぜか目次のアイコンがある部分のデザインが一部崩れてしまいます。

     このコメント欄に写真を貼りつけられないのでうまく説明するのが難しいですが、私がCocoonで採用しているスキンとの相性の問題なのかもしれません。私が使用しているスキンは「Veilnui Simplog (brown) [作者: veilnui]」です。いったんこちらのスキンに変換してみると、不具合がどのようなものか分かるかもしれません。

     できましたら、こちらのカスタマイズを使用したいと思っております。上記のずれを直していただく形でも結構ですし、もしくは目次のアイコン自体がなくてもいいかなと思っております。

     実際の不具合の状況をお見せできないので、うまく説明できないのがもどかしいですが、対処法をご助言いただけましたら幸いです。
     

  8. たびたびすみません、さくじつ問い合わせをしましたサントンと申します。その後にスキンを解除してやり直したところ、無事にできました。お騒がせしました。

  9. こんばんは!ブログ初心者のなずなななと申します。
    cocoonのテーマでブログを書いているんですが、目次が見づらくどうにかならないものかと検索していると、こちらの記事に出会いました。
    私はコードとか微塵もわからないので、コピーして貼るだけですごくかわいい見やすい目次になってとっても嬉しいです!
    このような目次を作ってくださって、本当に感謝しています。ありがとうございました(*^-^*)

  10. […] 【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。 有料テーマ「SANGO」っ […]

  11. […] 【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。 有料テーマ「SANGO」っ […]

  12. こんにちわ。
    ブログど!!初心者です。
    可愛いと思いやってみようと…
    コピペしているのに、「目次」作ってくれているように可愛く変わらないんですが?
    どこでどう間違っているのか分かりません。
    みなさん、できている様子なのでうらやましい…
    私の場合…コピペしてファイル更新して実際に使ってみようと思い
    →新規投稿するときに目次になるように「段落」を利用して書きました。
    何が間違っているのか分かりますか?

  13. こんにちわ。
    初心者ですが、なんとかコピペさせていただき実際に使えるようになってるようです‼
    感謝です‼

    一つ、目次としてでてるのですが
    アイコンの部分が「F138」が現れて、アイコンが出てきません。
    どうすればアイコンがでてきますか?

    • こんにちは、すろーらいふと申します。
      とても可愛くおしゃれなので当ブログで使わせていただきました。

      https://slowlifetokyo.com

      とても気に入っています!!

      • すろーらいふさん

        お力に慣れたようで良かったです!

  14. こんにちわ。
    初心者ですが、なんとかコピペさせていただき実際に使えるようになってるようです‼
    感謝です‼

    一つ、目次としてでてるのですが
    アイコンの部分が「F138」が現れて、アイコンが出てきません。
    どうすればアイコンがでてきますか?

    • Favさん
      コメントありがとうございます。

      アイコンの部分が「F138」が現れて、アイコンが出てきません。
      >Font Awesomeのバージョンによって表示されることとされないことがあるので確認してもらってもよいでしょうか?
       Font Awesomeの確認方法は当ブログでも紹介していますので、良ければ御覧ください。

  15. […] 【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。 有料テーマ「SANGO」っ […]

  16. はじめまして、NPO NEWSというウェブメディアを運営しています。COCOONでの目次カスタマイズを探していたところ、こちらの記事にたどりつきました。コピペで簡単にできました。色の変更もコメント入れていただいているのですぐにでき本当に一瞬でできました。おしゃれになってうれしいです。ありがとうございました。
    こちらのサイトです→https://nponews.jp/

    • NPO NEWS 編集部さん

      お力になれたようでよかったです!

  17. はじめまして。ブログを運営しているふじのと申します。
    こちらの目次カスタマイズの記事を参考に、カスタマイズしてみました。
    雰囲気が変わりとても気に入りました。ありがとうございます!

    一点、質問させていただきます。
    スマホで表示される際に横幅いっぱいにしたいのですが、その場合このカスタマイズに加えて別なCSSの追記が必要でしょうか?
    お忙しいところ恐縮ですが、よろしくお願い致します!

    • ふじのさん

      返信が遅くなり申し訳ありません。
      横幅いっぱいにというのは、空白なく完全に100%目次が幅をとるということでしょうか?
      その場合は、ふじのさんのサイト自体の設定を変更する必要があるかもしれません。

      可能でしたらふじのさんのサイトのURLを教えて頂くことは可能ですか?
      もしかしたらお力になれるかもしれません。

  18. こんにちは、ブログを運営しているまなむらと申します。
    こちらで紹介されている目次を使用したところ、サイトの雰囲気がよくなり見やすさも向上しました。
    ありがとうございます。
    大変恐縮なのですが、ここで1つ質問がございます。
    コードをコピペすると【目次】という文字が左寄りになってしまいます。
    コードを使用しない時は中央寄りになるのですが…
    プラグイン等は確認したのですが原因となるものは見つけられませんでした。
    お手数ですが、なにか解決方法をお教えしていただけたら幸いです。

    • まなむらさん

      可能でしたら、まなむらさんのサイトURLをお教え頂けますでしょうか?
      私のほうでも確認させて貰えると対応できることがあるかもしれません。

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