【コピペで完成】AFFINGER6とTOC+でSANGO風のおしゃれな目次を作る方法

悩んでいる人

「AFFINGER6でおしゃれな目次を作りたいです。SANGOのようなおしゃれな目次は作れませんか？」

こういった疑問に答えます。

上記の記事内容でお伝えしていきます。

それでは、解説していきます。

SANGO風のおしゃれな目次とは？

本記事で定義するSANGO風のおしゃれな目次とは、「まるでSANGOのような目次のこと」です。

最終的な完成イメージは下記画像のとおり。

SANGO風のおしゃれな目次の完成イメージ

ご覧のとおり、SANGO風の目次デザインですよね。

注意点として、SANGOと全く同じデザインではありません。

なぜなら、AFFINGER6にはTOC+に関するCSSがデフォルトで書かれています。
そのデフォルトで書かれているCSSを活かしているため、SANGOの目次とはデザインが若干異なります。

SANGO風のおしゃれな目次とSANGOの目次の異なる点は以下のとおり。

これらを踏まえて、「SANGO風のおしゃれな目次を作りたい！」と思った人だけ以降を読み進めてください。

SANGO風のおしゃれな目次を作る方法

それでは、SANGO風のおしゃれな目次を作る方法を解説します。

ざっくりとした作り方は以下のとおり。

手順3の「SANGO風の追加CSSをコピペ」では、テーマエディタで子テーマを編集します。

CSSをコピペするだけなので基本的には問題ありませんが、不安な人はバックアップを取ってから作業してください。

STEP1：TOC+をインストール

1つ目の手順として、「TOC+（Table of Contents Plus）」をインストールします。

Taki

既にTOC+をインストールしている人は読み飛ばしてOKです。

ちなみに、TOC+は目次を自動挿入するプラグインです。
TOC+以外の目次プラグインをインストールしている人はアンインストールしてください。

TOC+は以下の手順でインストールしてください。

上記の手順でTOC+をインストールできます。

STEP2：TOC+の設定

2つ目の手順として、TOC+の設定を行います。

きちんと設定しなければ、デザインが反映されなかったり、目次が表示されなかったりします。

TOCの設定は、WordPressの管理画面>「設定」>「TOC+」から開くことが可能です。

Taki

それでは、TOC+の設定内容をご説明します。

次に、「上級者向け（表示）」をクリックしてください。
クリックすると、新しく設定項目が表示されます。

以上でTOC+の設定は終了です。

STEP3：SANGO風の追加CSSをコピペ

3つ目の手順として、SANGO風の追加CSSをコピペします。

WordPressに慣れていない人は唯一苦戦する手順かもしれません。
読んでもよく分からない人は、Twitter（＠takiblogtokyo）で質問していただければ回答できます。

コピペするCSSは以下の3種類です。

画像付きでご説明しますので、ご安心ください。

まずは、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」の青色で書かれているカラーコードを変更すると好みの色にできます。

本記事でご紹介しているデフォルトカラーとおすすめのカラーは以下のとおり。

おすすめのカラーに設定すると、完成イメージのようになります。

オレンジ色（#f8c678）

オレンジ色（#f8c678）の目次はこんな感じです。

緑色（#79bd9a）

緑色（#79bd9a）の目次はこんな感じです。

暗い青（#203744）

暗い青（#203744）の目次はこんな感じです。

追記：一部記事で表示が崩れる問題【解決方法はこちら】

2021年11月27日に一部記事で表示が崩れる問題を発見しました。

記事を参考に実装されていた方、大変申し訳ございません。

一部記事で表示が崩れる原因は、TOCのdiv属性に「only-toc」というクラス名が付与されていることでした。

「only-toc」は、"階層構造が一段のもの（例：H2見出しだけの目次）"のみに付与されています。
これは、AFFINGERテーマのJavaScriptファイルに記述されているコードによって実装されていたため、発見に遅れてしまいました。

Taki

解決するには、AFFINGERテーマの親ファイルから「only-toc」を付与するコードを削除する必要があります。

専門的な話をしてしまいましたが、解決するには下記の手順で簡単に解決できます。

上記の手順です。

親テーマはアップデートするたびに書き換わります。
そのため、アップデートごとに上記の作業が必要です。

根本的な解決にはなりませんが、階層構造が一段にならないように記事を書くことでも解決可能です。

「only-toc」のCSSコードを全て無効化することでも解決できますが、冗長的にコード量が増加してしまい、表示速度の面から望ましくありません。

SANGO風の追加CSSが反映されないときに確認すること

もし、SANGO風の追加CSSが反映されないときは、以下の3点を確認してみてください。

1つずつ、解説していきますね。

TOC+の設定を確認

まず、TOC+の設定を見直しましょう。

特に上級者向け設定の

という設定を忘れていないことを確認してください。

デザインが崩れる原因や無駄なCSSを読み込んでしまいます。

追加CSSの貼り付け位置を再確認する

次に、追加CSSの貼り付け位置を再確認しましょう。

特にペースト（貼り付け）する位置が間違っていると、正しく表示されませんので注意が必要です。

また、コピペ作業中に「全角の空白」を誤って入力していると、コードが正しく認識されなくなっていしまいます。

表示がおかしいときは、コピペしたコードを全て削除して保存後、再度コピペしてみるのがいいでしょう。

キャッシュのパージ

キャッシュプラグインをインストールしている人は、キャッシュのパージ（削除）を試してください。

古いキャッシュが残っていて、保存前のデザインが表示されている可能性があります。

キャッシュは高速化の便利な技術ですが、「表示がおかしい」と思ったときに疑うべき要素の1つです。

まとめ

本記事では、「AFFINGER6とTOC+でSANGO風のおしゃれな目次を作る方法」を解説しました。

おしゃれな目次を作りたい人は、本記事を参考にアレンジしてみてもいいかもしれませんね。

AFFINGER6のようにデフォルトでTOC+のCSSコードが書かれている場合は、「Google Chrome デベロッパー ツール」を使用するのがオススメです。

Taki

もし、独自のアレンジをする際は試してみてください。

最後までお読みいただき、ありがとうございました。

AFFINGER6に関する記事はコチラ

解決方法【無料】AFFINGER6の高速化！9つの簡単な方法で重さを改善

解決方法AFFINGER（アフィンガー）のカスタマイズ方法を解説！【トップページ・サイドバー・メニュー対応】

解決方法AFFINGERのアイキャッチ画像で最適なサイズは？自動挿入する方法は？

解決方法AFFINGER（アフィンガー）で表示がおかしいとき対処法【デザインが正常に反映されない】