Rich Table of Contentsは目次のデザイン性高く使いやすいプラグイン

Rich Table of Contentsとは

WordPressプラグインの「Rich Table of Contents」(略称:RTOC)は、誰でも簡単に記事に目次を自動生成できる、日本製の無料プラグインです。

記事内の見出し(h2, h3, h4など)を自動で検出し、それらをもとに目次を作成してくれます。

Rich Table of Contentsの主な特徴

  • 簡単な操作性: 直感的なUI設計で、初心者でも迷うことなく目次を作成・設定できます。リアルタイムプレビュー機能があるので、設定変更がすぐに反映されるのを確認できます。
  • 豊富なデザインオプション:
    • 目次のタイトル、フォント、色、背景色、枠線のデザインなどを自由にカスタマイズできます。
    • あらかじめ複数のプリセットデザインが用意されており、サイトの雰囲気に合わせて選択できます。
    • H2、H3リストのデザインなども個別に設定可能です。
  • 自動挿入とショートコード:
    • 投稿や固定ページなど、指定したコンテンツタイプに自動で目次を挿入できます。
    • ショートコードを利用すれば、記事内の好きな場所に目次を配置することも可能です。
  • 表示条件の設定:
    • 目次を表示する見出しの数(例: 見出しが3つ以上の場合に表示)を設定できます。
    • 特定の投稿やページでは目次を表示しないように除外設定も可能です。
  • 「目次に戻る」ボタン:
    • スマートフォン表示時に、記事の途中で目次にスムーズに戻れるボタンを表示させることができます。位置や上下の調整も可能です。
  • スムーズスクロール:
    • 目次内のリンクをクリック(タップ)した際に、該当の見出しまでスムーズにスクロールする機能を設定できます。
  • 目次使用率の計測:
    • 7日間の目次利用率を計測する機能があり、記事編集画面で確認できます。

RTOCがおすすめされる理由

  • 日本製プラグイン: 開発元が日本であるため、設定画面が完全に日本語で、サポートも受けやすいです。
  • デザイン性と使いやすさの追求: 従来の目次プラグインの機能に加え、デザインの自由度と操作性が重視されています。
  • テーマとの相性: WordPressテーマ「JIN:R」や「JIN」との相性が特に良いとされていますが、他の多くのテーマでも問題なく利用できます。

このように、Rich Table of Contentsは、ブログやサイトの読者のユーザビリティ向上や、記事のSEO対策に役立つ非常に便利な目次生成プラグインです。

Rich Table of Contentsの使い方

Rich Table of Contentsは、WordPressの投稿や固定ページに目次を自動生成してくれるプラグインです。以下に基本的な使い方を説明します。

1. インストールと有効化

  • WordPressの管理画面にログインします。
  • 左メニューの「プラグイン」→「新規追加」をクリックします。
  • 検索ボックスに「Rich Table of Contents」と入力し、検索します。
  • 「Rich Table of Contents」が表示されたら、「今すぐインストール」をクリックします。
  • インストールが完了したら、「有効化」をクリックします。

2. 基本設定

有効化すると、左メニューに「Rich TOC」という項目が追加されます。ここから設定を行います。

  • 一般設定 (General Settings):
    • 目次を表示する場所: 目次を表示する場所(記事の上、記事の下、または手動でショートコードを挿入)を選択できます。
    • 見出しレベル: 目次に含める見出しレベル(h1, h2, h3など)を選択します。通常はh2からh4あたりを使用することが多いです。
    • 最小見出し数: 目次が表示されるための最低限の見出し数を設定します。
    • 目次タイトル: 目次のタイトルを設定します(例: 「目次」など)。
    • スムーズスクロール: 目次をクリックした際に、滑らかにスクロールするかどうかを設定します。
    • デフォルトで開く/閉じる: 目次を初期状態で開いておくか、閉じておくかを設定します。
  • デザイン設定 (Design Settings):
    • テーマ: 目次のデザインテーマを選択できます。いくつかのプリセットされたデザインがあります。
    • 背景色、文字色、ボーダー色など: 目次の色やボーダーなどをカスタマイズできます。
  • 高度な設定 (Advanced Settings):
    • 除外する見出し: 特定の見出しを目次から除外したい場合に、その見出しのCSSセレクタなどを指定できます。
    • CSSの追加: 独自のCSSを追加して、さらに細かくデザインを調整できます。

3. 投稿・固定ページでの使い方

