
こういった疑問に答えます。
- SANGO風の目次とは
- SANGO風の目次を作る方法
- 追加CSSが反映されないときに確認すること
上記の記事内容でお伝えしていきます。
実際に使用しているからこそ、目次のデザインについて悩みました。
しかし、現在では「目次のデザイン」に関する悩みはなく、記事の執筆に専念できています。
それでは、解説していきます。
目次
SANGO風のおしゃれな目次とは?
本記事で定義するSANGO風のおしゃれな目次とは、「まるでSANGOのような目次のこと」です。
最終的な完成イメージは下記画像のとおり。

SANGO風のおしゃれな目次の完成イメージ
ご覧のとおり、SANGO風の目次デザインですよね。
注意点として、SANGOと全く同じデザインではありません。
なぜなら、AFFINGER6にはTOC+に関するCSSがデフォルトで書かれています。
そのデフォルトで書かれているCSSを活かしているため、SANGOの目次とはデザインが若干異なります。
SANGO風のおしゃれな目次とSANGOの目次の異なる点は以下のとおり。
SANGO風のおしゃれな目次 | SANGOの目次 | |
---|---|---|
H2見出しの左側 | 黒い三角形 | 黒い点 |
H3見出しの下部 | 下線つき | 下線なし |
これらを踏まえて、「SANGO風のおしゃれな目次を作りたい!」と思った人だけ以降を読み進めてください。
SANGO風のおしゃれな目次を作る方法
それでは、SANGO風のおしゃれな目次を作る方法を解説します。
ざっくりとした作り方は以下のとおり。
- TOC+をインストール
- TOC+の設定
- SANGO風の追加CSSをコピペ
- デザインの反映を確認
- 好みの色に変更
手順3の「SANGO風の追加CSSをコピペ」では、テーマエディタで子テーマを編集します。
CSSをコピペするだけなので基本的には問題ありませんが、不安な人はバックアップを取ってから作業してください。
STEP1:TOC+をインストール
1つ目の手順として、「TOC+(Table of Contents Plus)」をインストールします。

ちなみに、TOC+は目次を自動挿入するプラグインです。
TOC+以外の目次プラグインをインストールしている人はアンインストールしてください。
TOC+は以下の手順でインストールしてください。
- WordPressの管理画面にログイン
- 「プラグイン」をクリック
- 「新規追加」をクリック
- 検索ボックスに「toc」と入力
- Table of Contents Plusの「今すぐインストール」をクリック
- 「有効化」をクリック
上記の手順でTOC+をインストールできます。
STEP2:TOC+の設定
2つ目の手順として、TOC+の設定を行います。
きちんと設定しなければ、デザインが反映されなかったり、目次が表示されなかったりします。
TOCの設定は、WordPressの管理画面>「設定」>「TOC+」から開くことが可能です。

