「投稿した記事に「目次」を付けたい。
手で作る以外の方法を教えて!」
ページスクロールが必要になるぐらいの
長いブログ記事を書いていると読みづらいですよね。
読みづらいと言うことはそれだけユーザビリティーが下がる、
つまり滞在時間も減る可能性があるので
SEO面でマイナス評価になりがち、ということですね。
そこで、記事に対して目次を付けるというのが
一つの解決策になるのですが、
これを手で行うのはとても面倒です。
そこで本日は、目次を自動で作成する方法についてお伝えします。
具体的には、、、
目次生成用のプラグインを利用します。
目次
目次生成用のプラグインでできること
今回ご紹介するのは
「Table of Contents Plus」というプラグインです。
目次作成のプラグインですので当たり前ですが目次を生成でき、
かつ次の様な特徴を持っています。
- 投稿の目次を自動で生成する(h1~h6のHTMLタグから自動で生成)
- 投稿、ページ、カスタム投稿タイプに対応
- 自動で目次を挿入することも、表示位置をカスタマイズすることも可能
- 特定の投稿だけ非表示にすることが可能
- デザインをプリセットから選択、またはカスタマイズが可能
注意点として、
HTMLタグ(h1~h6)から目次を生成するので、
ビジュアルモードの「見出し」などを利用している必要があります。
うまく作れないと相談される方の投稿を見ると、
文字サイズと色などを指定して見出しのように見せかけているため、
目次が表示されてないという原因が多いです。
インストール方法
次の手順でインストールします。
インストール後から自動的に各投稿に目次が表示されるようになります。
- WordPressの管理画面を開く
- 「プラグイン|新規追加」メニューを開く
- 「プラグインの検索」に”Table of Contents Plus”を入力して検索
- 「今すぐインストール」をクリック後、「有効」をクリック
設定方法
すべての設定は
WordPressの管理画面の「設定|TOC+」メニューで行えます。
「基本設定」タブ
基本設定では、次の設定が行えます。
- 目次を表示する位置の設定
- 目次を表示する条件として、見出しが何個以上あるか
- どのコンテンツに見出しを表示するか
- 目次の表示・非表示のリンクテキスト
- 階層表示の有無
- 番号の有無
- スムーズ・スクロールさせるかどうか
- 横幅
- 文字の回り込み
- 文字サイズ
- デザイン
さらに、「上級者向け設定」の「表示」リンクから次の設定などが行えます。
- 目次に含める見出し(hタグ)のレベルの指定
- 除外する見出し(文字列で指定)
- 特定のページのみを指定
「サイトマップ」タブ
サイトマップとは、サイト全体のページを一覧できる情報のことです。
本プラグインを利用すると[sitemap]ショートコードを利用することで
自動的にページとカテゴリーのサイトマップを作成します。
次の設定が行えます。
- 固定ページ一覧の表示の有無
- カテゴリー一覧の表示の有無
- 表示する見出しのヘッダータグの設定
- 固定ページ・カテゴリーページのラベルの文字列
投稿のみ・固定ページのみ・カテゴリーページのみ
のショートコードも用意されています。
例えば、次のショートコードは
”固定ページ一覧ですよ”と言うラベルで、
h6タグを使ったID 1と15を除外した固定ページ一覧、を表示します。
[sitemap_pages heading="6" label="固定ページ一覧ですよ" exclude="1,15"]
目次の表示位置を変える方法
すべてのページで変えたい場合
すべてのページで表示位置を変えたい場合、
先述した設定画面から行います。
投稿ごとに変えたい場合
投稿ごとに目次を表示させる位置を変えたい場合は、
表示させたい場所に次のショートコードを記述します。
[toc]
投稿内で非表示にする場合
目次を表示させたくないページであれば、
ページ内に次のショートコードを記述できます。
[no_toc]
サイドバーに表示する場合
サイドバーに表示させたい場合は、
WordPress管理画面の「外観|ウィジェット」メニューから
表示したい箇所に「TOC+」ウィジェットを 配置してください。
まとめ
今回のポイントをまとめます。
- 目次はプラグインで自動生成できる
- 目次はユーザーにもSEO面でもメリットがある
- TOC+プラグインはカスタマイズしやすい
いかがでしたでしょうか。
Table of Contents Plusプラグインを利用すると
手書きの手間から解放されるので記述ミスが減り、
ユーザービリティーが上がることでSEO面でもメリットがあります。
加えて、きれいな目次を作るためには
「見出し(h1~h6)」をきれいにする必要があるので、
HTMLの構造の面からもGoogleが好む形式になります。
慣れが多少必要かも知れませんが、是非活用していただきたい機能です。
本日の内容が良くわからない、もっと詳しく聞きたい、
代わりにやって欲しい、などの個別対応がご希望であれば、
WordPress専門の相談・サポートサービスがあります。