Rich Table of Contentsは、基本的に設定が完了していれば、投稿や固定ページに自動的に目次を生成してくれます。

  • 自動生成の場合:
    • 記事内に設定した見出し(h1, h2, h3など)があれば、自動的にそれらを認識し、目次が生成されます。
    • 特別な操作は不要です。
  • 手動でショートコードを挿入する場合:
    • もし、特定の場所に目次を挿入したい場合は、ブロックエディタ(Gutenberg)の場合は「ショートコード」ブロックを追加し、[rtoc_mokuji title="目次"] などのショートコードを挿入します。
    • クラシックエディタの場合は、直接ショートコードを記述します。
    • ショートコードのオプションで、タイトルを変更したり、表示する見出しレベルを指定したりできます。
    例:
    • [rtoc_mokuji]:デフォルトの目次
    • [rtoc_mokuji title="CONTENTS"]:タイトルを「CONTENTS」にする
    • [rtoc_mokuji headings="2,3"]:h2とh3の見出しのみを目次にする

4. 動作確認と調整

設定後、実際に投稿や固定ページを確認し、目次が意図した通りに表示されているか確認しましょう。もし表示がおかしい場合や、デザインを調整したい場合は、再度プラグインの設定画面に戻って変更してみてください。

ポイント:

  • 見出しの構造: 目次が正しく機能するためには、記事内で適切な見出しタグ(h1, h2, h3など)を使用し、階層構造を意識して記述することが重要です。
  • デフォルト設定の活用: まずはデフォルトの設定で試してみて、必要に応じてカスタマイズしていくのがおすすめです。
  • キャッシュプラグインとの併用: キャッシュプラグインを使用している場合は、設定変更後にキャッシュをクリアしないと、変更が反映されない場合があります。

Rich Table of Contentsは比較的シンプルで使いやすいプラグインなので、ぜひ試してみてください。

Rich Table of Contentsの注意点

WordPressプラグイン「Rich Table of Contents」は、手軽に目次を生成できる便利なプラグインですが、いくつか注意点があります。

主な注意点

  • H5以降の見出しが目次に表示されない: Rich Table of Contentsは、デフォルトでH4までの見出ししか目次に表示されません。もしH5以降の見出しも目次に含めたい場合は、他のプラグインを検討するか、CSSなどで調整する必要があります。
  • デザインのカスタマイズ性が限定的: スタイルオプションがやや制限されており、他のプレミアムプラグインと比較すると、より高度なデザインカスタマイズには向いていない場合があります。細かくデザインを調整したい場合は、CSSを自分で記述する必要があるかもしれません。
  • ショートコード挿入時の挙動: ショートコードを使って目次を挿入した場合、その位置にのみ目次が表示され、自動挿入は行われません。自動挿入とショートコード挿入はどちらか一方しか利用できません。
  • 目次の表示条件:
    • 目次が表示されない場合、設定されている見出しの数(例えば4つ以上など)が満たされているか確認が必要です。
    • プレビュー画面では目次が表示されず、実際の投稿画面でのみ表示される点も注意が必要です。
    • パーマリンクが日本語になっている場合など、特定の条件下で目次が表示されないエラーが発生する可能性があります。
  • スマホでの表示: 目次タイトルを中央寄せに設定した場合、スマートフォンでは開閉ボタンがタイトルの下に表示され、目次を閉じた状態でも面積が広がり、見た目のバランスが悪くなることがあります。
  • 自動挿入と手動挿入の併用について: 基本的に自動挿入か手動挿入(ショートコード)のどちらかを選択して利用することになります。両方を同時に使用することはできません。
  • テーマや他のプラグインとの競合: まれに、使用しているWordPressテーマや他のプラグインと競合し、目次が表示されないなどの問題が発生する可能性があります。
  • 開発・サポート体制: 一部のユーザーからは、開発者のサポートが遅い、または改善の約束が守られていないといった不満の声も聞かれます。

運用上のアドバイス

  • 見出し構造の最適化: H4までしか表示されない点を考慮し、記事の見出し構造をH4までに収めることを意識すると、目次がすっきりとまとまります。
  • シンプルなデザインの活用: 細かいデザイン調整にこだわりがなければ、デフォルトのデザインをそのまま活用するか、必要最低限のCSSで調整するにとどめるのが良いでしょう。
  • 表示条件の確認: 目次が表示されない場合は、まずプラグインの設定で「表示条件」が適切に設定されているか、見出しの数が条件を満たしているかを確認してください。
  • WAF設定の確認: JSONエラーなどでウィジェットが保存できない場合、レンタルサーバーのWAF設定が影響している可能性があるので、一時的にWAF設定をオフにしてみるのも一つの手です。

