SWELL カスタマイズ【目次の設定方法】基本設定・デザイン設定・CSSでちょっとおしゃれに！

当ページのリンクには広告が含まれています。

2025年1月7日

14670_swell-customize-table-of-contents-3

SWELLのカスタマイズ【目次の設定方法】基本設定・デザイン設定・CSSでちょっとおしゃれにする方法をご紹介します。

SWELLは、初心者さんでも簡単に目次を作成できる便利な機能が充実しています。

ちょっとしたカスタマイズで、さらに見やすく、デザイン性の高い目次を作れることをご存じですか？

この記事では、SWELLで目次を設定する「基本手順・デザイン・機能の調整方法」まで、分かりやすくご紹介します。

サイトの印象をグレードアップしつつ、ユーザーにも優しい目次作成にチャレンジしましょう！

こんな方におすすめ！

目次をもっとおしゃれに見せたい
使いやすい目次を作りたい
初心者だけど目次をカスタマイズしたい
サイトの印象をアップさせたい

このガイドで、あなたのサイトにぴったりの目次を作りましょう！

この記事でわかること！

SWELLの目次機能とは？
目次の基本設定（カスタマイザー）
デザインの設定
サイドバーやウィジェットでの目次表示方法
CSSを使った細かな調整方法（初心者でも使える簡単な例）
目次広告の表示設定
便利な目次機能の活用ポイント
まとめ！

それではご覧ください。

目次 "Contents"

SWELLの目次機能とは？

SWELLの目次機能は、テーマに標準装備されているため、追加のプラグイン不要です。
デフォルト設定では、投稿ページを作成すると自動的に目次が生成されるため、手間なく目次を追加できます。

目次を設置するメリット

記事全体の構成が一目で分かり、目的の情報をスムーズに探せます。
内部リンクが強化され、検索エンジンに対しても高評価につながります。
読者が記事内で迷わず情報を見つけられるため、滞在時間が増えます。

目次の基本設定（カスタマイザー）

目次の基本設定はカスタマイザーで行います。

カスタマイザーで行った設定はサイト全体の初期値になります。後述しますが、各ページ（投稿・固定）のエディター画面で個別に目次の表示設定が可能です。

カスタマイザーで設定できる設定概要は以下です。

目次の基本設定（カスタマイザー）

目次を表示するかどうか
- 投稿ページと固定ページでの目次の表示設定
目次のタイトルやデザイン
目次の表示条件
表示する見出しの階層設定

それでは順番に見ていきましょう。

カスタマイザーの起動手順

以下の手順でカスタマイザーを起動します。

Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

以下の手順で『目次』の詳細設定画面を開きます。

『投稿・固定ページ』をクリック

『目次』をクリック

『目次』の詳細設定画面が表示されます。

設定項目は以下の通りです。

目次

目次の詳細設定です。

目次を表示するかどうか

投稿ページに目次を表示
- ON（デフォルト）
固定ページに目次を表示
- OFF（デフォルト）

目次のタイトル

目次（デフォルト）

目次のデザイン

以下のメニューから選択できます。

をクリック

ストライプ背景（デフォルト）

目次のリストタグ

「olタグ・ulタグ」から選択できます。

olタグ（デフォルト）

擬似要素(ドット・数字部分)のカラー

以下のメニューから選択できます。

をクリック

テキストカラー（デフォルト）

どの階層の見出しまで抽出するか

以下のメニューから選択できます。

をクリック

h3（デフォルト）

見出し何個以上で表示するか

2（デフォルト）

目次の省略表示

以下のメニューから選択できます。

をクリック

指定の数を超えた分を省略する（デフォルト）

項目が何個を超えると省略するか

15（デフォルト）

開くボタンのテキスト

もっと見る（デフォルト）

閉じるボタンのテキスト

折りたたむ（デフォルト）

目次広告の表示設定

目次広告の位置

以下のメニューから選択できます。

をクリック

目次の前に設置する（デフォルト）

目次がなくても広告を表示するかどうか

投稿ページで表示する
- ON（デフォルト）
固定ページで表示する
- OFF（デフォルト）

デザインの設定

この章では、目次のデザインについて、サンプル画像を用いて詳しくご紹介します。前章で解説したカスタマイザーの設定項目が、どのように目次のデザインに反映されるかを具体的に確認していきましょう。

