SWELLでサイドバーに追従する目次ウィジェットを表示させる方法をご紹介します。
![サイドバーに追従する目次](https://ytechnote.com/wp-content/uploads/2023/08/14d89e7f7cdd5c0cab9b835b88310350.webp)
ウィジェットの「追尾サイドバー」を使います。
画面のスクロールに合わせて固定表示してくれる機能です。
追従する目次の設置手順
- ダッシュボードから、「外観」>「ウィジェット」を選択。
- ウィジェットパーツの【SWELL・目次】を「追尾サイドバー」に追加。
- ウィジェットのタイトルと配置を整える。
とても簡単、作業は1~2分で終わります。
目次
SWELL:追従する目次をサイドバーに追加する
STEP
ダッシュボード左メニューの「外観」>「ウィジェット」を選択します。
![外観のウィジェットへ](https://ytechnote.com/wp-content/uploads/2023/08/97cbba722e0a1020a9465c511104830b.webp)
STEP
ウィジェットの管理画面になります。
左側に並んでいるウィジェットパーツの中から【SWELL・目次】を見つけます。
![ウィジェットパーツのSWELL目次](https://ytechnote.com/wp-content/uploads/2023/08/6cf38b46a703a77d183a31c0424ef30a.webp)
↓
![SWELL目次](https://ytechnote.com/wp-content/uploads/2023/08/7527b0ef25d53993d9329da6373c277f.webp)
STEP
【SWELL・目次】パーツをクリックして配置メニューを展開し「追尾サイドバー」>「ウィジェットを追加」の順に選択します。
![目次ウィジェットを追尾サイドバーに追加](https://ytechnote.com/wp-content/uploads/2023/08/be1813e47e89407da23af10278acc871.webp)
STEP
サイドバーエリアの「追尾サイドバー」に目次が追加されます。必要ならタイトルの「目次」を編集したあとに「完了」をクリックします。
![目次ウィジェットの表示設定](https://ytechnote.com/wp-content/uploads/2023/08/6061a478782fab71620a4fcec96b5fdf.webp)
STEP
追尾サイドバーに他のウィジェットもある場合、必要ならドラッグ&ドロップで上下の配置を入れ替えることができます。
![ドラッグ&ドロップで上下配置の入れ替え](https://ytechnote.com/wp-content/uploads/2023/08/d3320c41ed0867cd23f8755f1a576af3.webp)
STEP
ウィジェットの設定は自動保存されます。終わったら実際の記事ページを確認しましょう。
![サイドバーに追従する目次が追加された](https://ytechnote.com/wp-content/uploads/2023/08/fa54c25952e621022818b1462c842134.webp)
END
お疲れ様でした。
ちなみに、追尾サイドバーはPC表示にしか対応していません。
スマホ(モバイル)表示でも追従する目次を使いたい場合は、固定目次ボタンがおすすめです。
関連≫ 【SWELL】画面右下に固定追従する目次ボタンを表示させる方法
以上です、最後までお読みいただきありがとうございました。
コメントをどうぞ