1. モバイル表示でも目次を追加したい
PC表示向けにはサイドバーに目次を表示しているのですが、スマートフォンでも目次から各セクションに飛べるようにしたいと思っていました。
リファレンス色の強い記事を読んでいたら、全体像を把握できると便利だと思ったからです。
サイドバーはモバイル表示では非表示になるので、記事内のウィジェットエリアにSimpleTOCを追加して、CSSで表示を制御することにしました。
WordPressでのウィジェット追加とstyle.cssだけで完結します。
2. ウィジェットにSimpleTOCを追加する
まずは、「外観 > ウィジェット」から、記事内のウィジェットエリア（今回は「最初の見出し上部」）にSimpleTOCブロックを追加しました。
CSSでの表示切り替えのフックとして、ウィジェットのクラス名に toc-for-mobile を設定しました。
3. CSSで表示を切り替える
PCでは サイドバーの目次と重複 .toc-for-mobile ごと非表示にします。
逆に、モバイル側では、シェアボタンや関連記事など既存のウィジェットをIDで指定して非表示にします。
@media (min-width: 782px) {
.toc-for-mobile {display:none;}
}
@media (max-width: 781px) {
/* モバイルで不要なウィジェットを非表示 */
#block-18, #block-17, #block-16 {display:none;}
}Code language: CSS (css)782pxはWordPressが管理画面とフロントで使うブレークポイントに合わせた値です。
これで記事直下のスペースに目次だけが残ります。
4. 見た目の調整
目次は角丸のボーダーで囲み、タイトルはセンタリングしました。
リンクの色は var(--contrast) を使ってテーマのカラー変数に追従させています。
アンダーラインは外してあります。
/* 目次のスタイル */
.widget .toc-for-mobile .simpletoc-title {
text-align: center;
font-weight: bold;
margin-bottom: 0.5em;
}
.single .widget .toc-for-mobile ul {
margin-top: 0;
}
.widget .toc-for-mobile {
border: 1.2px solid rgba(0, 0, 0, .3);
padding: 10px;
border-radius: 10px;
font-size: 14px;
}
.widget .toc-for-mobile ul li {
list-style-type: decimal;
margin-bottom: 0;
}
.widget .toc-for-mobile ul ul {
margin-left: 0.5em;
}
.widget .toc-for-mobile ul li li {
margin-left: 0;
margin-top: 0;
}
.widget .toc-for-mobile li a {
text-decoration: none;
color: var(--contrast);
}Code language: CSS (css)数字付きリストは list-style-type: decimal で表現しています。
SimpleTOCがデフォルトで出力するHTMLの構造をそのまま使い、CSSだけで見た目を整えました。