タイトル名の変更や抽出条件に関しては、割愛します。

目次のデザイン

目次の基本デザインは、「ストライプ背景・シンプル・ボックス・上下ボーダー」の4種類です。

⒈ 目次デザイン：ストライプ背景（デフォルト）

背景に薄いグレーのストライプ、上下に薄いグレーに2重線が表示されます。

2. 目次デザイン：シンプル

薄いグレーの枠で囲まれ、タイトルは左寄せになり、破線でタイトルが区切られます。

⒊ 目次デザイン：ボックス

キャプションボックスと同じ表示になります。（タイトルの帯と枠は、メインカラーで表示されます）

メインカラーを青色に変更すると以下のようになります。

メインカラーの変更方法がわからない場合はこちらをご覧ください。

⒋ 目次デザイン：上下ボーダー

上下にメインカラーのボーダーラインが表示されます。

メインカラーを青色に変更すると以下のようになります。

メインカラーの変更方法がわからない場合はこちらをご覧ください。

以上の4種類からサイトの適した目次のデザインを選択しましょう。

目次のリストタグ

目次のリストタグは、olタグ（番号付きリスト）と ulタグ（箇条書きリスト）のどちらかを選択して使用できます。

目次のリストタグ：olタグ（デフォルト）

olタグの色（青）は見やすいようにカスタマイズしています。

目次のリストタグ：ulタグ

ulタグの色（青）は見やすいようにカスタマイズしています。

以上の2種類からサイトの適した目次のリストタグを選択しましょう。

擬似要素(ドット・数字部分)のカラー

olタグとulタグは擬似要素の色を変更することができます。
「テキストカラー・メインカラー・カスタムカラー」を選択でき、カスタムカラーではカラーパレットから選択できます。

擬似要素(ドット・数字部分)のカラー：カスタムカラーで色を変更（青）

目次開閉ボタンのテキスト

目次の省略表示を設定して、項目を超えた場合に省略することができます。その時に表示される開閉ボタンのテキストを任意に設定できます。

項目の省略条件に関しては割愛します。
SWELLの目次は全閉はできません。

開くボタンのテキスト：もっと見る（デフォルト）

閉じるボタンのテキスト：折りたたむ（デフォルト）

目次の表示領域を狭くしたい場合は、目次の省略条件を調整してみましょう。

osaboo

抽出や表示条件はデフォルトがおすすめです。

サイドバーやウィジェットでの目次表示方法

目次のウィジェット機能を使ったサイドバーへの表示や他のエリアへの設置方法は以下の記事を参考にしてみてください。

以下の記事で、「投稿・固定ページの個別表示設定」をご紹介しています。
→ ページごとに目次を表示・非表示させたい方は、ぜひご覧ください。

osaboo.com

SWELL 目次のウィジェット機能【目次を一瞬でサイドバーに表示できる優れもの】 SWELLの目次ウィジェット機能を徹底解説！サイドバーに一瞬で目次を表示できる便利な機能！！ユーザー体験を向上させ、SEO効果も期待できます。初心者でも簡単に設定可能！

以下に記事は、目次の基本的な設定が全て完了してから試してみてくださいね。

osaboo.com

SWELL カスタマイズ【追尾サイドバーの目次をハイライトする方法】目次をちょっと見やすく！ SWELLのカスタマイズで追尾サイドバーの目次をハイライトする方法をご紹介。目次をちょっと見やすくするカスタマイズです。閲覧時に記事の「どこを読んでいる？」「今どの辺？」「あとどれだけ？」などを解決してくれるカスタマイズです。

CSSを使った細かな調整方法（初心者でも使える簡単な例）

SWELLの目次機能は、カスタマイザーで基本的なデザイン調整が可能ですが、さらに細かいカスタマイズをしたい場合は、CSSを使用することでより自由度の高いデザインを実現できます。この章では、初心者でも簡単に試せるCSSカスタマイズの例をいくつか紹介します。

osaboo

目次をちょっとみやすくしたい方向けです。

完成イメージは以下のようになります。
olタグとulタグでは、適用するCSSコードが異なるため、必要な部分を抜粋してカスタマイズするのがおすすめです。それぞれの特徴に合わせてコードを調整し、効率的にデザインをアレンジしましょう。

