AFFINGER

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

AFFINGER6とTOC+でSANGO風のおしゃれな目次を作る方法
悩んでいる人
「AFFINGER6でおしゃれな目次を作りたいです。SANGOのようなおしゃれな目次は作れませんか?」

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

本記事の内容
  • SANGO風の目次とは
  • SANGO風の目次を作る方法
  • 追加CSSが反映されないときに確認すること

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

本記事の信頼性
本記事を書いている僕は、「AFFINGER6を購入して特典付きレビュー」をしています。
実際に使用しているからこそ、目次のデザインについて悩みました。
しかし、現在では「目次のデザイン」に関する悩みはなく、記事の執筆に専念できています。

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

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

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

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

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

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

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

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

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

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

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

SANGO風のおしゃれな目次SANGOの目次
H2見出しの左側黒い三角形黒い点
H3見出しの下部下線つき下線なし

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

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

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

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

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

ざっくりとした作り方の手順
  1. TOC+をインストール
  2. TOC+の設定
  3. SANGO風の追加CSSをコピペ
  4. デザインの反映を確認
  5. 好みの色に変更

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

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

STEP1:TOC+をインストール

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

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

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

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

  1. WordPressの管理画面にログイン
  2. 「プラグイン」をクリック
  3. 「新規追加」をクリック
  4. 検索ボックスに「toc」と入力
  5. Table of Contents Plusの「今すぐインストール」をクリック
  6. 「有効化」をクリック

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

STEP2:TOC+の設定

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

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

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

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

TOC+の設定内容1/2

  1. 表示条件を「2」にする
  2. post」にチェックを入れる
  3. 目次タイトル 「目次(任意)
  4. テキストを表示 「開く(任意)
  5. テキストを非表示 「閉じる(任意)
  6. 最初は目次を非表示」にチェックを入れる(任意)
  7. 番号振り」のチェックを外す

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

TOC+の設定内容 2/2

TOC+の設定内容2/2

  1. アンカーに必ず小文字を使用」にチェックを入れる
  2. アンカーでアンダースコアではなくハイフンを使用」にチェックを入れる
  3. プラグインのCSSスタイルを読み込まない場合~…」にチェックを入れる
  4. 見出しレベルを「heading1~3」までにする

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

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

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

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

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

  1. 全体に反映させるCSS
  2. PC・タブレットに反映させるCSS
  3. スマホのみに反映させる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;
}

上記コードをコピーして、下記画像のエリアにペースト(貼り付け)してください。

全体に反映させるCSSをペーストするエリア

画像を見ても分からない人は、下記のように最下部にペーストすれば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;
}

上記コードをコピーして、下記画像のエリアにペースト(貼り付け)してください。

PC・タブレットに反映させるCSSをペーストするエリア

画像を見ても分からない人は、下記のように(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;
}

上記コードをコピーして、下記画像のエリアにペースト(貼り付け)してください。

スマホのみに反映させるCSSをペーストするエリア

画像を見ても分からない人は、下記のように (max-width: 599px) のエリアにペーストすればOKです。

 貼り付ける場所
/*media Queries スマホサイズ(599px)以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
ココにペーストする
/*-- ここまで --*/
}

間違った場所に貼り付けてしまうと正しく表示されませんので、よく確認して作業してください。

以上で、SANGO風の追加CSSをコピペ作業は終了です。

STEP4:デザインの反映を確認

4つ目の手順として、デザインの反映を確認します。

これまでのSTEP1~3までを正しく作業できていれば、下記の完成イメージのようになっています

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

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

上記の完成イメージの通りになっていなければ、「SANGO風の追加CSSが反映されないときに確認すること」から原因を探していただければ幸いです。

STEP5:好みの色に変更

最後の手順として、好みの色に変更しましょう。
水色と灰色のデザインで満足している人は、この手順は読み飛ばしてOKです。

「全体に反映させるCSS」の青色で書かれているカラーコードを変更すると好みの色にできます。

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

デフォルトカラーおすすめのカラー
ボーダー上部水色(#6bb6ff)・オレンジ色(#f8c678)
・緑色(#79bd9a)
・暗い青(#203744)
目次のアイコン水色(#6bb6ff)・オレンジ色(#f8c678)
・緑色(#79bd9a)
・暗い青(#203744)
目次のタイトル水色(#6bb6ff)・オレンジ色(#f8c678)
・緑色(#79bd9a)
・暗い青(#203744)
背景色灰色(#f9f9f9)灰色(#f9f9f9)

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

オレンジ色(#f8c678)

SANGO風の目次(オレンジ)

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

緑色(#79bd9a)

SANGO風の目次(緑)

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

暗い青(#203744)

SANGO風の目次(暗い青)

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

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

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

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

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

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

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

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

  1. WordPressの管理画面>「外観」>「テーマエディター」
  2. 「編集するテーマを選択」から「AFFINGER 」を選ぶ
  3. 下にスクロールして「st-richjs.php」というファイルをクリック
  4. 259行目の
    jQuery("#toc_container:not(:has(ul ul))").addClass("only-toc");
    を削除
  5. 「ファイルを更新」をクリック

上記の手順です。

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

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

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

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

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

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

確認するべきこと
  1. TOC+の設定を確認
  2. 追加CSSの貼り付け位置を再確認する
  3. キャッシュのパージ

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

TOC+の設定を確認

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

特に上級者向け設定の

「プラグインのCSSスタイルを読み込まない場合~…」にチェックを入れる

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

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

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

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

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

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

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

キャッシュのパージ

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

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

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

まとめ

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

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

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

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

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

AFFINGER6に関する記事はコチラ

「AFFINGER6の表示速度が遅い。どうすれば速くなるの?」

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

「AFFINGER6の上手くカスタマイズできない。どうすればいい?」

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

「AFFINGER6のアイキャッチ画像ってどんなサイズがおすすめ?」

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

「AFFINGER6の表示がおかしいです。どうすればいいですか?」

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

Taki

SEOやアフィリエイトが好きな20代のWebライターです。
これまでのWordPressサイト運営経験をもとに、役立つ情報を発信していきます。
>>プロフィールを読む。

-AFFINGER