SWELLテーマで、ページの右下に追従する固定の目次ボタンを表示させる方法です。
四角型と丸型の2パターンから選べます。
![SWELLの固定目次ボタンの例](https://ytechnote.com/wp-content/uploads/2023/08/eee8ed82c95c56cb93b312e4779f7084.webp)
本文にある目次はページ先頭のほうにあるので、画面をスクロールして戻ったりサイドメニューをたどったりするのは面倒なときもあります。
追従してくれる目次ボタンがあると、いつでも簡単に目次が確認できるので読者のユーザビリティが良くなります。
![目次ボタンの展開例](https://ytechnote.com/wp-content/uploads/2023/08/cd1133d1c7893959b7e2480e2377930f.webp)
目次
SWELL:追従する固定目次ボタンを表示させる方法
固定目次ボタンを表示させる手順は、
手順
- カスタマイズ画面を開く。
- 「サイト全体設定」を選択。
- 「下部固定ボタン・メニュー」を選択。
- 「目次ボタンの表示設定」で「表示する」に変更。
となります。画像を使って解説していきます。
STEP
上部管理メニューの「カスタマイズ」をクリックします。
![WordPressのカスタマイズへ](https://ytechnote.com/wp-content/uploads/2023/01/WordPressのカスタマイズへ.webp)
STEP
カスタマイズモードになるので「サイト全体設定」を選択。
![サイト全体設定へ](https://ytechnote.com/wp-content/uploads/2023/08/d744bc518efd1d797948527f7f0421cc.webp)
STEP
「下部固定ボタン・メニュー」を選択します。
![下部固定ボタン・メニューへ](https://ytechnote.com/wp-content/uploads/2023/08/7a6405bf8593f4adbd157962bca1dfe6.webp)
STEP
「目次ボタンの表示設定」が初期状態だと「非表示」になっているので、四角形か円形どちらかの「表示する」に切り替えます。
![目次ボタンの表示設定](https://ytechnote.com/wp-content/uploads/2023/08/dc49be798ce277255dd88ef71807e77f.webp)
↓
![目次ボタンの表示設定を変更する](https://ytechnote.com/wp-content/uploads/2023/08/dd9b1204ad3c1b69195804fff2e06024.webp)
STEP
最後に「公開」でカスタマイズを反映させ、「×」か「<」で作業完了です。
![カスタマイズを反映させる](https://ytechnote.com/wp-content/uploads/2023/02/3d6c5718e672821e26999dedfcc01406.webp)
END
ちなみに「目次ボタン下のテキスト」に文字を入力するともっとわかりやすくなるので、お好みでアレンジしてみてください。
![目次ボタン下のテキスト記入例](https://ytechnote.com/wp-content/uploads/2023/08/58da0236bcb8be70a121b90e185a29c3.webp)
また注意点として、文字ボリューム(見出し)が少なく本文の目次が生成されないようなページでは目次ボタンも表示されません。
非表示に戻すときは、同じ流れで設定変更を行えばOKです。
以上です、最後までお読みいただきありがとうございました。
コメントをどうぞ