- 表示条件を「2」にする
- 「post」にチェックを入れる
- 目次タイトル 「目次」(任意)
- テキストを表示 「開く」(任意)
- テキストを非表示 「閉じる」(任意)
- 「最初は目次を非表示」にチェックを入れる(任意)
- 「番号振り」のチェックを外す
次に、「上級者向け(表示)」をクリックしてください。
クリックすると、新しく設定項目が表示されます。
- 「アンカーに必ず小文字を使用」にチェックを入れる
- 「アンカーでアンダースコアではなくハイフンを使用」にチェックを入れる
- 「プラグインのCSSスタイルを読み込まない場合~…」にチェックを入れる
- 見出しレベルを「heading1~3」までにする
以上でTOC+の設定は終了です。
STEP3:SANGO風の追加CSSをコピペ
3つ目の手順として、SANGO風の追加CSSをコピペします。
WordPressに慣れていない人は唯一苦戦する手順かもしれません。
読んでもよく分からない人は、Twitter(@takiblogtokyo)で質問していただければ回答できます。
コピペするCSSは以下の3種類です。
- 全体に反映させるCSS
- PC・タブレットに反映させるCSS
- スマホのみに反映させるCSS
画像付きでご説明しますので、ご安心ください。
まずは、CSSをペーストするために、テーマエディターを開きましょう。
テーマエディターは、WordPressの管理画面>「外観」>「テーマエディター」から開けます。
1.全体に反映させるCSS
最初に「全体に反映させるCSS」をコピーします。
コピーするCSSは以下のとおり。
全体に反映させるCSS /*-- 目次タイトルの左寄せ --*/ #toc_container{ text-align: left !important; } /*-- 目次タイトルのサイズ・ボーダー消し --*/ #toc_container .toc_title { font-size: 120%; border-bottom: none !important; /*-- 目次タイトルの色 --*/ color: #6bb6ff; } /*-- 目次タイトルのタイトル周り --*/ #st_toc_container .st_toc_title::before, #toc_container .toc_title::before{ width: 40px; height: 50px; display: inline-block; border-radius: 50%; color: #fff; padding-left: 10px; margin-right: 10px; line-height: 50px; /*-- アイコンの背景色 --*/ background: #6bb6ff; } /*-- H2目次のサイズ --*/ #toc_container li li { font-size: 90%; } /*-- H3目次を数字から点 --*/ #toc_container li li { list-style: outside !important; } /*-- 「開く」「閉じる」のサイズ --*/ #toc_container .toc_title .toc_toggle { font-size: 80% !important; } /*-- 周りの影 --*/ #st_toc_container, #toc_container { border: none !important; box-shadow: 0 1.5px 2.4px rgb(0 0 0 / 15%); /*-- 背景色 --*/ background: #f9f9f9; /*-- 目次の上部ボーダーカラー --*/ border-top: solid 5px #6bb6ff !important; } /*-- 目次のフォントカラー --*/ #toc_container ul a { color: #555555 !important; }
上記コードをコピーして、下記画像のエリアにペースト(貼り付け)してください。
画像を見ても分からない人は、下記のように最下部にペーストすればOKです。
貼り付ける場所 /*media Queries スマホサイズ(599px)以下で適応したいCSS - スマホのみ ---------------------------------------------------------------------------------------------------*/ @media print, screen and (max-width: 599px) { /*-- ここまで --*/ } ↓ココから下にペーストする↓
間違った場所に貼り付けてしまうと正しく表示されませんので、よく確認して作業してください。
PC・タブレットに反映させるCSS
次に「PC・タブレットに反映させるCSS」をコピーします。
コピーするCSSは以下のとおり。
PC・タブレットに反映させるCSS
/*-- 目次の開閉による崩れ防止 --*/
#toc_container:not(.contracted){
display: block !important;
}
上記コードをコピーして、下記画像のエリアにペースト(貼り付け)してください。
画像を見ても分からない人は、下記のように(min-width: 600px) のエリアにペーストすればOKです。
貼り付ける場所 /*media Queries タブレット(600px)以上で適応したいCSS -タブレット・PC ---------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 600px) { ココにペーストする /*-- ここまで --*/ }
間違った場所に貼り付けてしまうと正しく表示されませんので、よく確認して作業してください。
スマホのみに反映させるCSS
最後に「スマホのみに反映させるCSS」をコピーします。
コピーするCSSは以下のとおり。
スマホのみに反映させるCSS
/*-- スマホデザインの調整 --*/
.toc_list{
padding-left:0 !important;
margin-left:0 !important;
}
#toc_container > ul > li {
font-size: 15px !important;
}
上記コードをコピーして、下記画像のエリアにペースト(貼り付け)してください。
画像を見ても分からない人は、下記のように (max-width: 599px) のエリアにペーストすればOKです。
貼り付ける場所 /*media Queries スマホサイズ(599px)以下で適応したいCSS - スマホのみ ---------------------------------------------------------------------------------------------------*/ @media print, screen and (max-width: 599px) { ココにペーストする /*-- ここまで --*/ }
間違った場所に貼り付けてしまうと正しく表示されませんので、よく確認して作業してください。
以上で、SANGO風の追加CSSをコピペ作業は終了です。
STEP4:デザインの反映を確認
4つ目の手順として、デザインの反映を確認します。
これまでのSTEP1~3までを正しく作業できていれば、下記の完成イメージのようになっています。

