SimpleTOCはGutenbergブロックで目次を作成するプラグイン

SimpleTOCとは

WordPressプラグインの「SimpleTOC」は、その名の通り、WordPressサイトにシンプルで基本的な目次を追加するためのプラグインです。

主な特徴は以下の通りです。

  • シンプルで初心者向け: 余計な装飾や複雑な設定がなく、簡単に目次を導入できます。
  • Gutenberg(ブロックエディタ)対応: WordPressのコンテンツエディター(Gutenberg)のブロックとしてSimpleTOCブロックを追加するだけで目次を生成できます。
  • 自動生成: 投稿やページ内の見出し(H1〜H6タグ)を自動的に検出し、それらをもとに目次を生成します。
  • 最小限の機能: スムーススクロールや折りたたみ機能など、余分なJavaScript機能は追加されません。これにより、サイトのパフォーマンスに影響を与えにくいとされています。
  • 設定が簡単: 個々のブロック設定の他に、管理画面でグローバル設定を利用して、見出しの最大深度やリストの種類(順序付きリスト、箇条書きリスト)などを設定できます。
  • カスタマイズの余地: Gutenbergのグループスタイリングオプションを使って、背景色や文字色を追加したり、ワイド・フルワイドのネイティブブロックに対応したりできます。
  • オープンソース: GitHub Pagesで開発されており、バグ報告や機能提案も可能です。
  • 多言語対応: 日本語を含む複数の言語に翻訳されています。

どんな人におすすめか?

  • WordPressサイトに手軽に目次を追加したい人
  • サイトの表示速度を重視し、余分な機能が不要な人
  • Gutenberg(ブロックエディタ)を積極的に利用している人

目次のデザインにこだわったり、より詳細な表示条件を設定したい場合は、「Easy Table of Contents」や「Table of Contents Plus」といった他の高機能な目次プラグインも検討する価値があります。しかし、シンプルな目次で十分な場合は、SimpleTOCは非常に優れた選択肢となります。

SimpleTOCの使い方

WordPressプラグイン「SimpleTOC」は、投稿やページに目次を簡単に作成できるブロックエディター(Gutenberg)向けのプラグインです。基本的な使い方は非常にシンプルです。

SimpleTOCの基本的な使い方

  1. プラグインのインストールと有効化
    • WordPressの管理画面にログインします。
    • 左側のメニューから「プラグイン」→「新規追加」を選択します。
    • 検索ボックスに「SimpleTOC」と入力し、検索結果から「SimpleTOC – 目次ブロック」を見つけ、「今すぐインストール」をクリックします。
    • インストールが完了したら、「有効化」をクリックします。
  2. 投稿またはページに目次を追加する
    • 目次を追加したい投稿またはページを編集画面で開きます。
    • 目次を表示したい場所に、ブロックを追加します。「+」アイコンをクリックするか、スラッシュ「/」を入力します。
    • 検索ボックスに「SimpleTOC」または「TOC」と入力し、「SimpleTOC」ブロックを選択します。
    • ブロックを追加すると、自動的に投稿やページ内の見出し(h1, h2, h3など)を読み取り、目次が生成されます。
  3. 目次のカスタマイズ(ブロック設定)
    • SimpleTOCブロックを選択すると、右側のサイドバーにブロック設定が表示されます。ここで目次の表示を調整できます。
    • 目次の最大深度(Maximum Depth): 目次に含める見出しのレベルを制限できます。例えば、「2」に設定するとh1とh2の見出しのみを目次に含めることができます。
    • 目次の見出し(Heading): 「目次」というデフォルトの見出しを表示するかどうかを設定できます。これを非表示にして、別途「見出し」ブロックを使って独自の目次タイトルを設定することも可能です。
    • リストタイプ(List Type): 順序付きリスト(数字)または箇条書きリスト(点)を選択できます。
    • 折りたたみ可能な目次(Collapsible): 目次をアコーディオン形式で折りたたむように設定できます。
    • その他、ARIA属性やスムーズスクロールの設定なども行えます。

その他のカスタマイズとヒント

  • スタイル設定: SimpleTOCはGutenbergのネイティブグループスタイリングオプションに対応しています。SimpleTOCブロックを「グループ」ブロックで囲むことで、背景色、文字色、リンク色などを設定し、テーマのスタイルを継承させることができます。
  • グローバル設定: 管理者権限を持つユーザーは、SimpleTOCのグローバル設定を利用して、個別のブロック設定を上書きすることができます。これにより、すべての目次の表示を一元的に管理できます。
  • ショートコード(クラシックエディターの場合): もしクラシックエディターを使用している場合や、特定の場所に手動で目次を挿入したい場合は、[*toc] というショートコードを使用できます。ただし、SimpleTOCはGutenbergに最適化されています。

SimpleTOCは「設定はゼロ」を謳っているだけあり、非常にシンプルで直感的に使えるプラグインです。まずは上記の基本的な使い方で目次を挿入し、必要に応じてブロック設定でカスタマイズしていくのが良いでしょう。

SimpleTOCの注意点

WordPressプラグインのSimpleTOCは、使いやすさやアクセシビリティに配慮された優れたTOC(目次)ブロックプラグインとして評価されていますが、いくつか注意点があります。

主な注意点は以下の通りです。

  • テーマや他のプラグインとの競合: SimpleTOCはWCAG 2.2 AAレベルのアクセシビリティに準拠するように設計されていますが、一部のサードパーティプラグインやテーマが、ウェブサイト全体のアクセシビリティに影響を与える可能性があります。もしアクセシビリティに関する問題を発見した場合は、開発元に報告することが推奨されています。
  • GeneratePressテーマとの相性: 一部のユーザーレビューでは、GeneratePressテーマの「Back to Top(トップに戻る)」機能とSimpleTOCを併用すると、スクロールに遅延が発生する、または機能しなくなるという報告があります。もしGeneratePressを使用している場合は、この点に注意し、事前にテストを行うことをおすすめします。
  • カスタマイズの自由度: SimpleTOCは「Zero configuration(ゼロ設定)」を謳っており、Gutenbergのネイティブなグループスタイリングオプションでスタイルを適用できるなど、テーマのスタイルを継承する設計になっています。そのため、詳細なCSSカスタマイズが必要な場合は、ある程度の知識が必要になるかもしれません。
  • 機能のシンプルさ: プラグイン名が示す通り、「SimpleTOC」はシンプルさに重点を置いています。TOCの表示方法やデザインに関して、非常に高度なカスタマイズオプションや、他のTOCプラグインが提供するような多機能性を求める場合は、物足りなさを感じる可能性があります。

全体としては、SimpleTOCはGutenbergに最適化されており、JavaScriptやCSSをほとんど追加しないため、パフォーマンスへの影響が少ないという利点があります。しかし、上記の注意点を考慮して、ご自身のウェブサイトの環境や要件に合っているかを確認することをおすすめします。

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

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などがあります。