【SWELL】目次の設定で記事内の導線を整える～サイドバーに固定設置も可能～

目次の必要性と作り方のコツ

ブログ記事や書籍などでは「目次」を読むことで、全体を読まなくても大まかな構成・流れを把握することができるようになっています。

特に、目次と見出しがリンクで繋がっている「webページ」では、目次からクリック1つで目的のコンテンツにアクセスできます。

そのため、

• ユーザーが必要な情報にすぐ到達できる
• コンテンツ単位でのリンク共有が可能
  （記事のトップではなく、必要な見出し部分にピンポイントに遷移させることができる）
• 検索エンジンのクローラーがページ構成などを把握しやすくなり、SEOに繋がりやすい

という、目次を設置すべき理由や設置するメリットがあります。

近年では、スマホで閲覧するユーザーが増えているため、長い記事から必要な情報を素早くピックアップしてもらうためにも「目次」の設置は欠かせません。

目次作成のコツは、簡潔で的確なタイトル

目次＝見出しとなるタイトルには、コンテンツの内容を的確に表現したわかりやすいタイトルを設定します。

記事のターゲット層やキーワードにもよりますが、一般的に誰が読んでもわかりやすい簡単なフレーズを使うのが良いでしょう。

さらに、自サイトの記事に到達してもらうまでの対策（SEO）として、見出しには検索キーワードを入れます。

見出しの作成は、下記画像で簡単な事例を挙げてみました。

「情報を上手く整理して伝える」をポイントにすれば、あまり難しくはないかと思います。

上記の画像では、キーワードを考慮していませんが、実際の記事ではhタグをメインにキーワードを含めます。

最近であれば、たくさんの記事がネット上で閲覧できるので、見出しの付け方の参考にしてみても良いでしょう。

h1・h2などのhタグは、HTMLでマークアップする見出しタグです。これらのhタグの使い方にはルールがあります。使い分けをすることで、情報が伝わりやすくなりユーザビリティの向上に繋がるだけでなく、SEOにも繋がりやすくなります。

SWELL版：目次の設定とデザインカスタマイズ

それでは、実際にSWELLの「目次設定」を進めてみましょう。

1. 目次の表示・非表示設定

まずは、SWELLの投稿ページで「目次」の表示・非表示を設定しましょう。

投稿ページ全体に適応される設定は「外観」→「カスタマイズ」から可能です。

「投稿・固定ページ」の「目次」から目次の表示・非表示や基本的な目次の設定ができます。

目次の表示・非表示設定やタイトル・デザイン・リストタグの設定などができます。

目次のリストタグは「olタグ」に設定すると、1から順に数字で表示されます。

他にもいくつか設定項目がありますが、簡単に紹介します。

例えば「疑似要素（ドット・数字部分）のカラー」では、目次の数字やリストタグで「ulタグ」を選んだ場合の「・（ドット）」の色を変更できます。

「テキストカラー」「メインカラー」「カスタムカラー」の3パターンから選択できます。

下記画像は当サイトの「メインカラー」に変更した例です。

h3やh4タグが多い記事では、「どの階層の見出しまで抽出するか」や「目次の省略表示」の部分をサイトに合わせて変えても良いでしょう。

上記が投稿ページ全体に反映される設定です。

目次の表示・非表示は、各投稿ページからページ単位での設定もできます。

投稿ページで目次を非表示にする機会はあまりないかもしれませんが、参考までに紹介します。

2. 目次のデザインカスタマイズ

すでに上記で触れましたが、目次デザインも同カスタマイズメニューから設定できます。

「シンプル」「ボックス」「上下ボーダー」「ストライプ背景」の4種から目次のデザインを選べますので、お好みのものを選択しましょう。

「ボックス」や「上下ボーダー」のカラーは、メインカラーが反映されています。

さらにデザインにこだわりたい場合は、追加でCSSなどの記述が必要になります。

＼ 記事公開までの細かい設定がラクになる“SWELL”を試してみる ／

SWELL版：サイドバーに目次を表示（通常＆固定表示）

次に、先程表示設定をした「目次」をサイドバーに表示させてみましょう。