SANGO風のおしゃれな目次の完成イメージ
上記の完成イメージの通りになっていなければ、「SANGO風の追加CSSが反映されないときに確認すること」から原因を探していただければ幸いです。
STEP5:好みの色に変更
最後の手順として、好みの色に変更しましょう。
水色と灰色のデザインで満足している人は、この手順は読み飛ばしてOKです。
「全体に反映させるCSS」の青色で書かれているカラーコードを変更すると好みの色にできます。
本記事でご紹介しているデフォルトカラーとおすすめのカラーは以下のとおり。
デフォルトカラー | おすすめのカラー | |
---|---|---|
ボーダー上部 | 水色(#6bb6ff) | ・オレンジ色(#f8c678) ・緑色(#79bd9a) ・暗い青(#203744) |
目次のアイコン | 水色(#6bb6ff) | ・オレンジ色(#f8c678) ・緑色(#79bd9a) ・暗い青(#203744) |
目次のタイトル | 水色(#6bb6ff) | ・オレンジ色(#f8c678) ・緑色(#79bd9a) ・暗い青(#203744) |
背景色 | 灰色(#f9f9f9) | 灰色(#f9f9f9) |
おすすめのカラーに設定すると、完成イメージのようになります。
オレンジ色(#f8c678)
オレンジ色(#f8c678)の目次はこんな感じです。
緑色(#79bd9a)
緑色(#79bd9a)の目次はこんな感じです。
暗い青(#203744)
暗い青(#203744)の目次はこんな感じです。
追記:一部記事で表示が崩れる問題【解決方法はこちら】
2021年11月27日に一部記事で表示が崩れる問題を発見しました。
記事を参考に実装されていた方、大変申し訳ございません。
一部記事で表示が崩れる原因は、TOCのdiv属性に「only-toc」というクラス名が付与されていることでした。
「only-toc」は、"階層構造が一段のもの(例:H2見出しだけの目次)"のみに付与されています。
これは、AFFINGERテーマのJavaScriptファイルに記述されているコードによって実装されていたため、発見に遅れてしまいました。

専門的な話をしてしまいましたが、解決するには下記の手順で簡単に解決できます。
- WordPressの管理画面>「外観」>「テーマエディター」
- 「編集するテーマを選択」から「AFFINGER 」を選ぶ
- 下にスクロールして「st-richjs.php」というファイルをクリック
- 259行目の
jQuery("#toc_container:not(:has(ul ul))").addClass("only-toc");
を削除 - 「ファイルを更新」をクリック
上記の手順です。
親テーマはアップデートするたびに書き換わります。
そのため、アップデートごとに上記の作業が必要です。
根本的な解決にはなりませんが、階層構造が一段にならないように記事を書くことでも解決可能です。
「only-toc」のCSSコードを全て無効化することでも解決できますが、冗長的にコード量が増加してしまい、表示速度の面から望ましくありません。
SANGO風の追加CSSが反映されないときに確認すること
もし、SANGO風の追加CSSが反映されないときは、以下の3点を確認してみてください。
- TOC+の設定を確認
- 追加CSSの貼り付け位置を再確認する
- キャッシュのパージ
1つずつ、解説していきますね。
TOC+の設定を確認
まず、TOC+の設定を見直しましょう。
特に上級者向け設定の
「プラグインのCSSスタイルを読み込まない場合~…」にチェックを入れる
という設定を忘れていないことを確認してください。
デザインが崩れる原因や無駄なCSSを読み込んでしまいます。
追加CSSの貼り付け位置を再確認する
次に、追加CSSの貼り付け位置を再確認しましょう。
特にペースト(貼り付け)する位置が間違っていると、正しく表示されませんので注意が必要です。
また、コピペ作業中に「全角の空白」を誤って入力していると、コードが正しく認識されなくなっていしまいます。
表示がおかしいときは、コピペしたコードを全て削除して保存後、再度コピペしてみるのがいいでしょう。
キャッシュのパージ
キャッシュプラグインをインストールしている人は、キャッシュのパージ(削除)を試してください。
古いキャッシュが残っていて、保存前のデザインが表示されている可能性があります。
キャッシュは高速化の便利な技術ですが、「表示がおかしい」と思ったときに疑うべき要素の1つです。
まとめ
本記事では、「AFFINGER6とTOC+でSANGO風のおしゃれな目次を作る方法」を解説しました。
おしゃれな目次を作りたい人は、本記事を参考にアレンジしてみてもいいかもしれませんね。
AFFINGER6のようにデフォルトでTOC+のCSSコードが書かれている場合は、「Google Chrome デベロッパー ツール」を使用するのがオススメです。

最後までお読みいただき、ありがとうございました。
AFFINGER6に関する記事はコチラ
「AFFINGER6の表示速度が遅い。どうすれば速くなるの?」
解決方法【無料】AFFINGER6の高速化!9つの簡単な方法で重さを改善
「AFFINGER6の上手くカスタマイズできない。どうすればいい?」
解決方法AFFINGER(アフィンガー)のカスタマイズ方法を解説!【トップページ・サイドバー・メニュー対応】
「AFFINGER6のアイキャッチ画像ってどんなサイズがおすすめ?」
解決方法AFFINGERのアイキャッチ画像で最適なサイズは?自動挿入する方法は?
「AFFINGER6の表示がおかしいです。どうすればいいですか?」