【WordPress超初心者向け】Cocoonで「目次」が表示されないとき（ブロックエディターGutenberg使用中）

WordPressで書くという行為にもだいぶ慣れてきたので、そろそろきちんとした形の記事を書こう！と思い、「目次」をつけようとしたのですが…

みごとにつまづいて３時間ぐらいかかってしまいました。

2018年12月、WordPressのメジャーアップデートによって記事を書く機能が大幅に変わりましたが、詳しく解説されたサイトが全くなかったためです。

ご参考になれば嬉しいです。

優れたテーマを生かすため、サーバーはエックスサーバー がおすすめ。

圧倒的に利用者が多いので、困ったときにネットで調べると情報がたくさん出てきて安心！
料金・機能面でも他社に劣るところがなく、サーバーも安定しています。

ほんと、ネット上に情報がたくさん出ているというのはとても重要です。
今回の事で学びました…

また、ブログを収益化するならA8.netとバリューコマースには登録しておきましょう。
A8は案件が多くて収益を上げている人のほとんどが利用していますし、バリューコマースはA8にない案件を扱っているので、まずはこの２つに登録すると良いですよ。

Cocoonは勝手に目次を作ってくれる！

なんと、Cocoonは「見出し」をつけて記事を書くだけで自動的に目次を作成してくれます。

超簡単！

３ステップで出来ます。

でもその前に…

WordPressの「ダッシュボード」を開きます。WordPressの一番最初に表示されるページです。

ダッシュボードの左側に項目が並んでいますが、その中ほどにある「Cocoon設定」（卵マーク）をクリック。

Cocoon設定ページが開き、「全体」「ヘッダー」「スキン」「広告」など、たくさんのタブが表示されるので、その中の「目次」タブをクリック。

上から２つめ「目次の表示」に、チェックマーク「✔」が入っているかを確認します。
入っていればCocoonが勝手に目次を作成してくれます。

（もともと✔が入っているので、今までに変更していなければ何もしなくてOKです。）

実際に目次を作ってみよう

では目次を作っていきましょう。

作っていきましょうと言いつつ、実際にはCocoonが勝手に作ってくれます。

Cocoonが「目次作ればいいんだな」と分かるように記事を書いていけばいいだけです。

３ステップで出来ます。

順番にいきましょう。

ステップ１：【H２見出し】を２つ以上使って記事を書く

【H２見出し】とは？

まず最初に、WordPressのあちこちで見かける「H２見出し」という言葉ですが、

たとえばこの記事だと、H２・H３・H４見出しは次の通り。

「Ｈ２見出し」の中に「Ｈ３見出し」があり、
「Ｈ３見出し」の中に「Ｈ４見出し」がある、という感じです。

※現在、Cocoonの『スキン』を使用中のため、見出しの見た目が少し変わっています。

Cocoonのデフォルト設定（もともとの設定）のままなら、Ｈ２～Ｈ６見出しとして書いた文字が自動的に目次に表示されます。

（「目次の設定」を確認した同じページで変更できます。）

H２見出しの作り方

簡単です。

1. 「一般ブロック」の中から「見出し」を選択
2. ブロックが見出しブロックに切り替わる
3. 【H２】が選択されている状態なのを確認して（黒く反転している）
4. 見出しにしたい言葉を書く

コーラルピンク（このブログの場合）になっている所に入力した文字が、【H２見出し】になります。

【H３見出し】【H４見出し】を作るには、その隣のアイコンを押せばOK。

【H５見出し】【H６見出し】を作るときは、右側のアイコンを押しましょう。

あとはこれを、目次を作りたいところで繰り返せばＯＫ！

ステップ２：プレビュー画面で確認

画面右上にある「プレビュー」ボタンを押して、プレビュー画面を見てみてください。

タイトルの下に表示されているはずです。

ステップ３：勝手に目次ができている！

私はここまで３時間かかったので、できた目次をみて感動しました。

　

目次のちょっとオシャレなカスタマイズ

カスタマイズというほどでもありませんが、
「目次」という日本語を英語「Contents」に変えると、ちょっとオシャレ度がアップします。

これもやり方は簡単。

先ほど取りあげた「目次の設定」ページにある『目次タイトル』に、
表示させたい言葉（「Contents」）を入れるだけ。

※忘れずに『変更をまとめて保存』ボタンを押してくださいね！

ついでに、読者が目次を「表示」させたり「非表示」させたりする際の表記も英語にするなら、
同じページの『目次切り替え』で設定します。

「表示」は「Show」、「非表示」は「hide」と入力します。

Cocoon＋Gutenbergのユーザー増えろ～！

Gutenberg（ブロックエディター）のリリースからずいぶん経ちますが、使っている人は依然として少ないようです。

あまりにも仕様が変わったので、書きにくいという人が多数。

プラグインで旧バージョン（クラシックエディター）に戻して書いている人や、リリース時に「書きにくい」という評価が多かったためにアップデートそのものをしていない人が多そうです。

私の場合はWordPress初心者すぎて、何も考えずにアップデートしてしまいました；

旧バージョンに戻そうかなとも思いましたが、

・いずれGutenbergしか使えない日がくる
・旧バージョンで記事を書き続けたとして、サービス終了時にGutenbergとの互換性が未知数

なので、Gutenbergを使っていくことに決めました。

というか、

超初心者なので旧バージョンだろうがGutenbergだろうが、使いやすさもへったくれもナイ。

というのが正直なところ。

どうせ何も分からないので、Gutengerg覚える方がお得です。わーい！

ご参考になれば嬉しいです。