Rank Math 目次ブロック紹介 and 展開/折りたたみ機能の改善

WordPressで目次を表示したい場合は、無料の目次プラグインである簡単な目次（Easy Table of Contents）を使用すると、自動的に目次を表示でき、便利です。別の方法でRank Math SEOプラグインがインストールされている場合は、ランクマスの目次ブロック機能を使用することも可能です。手動で個々の記事に目次ブロックを追加する必要がありますが、プラグインに依存せずに個々の記事の目的の場所に目次を配置できるため、それはまともな選択肢かもしれません。

Rank Math 目次ブロック

Rank Mathプラグインをインストールして有効にすると、基本的に目次（TOC）ブロックを使用できます。 Gutenberg) 環境でのみサポートされます。

• 主な機能
  • TOCブロックは、記事のすべてのヘッダタグ（H2〜H6など）を自動的に検出して目次にし、各項目に内部リンクを自動的に挿入します。
  • 目次の各項目は、直接編集（名前変更）するか、非表示（目のアイコン）で表示するかを選択できます。
  • ブロック追加時、リストスタイル(番号/ドット/なし)、ソート、色(テキスト/背景/リンク)、タイポグラフィ、パディング(内部余白)/マージン(外部余白)など細かいデザイン設定が可能です。
  • 必要に応じて グローバル設定や 個々の投稿単位 すべてで、タイトル、埋め込み/除外ヘッダ、リストスタイルのデフォルト値を指定できます。
• 高度な機能
  • スキーマ（SiteNavigationElement）が自動的に追加され、SEOに有利です。
  • 直接CSSクラスを追加し、カスタムスタイリング可能。
  • ブロックをパターン（Reusable Block）として保存し、他の記事で再利用可能。
  • Yoast/AIOSEOなど他のプラグインの目次ブロックもマイグレーション（自動変換）サポート。
• 注意事項
  • 1つの投稿に1つのRank Math目次ブロックのみが利用可能です。
  • デフォルトでは折りたたむTOC（アコーディオン方式）ではありませんが、カスタムコードで展開/折りたたみ（Collapsible）機能を実装できます。
  • ブロックが正常に公開されていない場合やヘッダーが欠落している場合は、除外ヘッダー設定とプラグインの競合を確認してください。

カスタムコードを追加することで、アコーディオン方式で目次を展開/折りたたむことができますが、Chromeブラウザではうまく機能しますが、エッジと Naver ウェールブラウザでは動作しないというユーザーがいます。以下で紹介するJavaScriptコードに置き換えると、 Naver ウェールでもうまく機能します。

Rank Mathの目次ブロックの使い方

目次は、SEOで重要な役割を果たすことができます。目次は、ページ内の主要な内容を構造化し、検索エンジンが記事の全体的な構造と重要なセクションをより効果的に把握するのに役立ち、ユーザーに必要な情報をすばやく見つけることで、滞在時間とページビューを向上させます。この過程でサイトのユーザーエクスペリエンス（UX）が向上し、検索エンジンはよく構造化されたコンテンツをより高く評価し、検索結果の上位インプレッションに有利に作用することができます。

このブログではTocerという有料TOCプラグインが使用されていますが、 WordPressには簡単な目次のようなさまざまな機能を提供するまともなTOCプラグインがあるので、自動目次を表示したい場合に利用できます。

追加のプラグインをインストールしたくない場合 Rank Mathが設置されていればランクマツが提供する Table of Contents by Rank Math (Rank Mathによる目次) ブロックを使用できます。

目次専用プラグインを使用すると、自動的に一括して目次を表示できますが、ランクマスのTOCブロックを使用する場合は、個々の記事に目次を追加する必要があります。 （必要に応じてカスタムコードを入れて、上部にランクマス目次を自動的に表示するように試みることはできます。）

目次ブロックを追加するには /ランクを入力して Rank Mathによる目次(Table of Contents by Rank Math)を選択します。

目次ブロックが追加されると、見出し項目を認識して表示します。

Table of Contents タイトルを好きなテキストに変更でき、タイトルラッパータグを付けることができます。

デフォルトではH2タグとして挿入されますが、H2は主題として主に使用されるため、pやDIVなどのタグに設定することも考慮できます。

各目次項目のテキストを変更でき、特定の項目に対して表示するかどうかを選択することもできます。

項目を区切るリスト記号（ブレット） ドット、数字、なし の中から選択することができます。

Rank Mathの目次は薄暗く表示できます。 CSSコードを使用して目次スタイルのデザインを変更できます。

たとえば、次のCSSコードを外観»カスタム»追加CSSに追加すると、モダンなダークスタイルの目次に置き換えることができます。

