WordPressでブログを書いているときに、かっこよく目次を作りたいと思いませんか。
いけてるブログは、みんな目次があって、そこから記事に飛ぶことができますよね。
今回は、目次を作って見やすいブログの作り方を説明していきます。
初めに
目次の作り方には、いくつかの方法があります。
- テーマ（Cocoon）を利用する方法
- プラグインを使う方法
- HTMLを書く方法
今日はこれらのやり方を丁寧に説明していきたいと思います。
テーマ（Cocoon）を利用する方法
WordPressではテーマを用いて、ブログを設計することができます。
その中でも、Cocoonを用いれば自動的に目次を生成してくれるためとても便利です。
ただし、タグ（h2やh3など）を正しく設定する必要があるため注意が必要です。
タグの設定の仕方はこちらをご確認ください。（WordPressでの見出しの作り方）
こちらを参考にタグを設定すれば自動的に目次を追加することが可能です。
最も簡単な方法なので難しいことは嫌だ！という方はぜひ試してみてください。
プラグインを使う方法
WordPressのプラグインを用いて目次を簡単に作る方法があります。
具体的にはどちらかのプラグインをインストールして使います。
- Table of Contents Plus
- Easy Table of Contents
こちらの方法は別途ご紹介しますね。
※ただし、目次を作るのはそんなに難しいものでないのでできれば自力でHTMLを書いて行きたいところですね！！
HTMLを書く方法
さて、私が最もおすすめするHTMLを書く方法になります。
最初は難しく感じるかもしれませんが、慣れていけば全く難しくありません。
なので一つ一つ順番に説明するので、ついてきてくださいね( ^)o(^ )
今回作成していく目次は、良く皆さんが見ている、気になる目次の項目をクリックするとそのページに飛んでいくようなものを作っていきたいと思います。
実は目次というよりは、クリックしてリンク先に飛ぶ方法がわかれば簡単に作れます。
なので今からは、リンク先に飛ぶ方法を説明していきます。
リンク元とリンク先で設定方法があります。
リンク元（目次）の設定方法
まずはリンク元を設定します。
リンク元なので、目次に対して設定するコードになります。
具体的にはこのようなコードを設定します。
「＜a href=”#abc”＞リンク先に飛びます。＜/a＞」※”#abc”のabcについては、なんでも問題ありません。リンク元を定義するIDだと思って下さい。
※実際は鍵括弧は半角にしてコードを書く必要があります。
リンク先に飛びます。
（↑コードを実際に書いた場合の表示内容です）
リンク先の設定方法
次にリンク先を設定します。
リンク元（目次）をクリックしたときに、飛んでくる場所になります。
主にh2タグやh3タグのような見出しに飛ばすことが多いかと思います。
※見出しについては、「WordPressでの見出しの作り方」を参考にしてみてくださいね。
具体的にはこのようなコードを設定します。
「＜p id=”abc”＞ここがリンク先です。＜/p＞」※id=”abc”のabcについては、リンク元のIDを書いてください。
※実際は鍵括弧は半角にしてコードを書く必要があります。
ここがリンク先です。
（↑コードを実際に書いた場合の表示内容です）先ほど設定した、「リンク先に飛びます。」リンクをクリックすれば、ここに飛んでくるので試してみてください。
目次の作り方具体例
目次から、h2タグ、h3タグのあるカテゴリに移動するような具体な書き方の例をご説明します。
これを参考に早速目次を作ってみてくださいね。
※実際は鍵括弧は半角にしてコードを書く必要があります。
■目次のコードサンプル
＜ol＞
＜li＞＜a href=”#mokuji1″＞目次1＜/a＞＜/li＞
＜li＞＜a href=”#mokuji2″＞目次2＜/a＞＜/li＞
＜li＞＜a href=”#mokuji3″＞目次3＜/a＞＜/li＞
＜/ol＞
■リンク先のコードサンプル
＜h2 id=”mokuji1″＞目次1のリンク先のh2タグになります。＜/h2＞
＜h2 id=”mokuji2″＞目次2のリンク先のh2タグになります。＜/h2＞
＜h2 id=”mokuji3″＞目次3のリンク先のh2タグになります。＜/h2＞
【サンプル】目次1のリンク先のh2タグになります。
【サンプル】目次2のリンク先のh2タグになります。
【サンプル】目次3のリンク先のh2タグになります。
最後に
いかがだったでしょうか。
目次を作るのは慣れればそんなに難しくないと思います。
プラグインに頼るのも良いですが、出来れば一度挑戦してみてくださいね。
コメント