最近Affinger6でTOC+を使おうとしてどハマりしたことがあり、ネットで調べても特に解決策が出てこなかったので共有します。
そのやり方間違っているよ、とか、筋が悪いよ、とかあればコメントをください。
ハマったこと
題名の通り、Affinger6でブログカードとTOC+を同じ記事で使おうとするとハマりました。
具体的には、目次とブログカードが合体された状態で表示されました。。。
ここでは、次のように原文は書いていて、「ブログカード」の次に「ここに目次が表示される」というところに目次が表示される予定でした。
これからこの謎を解析＆解決していきます。
原因なんてどうでもいい。答えが欲しいんだ。という方はこちら。
何が起こったのか
TOC+では、h1やh2といった見出しタグをピックアップして目次を作っているので、ブログカードの題名にも見出しタグが使われていることが考えられます。
なので、確認していきましょう。
少しテクニカルな内容になりますが、環境を説明しておくとこんな感じです。
| ブログテーマ | Affinger6 Children |
| ブラウザー | Safari |
| 確認デバイス | MacBook Pro |
問題となっているブログカードの題名部分で右クリック（Macだと２本指でクリック）します。
そうすると、いくつか選択肢がでてくるので、「要素の詳細を表示」をクリック。
すると、解析用の画面が表示されます。
ブログカードの題名「我が家の投資方針」は<h5>のタグで囲まれていました。
これだと確かに目次に拾ってしまいますね。
また、「st-cardbox-t」というclassが割り当てらていますが、解決策のところで使うので覚えておきます。
解決策
目次にするタグ候補を絞る
TOC+では、見出しタグのh1〜h6までどのタグを目次に表示させるか設定することができます。
まずは、「設定」→「TOC+」を選択。
すると、TOC+の設定画面が出てきます。
下までスクロールすると、該当する設定項目がないのですが、「上級者向け（表示）」という項目があるので、そこの「表示」をクリックします。
すると、詳細に設定できる項目がいくつか表示されます。
その中で「見出しレベル」という項目があり、そこでh1〜h5のどのタグを目次に表示させるか設定することができます。
今回の場合、ブログカードの題名に割り振られているのは<h5>なので、「heading 5 - h5」のチェックを外せばいいですね。
ただし、こちらの方法だと全てのブログに適用されるので、h5まで見出しを使っているものだとその見出しが目次に表示されなくなります。
ブログカードの題名の<h5>タグを<b>に変える
ブログカードで<h5>が使っているのが悪いんだから<b>に変えればいいんだというのがこちらの方法。
なので、プログラムの方を変えていきましょう。
今回のタグを変えることには問題はないと思いますが、変えて問題が起きても良いようにバックアップは取っておきましょう。
まずは、「外観」→「テーマエディター」を選択。
続いて、「編集するテーマを選択」で「AFFINGER」を選択。
（ここはバージョンによって違うと思いますが、子テーマ（Children）ではなく親のテーマを選択します。）
編集ファイル候補がいくつかでてくるので、その中で「テーマのための関数（functions.php）」を選択して編集していきます。
ファイルを開いたら、「Ctrl + f」で「st-cardbox-t」を検索します。
いくつか候補が出てきますが、<h5>と一緒に現れるのは４候補になります。
今回の場合、2960、2961行目の<h5>を<b>に変えてあげればよいです。
2960行目はブログカードに題名があるとき、2961行目はブログカードに題名がないとき用のコードのようです。
また、同じような組み合わせのコードが２行（候補４行のうちの残りの２行）は「Affinger○-EX」用みたいです。
おわり
今回の対応で確かにブログカードと目次を分離することができました。
でも、ネットを調べても特に出てこなかたのでうちだけ問題？
とりあえず、解決してよかった。