サイドバーに追従目次を表示させる方法WordPressのCocoon

ブログを読んでいると、

サイドバーに目次がスクロールして、

ついてくるブログがあります。

これってあると便利ですよね?

この追従する目次の、WordPressでの設置方法です。

WordPressで、Cocoonのテーマを使っています。

サイドバーに追従する目次を設置する

WordPressで、テーマCocoonでの、

サイドバーに目次が追従してくれる設定です。

cocoon設定の目次タブで目次の設定を、

ウィジェットの目次設定で、追従する設定をします。

追従する目次があるといいこと

ちょっとしたことですが、

サイドバーに目次がついてくると、

けっこう下へスクロールする、長めの記事だと便利です。

サイドバーってなに?

ところで、サイドバーとは?

ブログを読んでいると、本文の右や左に、

縦のメニューなどがあるブログがあります。

これが、サイドバーです。

目次ってなに?

ブログ記事を書いていて、項目が増えてくると、

項目ごとの案内があると、読みやすくなります。

H2やH3などのタグを使って「見出し」を作って、

WordPressにある、「目次」機能を使うと、

自動で目次を作って、表示してくれるようになります。

 

 

目次の作り方

では、目次から作っていきましょう。

Cocoon設定にある「目次」タブの設定

サイドメニューのCocoon設定の、

目次タブから設定をおこないます。

上から、□にチェックを入れたり、

目次のラベルを入れたりして、設定していきます。

途中から下は、

表示の条件などの、設定になっています。

下の「変更をまとめ保存」をクリックして、

目次の完成です。

外観のウィジェットからの設定

サイドメニューの「外観」にある、「ウィジェット」へ行き、

サイドバーの追加をします。

「サイドバースクロール追加」そして、下の「ウィジェットを追加」です。

つぎは、「サイドバースクロール追従」の設定です。

「タイトル」と「目次表示の深さ」を決めます。

これで完成です!

プラグインでもできる「Easy Table of Contents」

もしも、使ているテーマに、目次機能がなかったら、

プラグインを使って、作ることが可能です。

プラグインは、たくさんありますが、

「Easy Table of Contents」を使っていたことがあります。

目次を作るにあたって注意するといいこと

見出しタグの付け方

記事のタイトルが、H1になるので、

記事の見出しは、H2から始めると良いです。

見出しには、階層があるので、

H2、H3、H4、あたりの順番に気をつけましょう。

階層は、こんな感じです。

H1 タイトル

-H2 ○○○○

ーーH3 ○○

ーーーH4○○

-H2 ○○○○

ーーH3 ○○

ーーH3 ○○

ところで、見出しってなに?

雑誌や本にある、表題や項目と同じで、

その項目の内容の、わかりやすい案内のこと。

記事の整理ができます。

見出しタグの表示の深さ

デフォルトでは、すべての見出しを、

表示する設定になっています。

ここを、H3あたりまでにしておくと、

ちいさい画面のパソコンなどでも、

目次が、画面からはみださないようです。

※目次の数にもよりますが、目次が多い場合だと、

下のほうが切れてしまうときがあるようです。

まとめ

 

 

わりと長い記事が書けるようになってきて、

目次があったら便利かな?

そして、迷子にならないように、

サイドメニューにも、あったら便利かも?

ということで、作ることにしました。

お役に立てるとうれしいです。

 









 

 

あわせて読んでみる

 

WordPressブログはムームードメインとロリポップがおすすめ

 

ブログを始めるなら中古のパソコンで予算も抑えられて良き。

 

タイトルとURLをコピーしました