目次をプラグインなしでやりたい人「ブログテーマをJINで作り始めてだいぶ経過したけど、現在はプラグインでRich Table of Contents（以下RTOC）の自動目次生成を思考停止で使ってます。コロブさんのブログ見て、できれば「SEO的にはHTMLでコード書いて作成したら良い」と書いてあったけどどうやるの？」
こんにちは！あいうえおLIFE（@pledge17uchs）です。
今日はこんな疑問に答えていきます。
本記事の内容
- WordPressで目次をプラグインなしで手作りするメリット
- WordPressで目次をプラグインなしで手作りするデメリット
- 目次をプラグインなしで手作りするやり方とテンプレート
あいうえおLIFEの «NOTEや «YouTubeもありますので是非そちらも見てくださると励みになります。
本記事の信頼性
- この記事を書く僕は、かなりのノウハウコレクターでありまして、コロブさんのブログやマナブさんのブログをよく読んでいて、記事の生産量が追いついていないながらも、どうしたらSEO評価上がるかを研究しています。
もくじ
ぼくは記事をブロックエディタで書いていますが、19記事100万ブロガーのコロブさんの記事を見てテンプレートを作って、記事を書くようになりました。
テンプレートを作らずに、書いている人は1度こちらのコロブさんの記事をどうぞ。
最後に、手作りの目次作成の手順とテンプレートを掲載したので、必ず最後までお読みください。
WordPressで目次をプラグインなしで手作りするメリット
cocoonユーザーは考えずとも、自動生成されていて、JINや他のテーマに関しては、自動生成できないので、RTOCのプラグインでやっているのではないでしょうか？
WordPressで目次を手作りできるメリットを下記で詳しく解説します。
1-1：目次から見出しへ飛ぶコードの書き方の理解ができる
RTOCプラグイン入れとく→自動でできるので、目次をポチると思考停止で見出しへ飛ぶっていう感覚ですが、それを脱却できるはず。
HTMLのaタグのリンク元作りと、IDタグをつけることの構成が理解できるようになります。
1-2：あるあるな目次じゃないので目をひくデザイン
この目次デザインはかなり見受けるようになりましたね。
無料でこのクオリティはヤバすぎです。。
手作りで目次作成している人自体が少ないので、珍しく思われること間違い無いです。
1-3：Google先生がキーワード拾いやすくなる
手作り目次でaタグ使って、href属性を用いながら、IDを書いて、H2やH3見出しにIDを指定してそろえて書くことで、Google先生のSEO評価も上がると、コロブさんも語られていました。
HTMLをしっかりと書いてあげると、言語が通じるように、Google先生とコミュニケーションがスムーズにいくんだと思います。
WordPressで目次をプラグインなしで手作りするデメリット
この辺は何を基準にするかによります。
ブロックエディタは確かに、直感的でわかりやすいのですが、肝心な部分は手書きできるようになりたいですよね。
そのなかでも、WordPressで目次を手作りするデメリットを下記で3つあげてみます。
2-1：ある程度HTMLの知識や慣れがないとしんどい
はじめは目次と見出しがリンクするテンプレートだけ見ても「なんのこと？」「もうやめよっかな」ってなるくらい難しく感じる。
「ol」と「ul」の違い、「li」って何？っていうのが理解できないとチンプンカンプンになります。
「ol」は順序を指定する箇条書きで、「ul」は順序指定しない箇条書きです。
前者は、１、２、３、４のように「li」でリストが順序記号ついて増えていき、後者は、●、●、●のように「li」でリストを丸ポチのようにふやしていくことができます。
2-2：読者に困ることはない
シンプルに見やすくなるので、知りたいことがあるかないか判別しやすい。
おしゃれすぎると、逆に内容よりもデザインに目がいってしまうことが多いのでは無いでしょうか？
そうなると、内容を読み飛ばされる可能性があります。
2-3：Google先生は嫉妬するかもしれない
HTMLコードをしっかり綺麗に書いてWeb制作している人がGoogle先生は好きになるかもですが、好きすぎて逆に嫉妬してしまうかも。
あれだけすごいアルゴリズムを持っているからこそ、人間みたくGoogle先生もツンデレの要素をお持ちでしょう。
嫌われるくらい、SEO評価好かれてみたいものですね。
目次をプラグインなしで手作りする手順とテンプレート
時間がない方は、ここから作業してもらうと、手作りで目次作成できると思います。
ぼくはすでに、RTOCのプラグインを削除してしまいました。
詳しく解説します。
3-1：ブロックエディタでカスタムHTMLを使用して目次作成
- 記事の場所で、目次を入れたい位置に、ブロックエディタで＋ボタンを押して呼び出していきます。
- カスタムHTMLのブロックをつくり、そこにHTMLコードを書きます。
- コピペOKなので、HTMLコードをペーストして、サンプルの目次内容を記事内容に合わせて編集します。
3-2：各見出しaタグとIDをそろえる
- 対象の見出し（H2やH3）の場所で、HTML編集を呼び出す。
- HTML編集可能になるので、H2タグやH3タグのあとに、id=” “を指定していく。
- 例：「目次の大見出し1」の「a href=”#a1″」と、「本文の大見出し1」の「H2 id=”a1″」と一致するように編集していきます。
3-3：目次と見出しのHTMLはこれ
〜もくじのテンプレート〜- <strong>Contents</strong></p>
- <ol>
- <li><a href="#a1">大見出し1つ目（ダイエットが失敗する3つの理由</a>
- <ul>
- <li><a href="#a2">1-1見出し3</a></li>
- <li><a href="#a3">1-2見出し3</a></li>
- <li><a href="#a4">1-3見出し3</a></li>
- </ul>
- </li>
- <li><a href="#a5">大見出し2つ目（ダイエットに失敗しないための３つの対策）</a>
- <ul>
- <li><a href="#a6">2-1見出し3</a></li>
- <li><a href="#a7">2-2見出し3</a></li>
- <li><a href="#a8">2-3見出し3</a></li>
- </ul>
- </li>
- <li><a href="#a9">大見出し3つ目（おすすめダイエット法３つを紹介）</a>
- <ul>
- <li><a href="#a10">3-1見出し3</a></li>
- <li><a href="#a11">3-2見出し3</a></li>
- <li><a href="#a12">3-3見出し3</a></li>
- </ul>
- </li>
- <li><a href="#a13">まとめ|ここでは序盤で共感して、しかしで反論して、CTAをさせてからお礼する。</a>
- </li>
- </ol>
- <h2 id="a1">大見出し1つ目（ダイエットが失敗する3つの理由</h2>
- <img src="画像URL" width="100%" height="100%" alt="大見出し1">
- <h3 id="a2">1-1見出し3</h3>
ブロックエディタだと、HTML編集することないですが、目次と見出しだけはチャレンジしてみましょう。
こちらの目次と見出しのコードサンプルはコピペOKですので、ぜひお使いください。
まとめ|プラグイン便利だが良し悪し
ぼくも上記は同様に思っていました。
しかし、ブロックエディタ使いつつも、テキストエディタみたくHTML書いてブログやりたいって思ったので、コロブさんのブログ記事を読んでHTML書いてみたらしっかりと理解できました。
まずは、サンプルの目次と見出しがリンクするHTMLコードコピペして、記事中の目次に位置する部分にカスタムHTMLのブロック呼び出して、使っていきましょう。
それでは、今日はここまで読んでいただき、ありがとうございました！
» 最短・最速で脱プログラミング初心者｜Skill Hacks（スキルハックス
＼ プログラミングに強くなる ／
