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運用のポイント

WordPressは非常に人気のあるコンテンツ管理システム(CMS)で、ブログやウェブサイトの作成・運営に広く利用されています。そんなWordPressの運用にあたっては考慮すべきポイントがいくつかあります。

テーマの選定とカスタマイズ】適切なテーマを選び、必要に応じてカスタマイズすることで、サイトのデザインやユーザビリティを向上させることができます。

【プラグインの管理】必要な機能を追加するためにプラグインを使用しますが、不要なプラグインは削除し、定期的に更新することが推奨されます。これにより、セキュリティリスクを軽減できます。

※有料WordPressテーマはカスタマイズが容易で、豊富な機能が装備されているのでおすすめといえるでしょう。

【定期的なバックアップ】データの損失を防ぐために、定期的にバックアップを取ることが重要です。プラグインを利用することやレンタルサーバーのバックアップを活用しましょう。

セキュリティ対策】WordPressは人気があるため、攻撃の対象になりやすいです。セキュリティプラグインの導入や、定期的なパスワード変更、SSL証明書の導入などが推奨されます。

パフォーマンスの最適化】サイトの表示速度を向上させるために、キャッシュプラグインの利用や画像の最適化を行うことが重要です。

【SEO対策】検索エンジン最適化(SEO)を意識したコンテンツ作成や、SEOプラグインの活用が重要です。これにより、検索結果での表示順位を向上させることができます。

ユーザーエンゲージメント】コメント機能やSNSとの連携を活用し、訪問者とのコミュニケーションを促進することも大切です。

※SEO対策やSNSとの連携は専門知識も要求されます、外部サービスの利用を検討されてはいかがでしょう。