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

SimpleTOCとは

Screenshot of ja.wordpress.org

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テーマ 人気順(国内シェア参考)

THE THOR豊富な機能とデザイン性の高さで、EmanonLIQUID PRESSビジネス利用に強いという特徴があります。

順位 (推定)テーマ名補足・関連情報 (国内シェアランキングTop100)
1位THE THOR(ザ・トール)10位にランクイン(シェア0.9%)。人気が非常に高いテーマです。
2位Emanon(エマノン)「Emanon Premium」が9位(シェア0.9%)、「Emanon Pro」が17位(シェア0.4%)にランクイン。シリーズ全体で高い人気です。
3位RE:DIVER(リダイバー)関連テーマの「Diver」が12位(シェア0.7%)にランクインしており、人気が高いと推測されます。
4位STORK SE(ストークSE)関連テーマの「STORK19」が13位(シェア0.6%)、「STORK」が20位(シェア0.4%)にランクインしており、人気テーマのシリーズです。
5位LIQUID PRESS(リキッドプレス)関連テーマの「LIQUID CORPORATE」が89位にランクイン。ビジネス系テーマとして一定のシェアがあります。
6位GOLD BLOG(ゴールドブログ)「THE THOR」と関連・後継テーマとされており、人気が推測されます。
7位GOLD MEDIA(ゴールドメディア)「GOLD BLOG」や「THE THOR」と同じ開発元のテーマですが、明確なデータがないため下位としました。

テーマ選びのポイント

テーマを選ぶ際は、以下の点を考慮することをおすすめします。

  1. 用途と目的: ブログなのか、企業サイトなのか、それともアフィリエイトが目的なのか。
  2. サポート体制: テーマのアップデート頻度やサポートフォーラムの充実度を確認しましょう。
  3. 表示速度: サイトのSEOやユーザー体験に直結するため、表示速度が速いテーマを選びましょう。

レンタルサーバー速度比較(高速順)

レンタルサーバーの速度は、プランや計測時期、計測方法によって変動しますが、ここでは複数の比較情報から得られた一般的な傾向に基づいて順位付けしています。

順位サーバー名特徴・補足
1位ConoHa WING(コノハ)最先端の技術と高速化機能で最速クラス。特にWordPress環境での評価が高い。
2位LOLIPOP(ロリポップ)
(ハイスピード/エンタープライズ)
ロリポップ!の上位プラン(ハイスピードなど)は高速化されており、高い評価。
3位KAGOYA(カゴヤ)安定した品質とサポートが特徴。他の高速サーバーには一歩譲るが、中堅クラスでは速度も十分。
4位さくらレンタルサーバー歴史が長く信頼性が高いが、近年は他社の高速サーバーと比べると速度面で劣る傾向にある。
5位リトルサーバー格安・小規模向けのサーバー。速度より価格や手軽さを重視するユーザー向け。

このランキングは、主にWebサイトの表示速度(TTFB: Time To First Byteなど)の公開されたベンチマーク結果に基づいています。

利用の目的(サイトの規模、WordPress利用の有無、予算など)によって最適なサーバーは変わってきます。速度を最優先するならConoHa WINGが、コストパフォーマンスを重視しつつ速度も求めるならロリポップ!のハイスピードプランが良い選択肢となります。