【SWELLテーマ】アーカイブページの目次抽出階層を調整する方法

SWELLテーマでは、目次をショートコードで簡単に表示できますが、デフォルトでは目次設定が全体に適用されます。

この記事では、アーカイブページに適した目次の見出し抽出階層を調整する方法を解説します。特に、H2までの見出しだけを表示させたい場合に有効です。

アーカイブページの目次にH2までの見出しのみを表示する

アーカイブページは、訪問者が目的の記事を見つけやすい構成が求められます。H3以降の見出しが多いと情報過多になりやすいため、H2見出しまでに絞る設定が有効です。この設定は、カスタム投稿タイプのアーカイブページで有用です。

ソース例

<main id="main_content" class="カスタム投稿タイプ名">

<style>
  .カスタム投稿タイプ名 .p-toc__list [data-level="3"] {
    display: none;
  }
</style>

<?php echo do_shortcode('[SWELLの目次を挿入するショートコード]'); ?>

</main>

class="カスタム投稿タイプ名"

カスタム投稿タイプのアーカイブページに適用するため、適切なクラス名を指定します。

.p-toc__list [data-level="3"]

SWELLテーマで生成される目次リストの中で、H3見出しの階層を非表示にします。

display: none;

対象の階層を非表示にするCSSプロパティ。

swell_toc

SWELLテーマが提供する目次ショートコード。記事の目次が挿入されます。

カスタム投稿タイプのトップページは、「archive-カスタム投稿タイプ名.php」です。カスタム投稿タイプ専用のファイルの適切な箇所に、カスタム投稿タイプ名のclassを記述します。

難易度

基本的なHTMLとCSSの編集が必要ですが、SWELLテーマの目次構造を理解していれば容易に実装可能です。初心者にとっては、クラスの設定やCSSの適用範囲の理解に少し手間取るかもしれません。

Q&A

まとめ

SWELLテーマのアーカイブページにおける目次抽出階層の調整方法について解説しました。

この方法を使うことで、訪問者にとって見やすい目次を提供し、ユーザビリティを向上させることができます。