下記それぞれの事例を紹介します。

どちらも「ウィジェット」からすぐに追加できます。

• ウィジェットから一般的な「共通サイドバー」に追加
• ウィジェットから「追尾サイトバー」に追加（目次固定）

1. サイドバーに目次を設置する

まずは全投稿ページ・アーカイブページ（記事一覧ページなど）で共通のサイドバーに目次を追加する方法です。

「外観」→「ウィジェット」から「[SWELL]目次」をクリックし、「共通サイドバー」を選択します。

チェックしたら「ウィジェットを追加」をクリック。

タイトル未入力の場合は「目次」と表示されます。

変更の必要があれば、タイトルを入力し「完了」をクリックしましょう。

サイドバーに他にもウィジェットがある場合は、ドラッグで掲載位置の変更ができます。

実際のサイドバーで確認をし、表示されていればOKです。

2. スクロール時もサイドバーの目次を固定して表示する

サイドバーに追加した目次をスクロールしても常に表示させたい場合は、ウィジェットの「追尾サイドバー」を活用します。

今回もウィジェットから追加するので「外観」→「ウィジェット」から「[SWELL]目次」をクリックします。

「追尾サイドバー」を選択し、「ウィジェットを追加」をクリック。

共通サイドバー追加時と同様、必要に応じてタイトルを入力し「完了」をクリックします。

実際のサイトで確認すると、記事を読みながらスクロールしても「目次」が常に表示されています。

これで、確認したい場所に戻ったり、必要な場所だけを読んだりしやすくなります。

「追尾サイドバー」はパソコン表示でのみの機能になります。
スマホでも目次を表示させたい場合は、次に紹介する「目次ボタン」の設置が簡単です。

SWELL版：投稿ページに目次ボタンを設置

先程紹介したサイドバーへの「目次固定設定」はスマホでは表示されないため、スマホでも「目次」を表示させたい方向けに「目次ボタン」の設置手順を紹介します。

「外観」→「カスタマイズ」から「サイト全体設定」「下部固定ボタン・メニュー」の順に選択します。

「目次ボタンの表示設定」という項目があるので、表示・非表示を選択しましょう。

下記画像では隠れてしまっていますが、「目次ボタン下のテキスト」には「目次」と入力し、何のボタンかわかるようにしておきましょう。

表示の場合は、2パターンのデザインを選択できます。

ページトップへ戻るボタンも合わせて設定できますので、すでに表示させている場合は、上記画像のように2つのボタンが縦並びになります。

右下に表示される「目次ボタン」をクリックすると、モーダル形式で目次が表示されます。

目次ボタンをスマホだけで表示させたい場合（CSS追加）

という方向けに、投稿ページに設置した目次ボタンをスマホでのみ表示させる方法を紹介します。

「外観」→「カスタマイズ」の「追加CSS」に下記のコードをコピーして貼り付けます。

/*目次ボタンPC非表示*/
@media (min-width: 960px){
button#fix_tocbtn{
	display: none;
	}
}

SWELLの「ブレイクポイント」である960pxを超えた場合に、目次ボタンを非表示にするというコードを追加しています。

という方は、フッターカスタマイズの記事で簡単に触れていますので、参考にしてください。

上記のCSSを追加することで

• パソコン表示ではスクロールしても目次が固定表示される
  （パソコンでのみ表示される追尾サイドバーで目次表示）
• タブレット・スマホ表示では固定目次の代わりに目次ボタンが表示される
  （CSSの追加でパソコンで目次ボタンの非表示）

という感じに、どの媒体でもすぐに目次が確認できるようになります。

＼ クリックだけの簡単カスタマイズが多数の“SWELL”を試してみる ／

まとめ：SWELLの目次機能で記事内導線も簡単に設定できる

最後まで読んでいただきありがとうございます！

今回の記事では

1. 目次の必要性と作成のポイント
2. 目次の表示・デザイン設定
3. SWELL標準機能の目次ボタンの表示設定

以上、3点について解説させていただきました！

特に重要なポイントは、以下の3つです。

ブログサイトなどでSWELLを活用したい方の参考になりましたら幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください！