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

WordPress

2019.10.172023.04.04

疑問くん

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

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

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

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

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

この記事の内容

完成イメージ
カスタマイズ方法
1. STEP1 : CSSをコピー & ペースト
導入済みのブログをサイト紹介させて頂きたいと思います！

完成イメージ

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

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

この記事の内容

完成イメージ
カスタマイズ方法
1. STEP1 : CSSをコピー & ペースト
導入済みのブログをサイト紹介させて頂きたいと思います！

カスタマイズ方法

手順は以下の通り。

カスタマイズ手順

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以降の文字サイズを普通に */
}

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

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

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

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

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

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

ご利用頂いたサイト紹介！

しまね縁タメ | 島根の魅力を発信する地域ブログ

育パパ・ママログ

峠の雑記ブログ | 30代会社員の経験と知識と知恵

げんごブログ

ゼロスタートブログ

宮古島から世界征服はじめました

名前:Cocoonの機能が有料テーマ超えなのでデザインだけ有料っぽくしていく！！ | とまじ庵 : 投稿日：2019/11/24(日) 12:34:19 ID：QzMDk3Nzc

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

返信
名前:通りすがりサイト編集者 : 投稿日：2020/01/28(火) 13:42:41 ID：E5NTg0MDc

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

返信

名前:Yoshitaka : 投稿日：2020/01/28(火) 21:42:06 ID：AxMDYxNzI

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

返信

名前:【cocoon】目次カスタマイズ‼見やすくシンプルにしよう【CSSコピペでOK】 : 投稿日：2020/02/09(日) 12:19:26 ID：MyMDk5Njc

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

返信
名前:【Cocoon】ブログカスタマイズ参考CSSサイト一覧【WordPress】 | pyonlog.com : 投稿日：2020/03/07(土) 21:30:20 ID：g0MTY2MDQ

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

返信
名前:【ブログ初心者カスタマイズ】目次を変更！【テーマはcocoon使用】 | 家ねこクエスト : 投稿日：2020/04/20(月) 20:55:23 ID：I4NzUxNTk

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

返信
名前:【Cocoon】目次のカスタマイズ | 散水のブログ : 投稿日：2020/06/04(木) 16:40:15 ID：U2NDEyNzU

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

返信
名前:サントン : 投稿日：2020/06/13(土) 02:02:06 ID：UwMTE0NzA

Yoshitakaさま

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

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

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

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

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

返信
名前:サントン : 投稿日：2020/06/13(土) 21:09:21 ID：UwMTE0NzA

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

返信
名前:なずななな : 投稿日：2020/09/03(木) 21:47:48 ID：E5MjI5Mzc

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

返信
名前:【Cocoon】目次の表示方法とコピペだけ！簡単カスタマイズ | Onedaiz : 投稿日：2020/10/19(月) 23:12:04 ID：Q5OTI3NjA

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

返信
名前:【Cocoon】おしゃれ目次にカスタマイズ！CSSコピペでOK | たろのプログラミング日記 : 投稿日：2021/02/22(月) 00:22:08 ID：gyOTE0ODA

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

返信
名前:fav : 投稿日：2021/05/07(金) 11:32:07 ID：I2NTU0MzQ

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

返信
名前:匿名 : 投稿日：2021/05/14(金) 12:00:45 ID：M4MDA1MDY

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

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

返信

名前:すろーらいふ : 投稿日：2021/10/23(土) 16:11:40 ID：QzNjg3ODM

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

https://slowlifetokyo.com

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

返信

名前:Yoshitaka : 投稿日：2021/10/23(土) 18:26:53 ID：k2NjkyOTA

すろーらいふさん

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

返信

名前:Fav : 投稿日：2021/05/14(金) 12:05:24 ID：M4MDA1MDY

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

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

返信

名前:Yoshitaka : 投稿日：2021/05/19(水) 11:19:01 ID：AzNzAxODA

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

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

返信

名前:【Cocoon】目次をカスタマイズ | 藤散人のブログ : 投稿日：2021/12/13(月) 17:30:11 ID：gyODcwMTA

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

返信
名前:NPO NEWS 編集部 : 投稿日：2021/12/14(火) 15:40:40 ID：UxNzg0MzY

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

返信

名前:Yoshitaka : 投稿日：2021/12/16(木) 13:59:18 ID：E2MzkzNDg

NPO NEWS 編集部さん

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

返信

名前:ふじの : 投稿日：2021/12/26(日) 00:12:26 ID：Y3NjA4NDc

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

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

返信

名前:Yoshitaka : 投稿日：2022/01/13(木) 17:22:56 ID：M4Mzg0Mjg

ふじのさん

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

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

返信

名前:manamura10 : 投稿日：2022/01/11(火) 02:54:38 ID：YxMzk2MzY

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

返信

名前:Yoshitaka : 投稿日：2022/01/13(木) 17:20:56 ID：M4Mzg0Mjg

まなむらさん

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

返信