【超簡単】ワードプレスの目次の自動生成、段落の数字設定変更【Cocoon】

ブログ

WordPressのテーマでCocoon使ってるけど、目次の変更方法ってどうやるの?

 

こんにちは、もぎです。

 

WordPressのテーマでCocoonを使用している方は、いくつか記事を書かれた中で何か気がつくことがありませんか?

そう!初期設定で目次が自動生成されるようになっていますよね。

今回はCocoonのテーマを初めて使う方に向けて、目次設定のあれこれをご紹介していきます!

目次を活用して、読者の方に見やすいブログ作成を意識しましょう!

 

目次の自動生成について

冒頭でもご紹介しましたが、Cocoonでは初期値として<h1>~<h6>の見出しについて目次を自動生成する設定になっています。
なので、これまで他のテーマを使用しており、目次を手動で作成していた場合に、目次が2つ表示されてしまうことになります。

今後、自動生成の目次をする場合は手動の目次を作成する必要がなくなりますが、自動で目次を作成し続けていく場合は自動生成の機能が不要になります。

今回は、Cocoonで目次を自動生成しなくするように設定していきます。

テーマの設定画面を開く

画面左側の「Cocoon設定」のメニューの中にある「Cocoon設定」タブをクリックします。

すると「Cocoon設定」画面が表示されます。

画面の上部にあるタブ一覧の中から「目次」タブをクリックします。

「目次」に関する設定画面が表示されます。

「目次の表示」項目から設定を変更する

目次を設定するか否かは「目次の表示」項目で設定できます。
表示をする場合は、「投稿ページ」および「固定ページ」、「カテゴリーページ」、「タグページ」のそれぞれについて表示の設定が可能です。

設定を変更できたら、画面上部もしくは下部にある「変更をまとめて保存」をクリックして設定完了です。

自分の投稿一覧を確認してみてください。
目次の表示がちゃんと変更されていましたでしょうか?

 

読者側で目次の開閉ができるように設定する

初期値では、ブログの読者側で目次の開閉を選択できます。

目次に「閉じる」というリンクが表示され、この「閉じる」を読者がクリックすると目次を閉じることができます。
反対に「開く」をクリックすると、閉じていた目次が再び表示されます。

「開く」、「閉じる」の文言も自身の好きな文言に修正できるのがわかりますね。

この表示切替の機能を無効にする場合は、「目次の切替機能を有効にする」のチェックボックスを外せばOKです。

 

どの見出しまで目次に含めるかを設定する

初期設定では記事の中にある見出しの中で、<h2>から<h6>までの見出しが自動的に目次になります。

ですがあまりに目次の階層が深く、多すぎると読者からしたら見づらくなってしまうこともあるかもしれません。

そこで階層の深さを設定することができます。

先ほどまでの画面、「目次表示の深さ」項目をクリックすると好きな見出しまで目次の深さを変更できます。

例えばh3まで表示するように変更したい場合、「H3見出しまで」を選択して「変更をまとめて保存」をクリックすればOKです。

目次に表示される数字の設定を変更する

数字が表示されないようにしたり、数字の表示の仕方を変更したりするには「目次ナンバーの表示」項目をクリックして、表示されるドロップダウンメニューから変更することができます。

「表示しない」を選択すれば数字の表示はなくなります。

「数字詳細」を選択すれば、目次が深くなるたびに『1』⇨『1−1』⇨『1−2−2』のように階層がわかるような表示になります。

 

目次設定のあれこれ まとめ

今回は目次の表示に関するあれこれについてご紹介しました。

ブログを始めたばかりの方は何もかもわからないことだらけかと思いますが、一つずつ覚えていきましょう!

少しでも読者の方に見やすいように、意識して作成できればアクセスも増えると思います。

色々模索しながら記事内容もレイアウトなどのビジュアル面も充実させていけたらいいですね!

 

それでは。

コメント

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