ブログの簡単カスタマイズ!【WordPress/ワードプレス】Cocoonでできる「目次をサイドバーに表示して自動追尾する設定」をしてみました!

WordPress

今回の記録はWordPressの無料テーマ「Cocoon」の設定でできるブログカスタマイズで「サイドバーに目次を表示してスクロールに対して目次が自動追尾(サイドバーに固定される)する設定」をしてみようと思います。ブログ初心者でも簡単にできてユーザーにも見易くなり分かり易くなるカスタマイズなのでおすすめです!

目次をサイドバーに表示して追尾させる?

私の場合記事ページのサイドバーは上からプロフィール、Twitter関連、検索、カテゴリー、新着記事の順で表示してあります。

そして、記事を読むために画面をスクロールしていくと最後に目次が現れて、

目次がサイドバーの一番上にくると、


サイドバーに目次が固定されて記事部分のみだけがスクロールされフッターまで辿り着きます。
分かりやすくするために画像の目次を赤字で囲んでみたのですが…

ブログにスクロール動画を載せる方法はまた調べるとします。

ウェジェットから設定していきます

WordPressのホーム画面、左側の項目の外観の中にあるウェジェットからサイドバースクロール追従を開きます。

サイドバースクロール追従の項目を開くとはじめは何も入っていない状態なので、ここに左側の項目から【C】目次を追加します。ドラッグ&ドロップでいけます。

最後に目次の設定をします

サイドバースクロール追従の中に【C】目次を入れたら【C】目次を開いてタイトル目次表示の深さを設定します。目次深さの設定とはH2以降どの階層(深さ)まで目次を表示するかなのでお好みでOKです。私はH3まで表示する設定にしてあります。

目次の設定をして最後に左下の「完了」をクリックすると全ての設定が完了しサイドバーに固定される目次の表示が完成です!

まとめ

今回は「サイドバーに目次を固定する設定」をしてみました。この設定もブログ初心者の私でも簡単にできました!ブログ初心者が簡単にできるというのはWordPress(ワードプレス)やCocoon(コクーン)がより使いやすく作られているかという部分かと思います。プログラミングの知識が無くてもブロック感覚で組み立てられるWordPressのウェジェット操作や、選んで簡単に設定できるCocoonの仕組みはとてもわかりやすく使いやすいのでブログ初心者にはおすすめかと思います。まだわからない設定や機能はたくさんあると思うのでユーザーに分かりやすく、使いやすいブログにするためのオススメ機能や設定が出てきたらまた紹介させて頂こうと思います!

WordPress
シェアする
mato.netをフォローする