【期間限定 1/7(水) まで】エックスサーバー最大30%OFFキャンペーン実施中!

【SWELL非公式マニュアル】目次の設定

SWELLでは、記事中にある一つ目のH2タグの直前に目次を自動生成することができるようになっています。
この記事では、「目次」に関する設定について紹介します。

目次

\ 初心者におすすめ /

以下の3つを利用すると
最短最速でブログ収益化ができます

【レンタルサーバー】

エックスサーバー

【WordPressテーマ】

SWELL

【SEOツール】

ラッコキーワード

上記のリンクを選択すると、各サービスの詳しい記事に移動します。

カスタマイザーの起動

目次に関しては、カスタマイザー内の「投稿・固定ページ」>「目次」で設定できます。

カスタマイザーの「投稿・固定ページ」
SWELL公式サイト:カスタマイザーの「投稿・固定ページ」
「投稿・固定ページ」>「目次」
SWELL公式サイト:「投稿・固定ページ」>「目次」

目次のカスタマイズ方法

管理画面から「外観」>「カスタマイズ」>「投稿・固定ページ」>「目次」へと進むと、以下のような設定項目があります。

目次に関する設定項目
SWELL公式サイト:目次に関する設定項目

これらについて、順に説明していきます。

目次の表示設定

上2つのチェックボックスにて、「投稿ページ」・「固定ページ」のそれぞれで目次の自動生成機能を使うかどうかを設定できます。

ページごとに表示・非表示の上書き指定も可

例えば、カスタマイザーからは固定ページでの目次を非表示に設定していても特定のページだけ表示させたい、ということもあるかと思います。

そこで、記事ごと・ページごとに表示・非表示の設定を上書き指定ができます

エディターの右側に設定パネルをあるので、ぜひ使ってみてください。

記事ごとの目次の設定
SWELL公式サイト

目次のデザイン設定

カスタマイザーにて、「目次のデザイン」という項目と、「目次のリストタグ」という項目があります。

これらの設定の組み合わせによって、数種類のデザインパターンから好きな目次デザインを選ぶことが可能です。

目次の設定例

「シンプル」& 「olタグ」

目次の例01
SWELL公式サイト:「シンプル」& 「olタグ」

「ボックス」&「ulタグ」

目次の例02
SWELL公式サイト

「ストライプ背景」&「olタグ」

目次の例03
SWELL公式サイト:「ストライプ背景」&「olタグ」

「上下ボーダー」&「ulタグ」

目次の例04
SWELL公式サイト:「上下ボーダー」&「ulタグ」

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

目次リストの擬似要素部分(ulであればドット、olであれば数字)のカラーを「テキストカラー」「メインカラー」「カスタムカラー」から選べるようになりました。

SWELL – ver. 2.1.7から利用可能な機能です。

SWELL公式サイト:「カスタムカラー」使用例

表示する見出しの設定

どの階層の見出しまで抽出するか」では、目次として抽出する見出しの対象を「h2だけにするか」、「h3まで含めるか」を選べるようになりました。

その下の項目「見出しが何個以上あれば表示するか」では、抽出対象の見出しがいくつ以上あれば目次を設置するかをせってできるように。

SWELL – ver. 2.1.7から利用可能な機能です。

目次の直前に広告を表示させる方法

目次の直前に、広告を表示することも可能です。(広告でなくても、HTMLなども表示できます)

詳しくは以下のページで確認してください。

SWELL – ver. 2.1.7から、目次広告の位置を目次の「前」ではなく「後」にすることが可能になりました。

SWELL公式マニュアル:目次に関する設定

この記事を書いた「ブルー」です。
プログラマー×ブロガー
へなちょこシステムエンジニアが副業ブログで月収10万円を達成。エックスサーバー、SWELL、ラッコキーワードを使った稼げるブログを作る方法を解説します。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次