みちなりに!WordPress,HTML,CSS,Webデザインの覚書を、忘れないよう日々メモするHP制作者のサイトHOMEWordPressWordPressプラグインSEO対策その他お問い合わせTOC+ウィジェットでサイドバーに目次を設置しCSSでカスタマイズWordPressTwitterFacebook0はてブ1Google+Pocket0LINEコピー2018.04.24文字数の多い記事の場合、サイドバーよりも記事が大幅に長くなることがあります。ブラウザでその記事を表示すると、サイドバーに何もない空間が生まれてしまうので、本文上に設置している目次をサイドバーのスクロール追従領域に固定表示させました。調理工程が多い料理のレシピを掲載したページなど、3番目の工程に戻って確認したい、などよくある事だと思います。そんな時、またトップに戻って目次をたどるより、サイドバーに固定された目次があるとすぐにたどれて便利ですよね。デフォルトでは若干わかりにくかったのでCSSでカスタマイズしました。Plus」を使っている場合、設置するのは簡単です。Plusは、投稿や固定ページに自動で目次を表示することができるWordPressのプラグインです。このプラグインを入れると、H1からH6までの見出し用のHTMLタグ...michinari.work2018.02.11このプラグインを使用する事で、サイドバーにも記事の目次を表示することが可能です。ウィジェットの「サイドバースクロール追従」領域に目次に設置すると、サイドバーの下に配置され、一定以上スクロールした後に、おもむろにピタッと止まって固定表示されます。する事で、記事の目的の内容に素早くたどり着けるためユーザビリティの向上を図ることができます。「TOC+」のウィジェットを「サイドバースクロール追従」へドラッグ&ドロップして保存します。カテゴリー別に表示させない設定など、細かい設定も可能ですが、デフォルトのままでも問題なく使えます。目次はこのように表示されます。スマホでは追尾サイドバーは表示されません。・・・そのはずが、カスタマイズ後スマホでも表示されてしまったので、このページの最後に非表示にするCSSを追記しました。Plus(TOC+)で作成した目次をサイドバーに表示すると、デフォルトで以下のように表示されました。TOC+のプラグインの設定で指定した色などは反映されず、「h2」も「h3」全て同じ条件で並んでいます。これではちょっと見にくいので、今回は以下のようにカスタマイズしました。※まずはサイト全体のリンク色を、使っているCocoonの設定画面で変更しておきました。目次をCSSでカスタマイズカスタマイズしたCSSのコードは以下の通りです。ジョブが5分以上無動作により再起動」でバックアップがとれず対策中WordPressのプラグイン「BackWPup」で定期的に自動バックアップをとっています。"https://michinari.work/wp-content/plugins/table-of-contents-plus/front.min.js-end");タイトルとURLをコピーしました。