これらの注意点を理解した上でRich Table of Contentsを使用することで、より効果的に目次を活用できるでしょう。

プラグインが最小でも魅力的なウェブサイトが作成できる

WordPressの有料テーマは、プラグインに関して有利になる点がいくつかあります。

主に、多機能性開発者による配慮により、プラグインの数を減らしたり、特定の機能での競合や相性を気にしなくて済むという利点があります。

有料テーマがプラグインで有利な点

1. 独自機能の搭載によるプラグイン削減

多くの有料テーマは、以下のようなブログ運営やサイト制作に必要な機能をテーマ自体に標準搭載しています。

  • SEO対策機能(構造化データ対応、メタタグ設定など)
  • 高速化機能(キャッシュ機能、CSS/JS最適化など)
  • 装飾機能(ボックス、ボタン、アコーディオンなどの独自ブロックやショートコード)
  • 広告管理機能
  • SNS連携機能

これらの機能がテーマに含まれているため、個別のプラグインをインストールする必要がなくなります。結果として、サイトの表示速度向上管理の簡素化につながります。

2. 独自プラグインとの連携・互換性の保証

一部の有料テーマは、テーマ専用の公式プラグインを提供している場合があります。これは、テーマの機能をさらに拡張しつつ、テーマとの互換性が保証されているため、機能の競合や不具合のリスクを最小限に抑えられます。

3. プラグインとの競合が起こりにくい設計

有料テーマは、一般的に主要な人気プラグイン(例:SEOプラグイン、セキュリティプラグイン、フォームプラグインなど)との互換性を考慮して設計・開発されています。そのため、無料テーマと比較して、テーマ側の機能とプラグイン側の機能が干渉し合って不具合が発生するリスクが低い傾向にあります。

4. サポート体制の充実

有料テーマの多くは購入者向けのサポート(フォーラムやメールサポートなど)が充実しています。プラグインを導入した際に不具合が発生した場合でも、開発元に相談できるため、問題解決がスムーズに進むことが多いです。

注意点もあります

  • 機能の重複: テーマに標準搭載されている機能と同等の機能を持つプラグインをインストールすると、機能が競合してサイトが不安定になったり、表示が崩れたりする可能性があります。有料テーマを使用する際は、テーマの標準機能とプラグインの機能が重複しないか確認が必要です。
  • テーマ依存の機能: テーマに含まれる機能は、テーマを切り替えると使えなくなることがあります。特に独自ブロックやショートコードで作成した部分は、テーマ変更時にレイアウトが崩れやすいので注意が必要です。
テーマ名主な特徴・強み適したサイト
ザ・トール (THE THOR)国内最高クラスのSEO最適化高速表示
プロ仕様の美しいデザインを簡単に実現(着せ替え機能あり)
アフィリエイトに役立つランキング作成機能CTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援
アフィリエイトブログ本格的なメディアサイト集客を重視するビジネスサイト
エマノン (Emanon)Web集客・ビジネス利用に特化した機能が豊富
CTA(行動喚起)、LP(ランディングページ)、メルマガ専用ページなどを簡単に作成
企業サイト、オウンドメディアに適したデザイン
WooCommerce対応でネットショップにも利用可能(Premium)
コーポレートサイト企業ブログオウンドメディアリード獲得を目的としたビジネスサイト
ストークSE (STORK SE)「誰が使っても美しいデザイン」を追求したモバイルファースト設計
シングルカラム(1カラム)レイアウトに特化し、コンテンツへの集中度が高い
ブロックエディタに最適化され、直感的な操作が可能
シンプルかつ洗練されたデザインで、汎用性が高い
商品・サービスのブランディングサイト、ミニマルな企業サイトシンプルで美しいブログ
リキッドプレス (LIQUID PRESS)用途別に豊富なテーマ(マガジン、コーポレートなど)が用意されている
高いSEO対策と構造化データ対応
多言語対応機能(LIQUID CORPORATEなど)
カスタマイザーでの直感的な編集が可能
メディアサイト(ブログ)、多言語対応が必要な企業サイト目的に合わせたテーマを選びたいサイト
有料WordPressテーマ

補足情報

  • ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
  • エマノン: 特にBtoBサービス業など、Webからの顧客獲得(リードジェネレーション)を重視するビジネスサイト構築に適しています。
  • ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
  • リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。