注意コードは、リストブロックの目次風スタイルにも適応されます。

「この章でご紹介するすべてのコードをコピペすると以下のサンプルが出来上がります」

目次のリストタグ：olタグ

目次のリストタグ：ulタグ

目次タイトルのスタイルを変更する

目次のタイトルの「太字・フォントサイズ・文字色・余白」を変更するコードです。

/* 目次のタイトルを調整 */
.p-toc__ttl {
font-weight: bold;/* 太字 */
font-size: 19px; /* フォントサイズ */
color: #578fbf; /* 文字色 */
padding: 10x; /* 内側の余白を設定 */
}

目次のリスト（h2）を変更する

目次のリスト（h2）の「太字・フォントサイズ・文字色」を変更するコードです。

/* 目次のリスト（h2）を調整 */
.p-toc__list li {
font-weight: bold;/* 太字 */
font-size:17px;/* フォントサイズ */
color:#999999;/* 文字色 */
}

目次のリスト（h3）を変更する

目次のリスト（h3）の「太字・フォントサイズ・文字色」を変更するコードです。

/* 目次のリスト（h3）を調整 */
.p-toc__list li li {
font-weight: normal;/* 細字 */
font-size:15px;/* フォントサイズ */
color:#666666;/* 文字色 */
}

ulマーカー（h3）を「-」に変更する

ulマーカー（h3）を「-」に変更するコードです。

/* ulマーカー（h3）を「-」に変更 */
ul.is-style-index li li::before {
border-bottom: solid 2px;
border-left: solid 0px;
margin-left: 0px; /* 左の余白を調整 */
}

olマーカー（h3）を「アイコン」に変更する

olマーカー（h3）を「アイコン」に変更するコードです。

/* olマーカー（h3）を「アイコン」に変更 */
ol.is-style-index ol > li::before {
font-family: "Font Awesome 6 Free";
content: "\f0da";
font-weight: 900;
margin-right: 5px;
border-right: solid 0px
currentColor;
}

/* olマーカー（h3）を位置調整 */
ol:not(.is-style-default)[class*=is-style-] ol, ol:not(.is-style-default)[class*=is-style-] ul, ul:not(.is-style-default)[class*=is-style-] ol, ul:not(.is-style-default)[class*=is-style-] ul {
padding-left: 0;
list-style: decimal;
}

olマーカー（h3）を「アイコン」に変更するコード（上）では、Font Awesomeを使用するため、以下の設定をする必要があります。

デフォルトでは、Font Awesomeの読み込まない設定になっているので注意しましょう。

Menu『WordPress管理＞ダッシュボード＞SWELL設定』をクリックします。

Font Awesomeタブを選択して、『CSSで読み込む』と『v6』のラジオボタンを『ON』にします。

osaboo

ご紹介したコードのカラーナンバーやフォントサイズを変更するなどして、調整してくださいね。

目次広告の表示設定

目次広告の表示設定では、目次の「直前・直後」に広告やHTMLなどを表示させることができます。

osaboo.comosaboo

SWELL 目次広告の表示設定｜設定手順をわかりやすく解説「初心者必見！」 SWELLの目次広告の表示設定をご紹介。目次の前後にGoogleアドセンス広告やHTMLコードを簡単に設置する方法を解説。初心者さんにわかりやすい手順と画像を使ってご紹介します。

便利な目次機能の活用ポイント

SWELLの目次機能を最大限に活用することで、サイトの使いやすさやSEO効果をさらに高めることができます。

この章では、便利な活用ポイントをいくつか紹介します。

自動生成の設定とカスタマイズの違い

SWELLでは、目次がデフォルトで自動生成されるため、記事を書くだけで目次が挿入されます。初心者には便利な機能ですが、場合によってはカスタマイズが必要です。

自動生成のメリット
- 記事の見出しを元に目次を自動的に作成するため、設定に時間をかけずに記事を公開できます。特に短い記事や情報がシンプルな投稿では、自動生成で十分対応できます。
カスタマイズのメリット
- 長文記事や複雑な構成の記事では、見出しの順番を調整したり、特定の見出しを目次から外したりすることで、読者がより使いやすい目次を作ることができます。