#rank-math-toc {
	background-color: #1e1e1e;
	border-left: 4px solid #5eead4;
	padding: 1.5em 1.2em;
	border-radius: 12px;
	color: #f5f5f5;
	font-family: 'Pretendard', 'Segoe UI', sans-serif;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease;
}

#rank-math-toc > div {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 0.8em;
	color: #5eead4;
	text-transform: uppercase;
}

#rank-math-toc nav ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

#rank-math-toc nav li {
	margin: 0.6em 0;
	position: relative;
	padding-left: 1.2em;
}

#rank-math-toc nav li::before {
	content: '▸';
	position: absolute;
	left: 0;
	color: #5eead4;
	transition: transform 0.3s ease;
}

#rank-math-toc nav li:hover::before {
	transform: translateX(4px);
}

#rank-math-toc nav a {
	color: #f5f5f5;
	text-decoration: none;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

#rank-math-toc nav a:hover {
	color: #5eead4;
	text-shadow: 0 0 4px #5eead4;
}

上記のコードを適用すると、次のようにTOCスタイルが変更されます。

明るいスタイルが必要な場合は、次のコードでテストできます。

#rank-math-toc {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	padding: 1.5em;
	border-radius: 16px;
	color: #2d3748;
	font-family: 'Pretendard', 'Helvetica Neue', sans-serif;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

#rank-math-toc > div {
	font-size: 1.2rem;
	font-weight: 700;
	color: #3b82f6; /* 밝은 블루 */
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#rank-math-toc nav ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
	counter-reset: toc-counter;
}

#rank-math-toc nav li {
	position: relative;
	padding-left: 1.6em;
	margin: 0.8em 0;
	counter-increment: toc-counter;
}

#rank-math-toc nav li::before {
	content: counter(toc-counter) '.';
	position: absolute;
	left: 0;
	color: #60a5fa; /* 연블루 */
	font-weight: 600;
}

#rank-math-toc nav a {
	color: #1e293b;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
	padding: 2px 4px;
	border-radius: 4px;
}

#rank-math-toc nav a:hover {
	background-color: #e0f2fe;
	color: #0c4a6e;
}

上記のコードを追加すると、次のようにTOCスタイルが変わります。

ランクマス目次展開/折りたたみ機能の改善

ランクマス文書」How to Add Rank Math's Table of Contents Block「目次をアコーディオン方式で折りたたみ/展開するようにする方法を紹介します。

Naver カフェ1人のユーザーが上記の記事に記載されているコードを適用すると、Chromeではうまく機能しますが、Microsoft Edge Browserと Naver ウェールブラウザではうまくいかないと教えてくれました。

ランクマス文書に提示された jQueryの コード部分を次のバニラJavaScriptに置き換えると問題が解決します。

<script>
        document.addEventListener("DOMContentLoaded", function () {
            var tocBlocks = document.querySelectorAll("div.wp-block-rank-math-toc-block");
            tocBlocks.forEach(function (block) {
                block.addEventListener("click", function () {
                    var nav = block.querySelector("nav");
                    if (!nav) return;

                    var isHidden = getComputedStyle(nav).overflow === "hidden";

                    nav.style.overflow = isHidden ? "visible" : "hidden";
                    nav.style.maxHeight = isHidden ? "100vh" : "0";
                });
            });
        });
    </script>

既存のジェイクエリコードは.css（）メソッドを使用してオーバーフローの状態を判断して切り替えましたが、これはインラインスタイルのみを読み込んで設定する方法なので、max-heightやオーバーフローが外部CSSで設定されている場合には正しく動作しない可能性があります。特にMicrosoft Edge（レガシー）では、getComputedStyleとjQuery .css（）の間に不一致が発生し、条件文が誤って評価されたり、navが隠されないなどの問題が生じた可能性が高いようです。

ランクマスドキュメントでは、コードを rank-math.php ファイルに追加するように指示していますが、この方法はそれほど好ましくないかもしれません。後でプラグインを更新すると、追加したコードが消えることがあります。

代わりに、上記のJSコードをWPCodeなどを使用してフッタ領域に追加できます。

GeneratePress テーマを使用している場合は、次の記事を参考にフッター領域に追加してください。

• GeneratePress テーマ：ヘッダーまたはフッター領域にコードを追加する方法

表示ルール（Display Rules） タブで投稿（投稿）にのみスクリプトを読み込むようにします。特定のカテゴリにのみ表示されるようにする Exclude（除外） オプションを使用すると、特定のカテゴリ文を除外することもできます。

参照

• WordPress TOCプラグイン：目次が表示されない問題が発生した場合の回避策
• クラウドウェイズのLightning Stackの導入により WordPress 速度10倍向上