※本記事はアフィリエイト広告を含む記事へのリンクを含みます。
記事が長くなってきて、「目次を入れて読みやすくしたい」と思っていませんか。私は以前、SWELLに目次用のプラグインを追加してしまい、記事の中に目次が2つ表示されるという失敗をしたことがあります。
この記事では、SWELLの目次を設定する方法を初心者向けにわかりやすく解説します。実際に目次の設定を見直してきた体験も交えるので、読みながら進めれば、プラグインなしで見やすい目次を表示できます。
※これからSWELLを導入する方へ:SWELLは買い切り型のWordPressテーマで、追加費用の心配がありません。この記事を見ながら進めれば、初心者でも迷わずおしゃれなブログを作れます。
デザインに悩む時間を減らして、記事作りに集中できます。
ニャフィ記事に目次を入れるには、どうすればいいのかにゃ?



長い記事ほど、目次があると読みやすくなりますよね。



プラグインを入れないとダメなのか心配だにゃ…



SWELLだけでできる設定手順を、5つに分けて解説しますね。


SWELLの目次機能とは


SWELLには、記事の見出しから自動で目次を作る機能が最初から備わっています。設定をオンにするだけで、すべての記事に目次を表示できるのが魅力です。
筆者はこの機能を知らずにプラグインを追加し、目次が重複して表示される状態になりました。SWELLを使うなら、目次用のプラグインは基本的に不要と覚えておきましょう。
プラグインなしで目次を表示できる
SWELLの目次は、テーマの機能だけで動いています。プラグインを増やさずに済むので、サイトの表示速度や管理の手間にもよい影響があります。
読者が知りたい情報にすぐ移動できる
目次があると、読者は知りたい見出しをクリックするだけでその場所へ移動できます。記事の全体像も先に伝わるので、最後まで読んでもらいやすくなります。
SWELLの目次を設定する方法


目次の設定は、カスタマイザーからまとめて行えます。記事ごとの細かな調整も可能なので、ブログの運営スタイルに合わせて使い分けられます。
筆者はAFFINGER6を使っていたころ、目次の表示にプラグインを使っていました。SWELLに移ってからはテーマの設定だけで済むようになり、プラグインの更新管理もひとつ減って楽になったと感じています。
目次に表示する見出しの階層を決める
目次には、H2だけを表示するか、H3まで含めるかを選べます。記事が長い場合はH2とH3までにすると、読者が全体をつかみやすくなります。
記事ごとに表示を切り替えられる
お知らせ記事など目次が不要なページでは、記事の編集画面から目次を非表示にできます。記事の内容に合わせて柔軟に調整できるのが便利です。
管理画面の「外観」→「カスタマイズ」を開き、投稿・固定ページの設定から目次の項目を選びます。プレビューを見ながら設定できるので安心です。
投稿ページや固定ページで目次を表示する設定をオンにします。目次のタイトルも変更できるので、「この記事の内容」など好みの言葉にしてみましょう。
目次のデザインや番号の付け方を選びます。サイト全体の雰囲気に合わせて、シンプルで読みやすいものを選ぶのがおすすめです。
目次に含める見出しの階層と、目次を表示するのに必要な見出しの数を設定します。見出しが少ない記事では目次が出ないこともあるので、数字を確認しておきましょう。
設定を公開したら、記事を開いて目次が正しく表示されるか確認します。筆者は短い記事で目次が出ず焦りましたが、見出しの数の条件が原因でした。
目次をもっと活用するコツ


目次は表示するだけでなく、見出しの書き方や置き場所を工夫することで、さらに役立つ存在になります。読者が迷わず目的の情報へたどり着ける目次を目指しましょう。
筆者は以前、見出しを長い文章にしていたせいで、目次がぎっしり詰まって読みにくくなっていました。見出しを短く、内容がひと目でわかる言葉に変えたところ、目次からのクリックが増えたと感じています。
見出しを短くわかりやすくする
目次には、記事の見出しがそのまま並びます。見出しを短く具体的にすると、目次を見ただけで記事の内容が伝わるようになり、読者が読み進めやすくなります。
追尾サイドバーに目次を置く
SWELLでは、目次のウィジェットを追尾サイドバーに置けます。スクロールしても目次が表示され続けるので、長い記事でも読みたい場所へすぐ移動できます。
読まれる目次のポイント
- 見出しが短く、内容がひと目でわかる
- 表示する見出しの階層が多すぎない
- 目次用のプラグインと重複していない
- 長い記事では追尾サイドバーにも置いている


よくある質問


【ここまで読んでくださった方へ】:SWELLなら、ブロックエディターで直感的に記事を装飾でき、初心者でもすぐに見やすいブログが作れます。
買い切り型なので、一度購入すれば長く安心して使い続けられます。
まとめ
SWELLの目次は、プラグインなしでカスタマイザーからまとめて設定できます。表示する見出しの階層やデザインを整えれば、読者が目的の情報へすぐたどり着ける記事に仕上がります。
目次が重複して失敗した筆者のおすすめは、SWELLの目次機能だけを使い、見出しを短くわかりやすくすることです。まずは目次の表示をオンにして、記事での見え方を確認してみてください。



目次がきれいに表示されたにゃ!



お疲れさまでした!記事がぐっと読みやすくなりましたね。



ほかのテーマの機能も比べてみたいにゃ!



おすすめテーマをまとめた記事もぜひどうぞ。


おすすめ記事
-
SWELL


SWELL会員サイトにログインできない時のパスワード再設定方法
-
SWELL


SWELLで画像がぼやける原因と対処法|くっきり表示するコツ
-
SWELL


SWELLでスマホの表示崩れを確認する方法と直し方
-
SWELL


SWELLでプラグイン競合による表示崩れの原因と対処法
-
SWELL


SWELLのエディタとプレビューで表示が崩れる原因と対処
-
SWELL


SWELLのブロック一覧が表示されない時の原因と対処法
-
SWELL


SWELLのカスタマイザーが反映されない時の原因と対処法
-
SWELL


SWELLのアップデート後に表示崩れした時の原因と対処法
-
SWELL


SWELLで追加CSSを追加する方法と反映されない時の対処
-
SWELL


SWELLで構造化データを設定する方法と確認のコツ
-
SWELL


SWELLでnoindexを設定する方法と注意点
-
SWELL


SWELLでOGP画像を設定する方法と反映されない時の対処










コメント