トグルボックスとは?クリックで開閉できる便利な情報整理ツール(Ultimate BlocksのExpand)

WordPressで記事を見やすくする「トグルボックス」の活用法と導入プラグイン

トグルボックスとは、クリックすると内容の表示・非表示を切り替えられる便利な機能です。学校の教科書にある「もっと知りたい方へ」という折りたたまれたコーナーをウェブ上で実現したものと考えるとわかりやすいでしょう。

よくある質問(FAQ)や価格表などの情報を整理するのに最適です。ウェブサイトを訪れた人が知りたい情報だけを表示できるので、ページ全体が見やすくなります。情報の整理整頓に役立つこの機能は、サイトの使い勝手を大きく向上させます。

WordPress向けトグルボックス対応プラグイン

WordPress用のトグルボックスは、いくつかのプラグインで簡単に導入できます。ここでは代表的なものを紹介します。

トグルコンテンツ

シンプルで軽量なプラグインです。Gutenberg(WordPress標準の記事編集画面)に対応しており、カスタマイズ性も高いのが特徴です。無料で使え、ネスト(入れ子)表示にも対応しています。WPDevelopers社が開発したプラグインで、初心者でも扱いやすい設計になっています。

Ultimate Blocks

多機能なブロック集としてのプラグインです。タブやトグルなども簡単に作成できます。無料で利用でき、タブ付きコンテンツ機能を使うとトグルボックスのような効果を得られます。ブロガーやアフィリエイター向けに、使いやすさと実用性を重視した設計になっています。

Arconix Shortcodes

ショートコード(特殊な短いコード)を使って記事内に簡単にトグルボタンやアコーディオンを挿入できるプラグインです。無料で使えるシンプルなプラグインですが、コードを覚える必要があります。

Elementor

視覚的にサイトを作れるページビルダーで、トグルやアコーディオン機能も搭載しています。無料版と有料版があり、デザインの自由度が高いのが特徴です。直感的な操作でレイアウトを調整できるため、プログラミングの知識がなくても本格的なデザインが可能です。

プラグインを使わない方法

テーマによっては、最初から「トグルボックス」ブロックが用意されている場合もあります。その場合、タイトルと内容を入力するだけでQ&Aボックスなどが作成できて便利です。

また、CSSとHTMLの知識があれば、プラグインなしでシンプルなトグルを自作することも可能です。少し技術的な知識が必要ですが、サイトの表示速度を維持したい場合には良い選択肢です。余計なプラグインを入れないことで、ページの読み込み速度が向上します。

Gutenbergとブロック追加プラグイン

先ほど紹介したElementorはページビルダープラグインと呼ばれています。これは、WordPressの標準エディタとは全く別の編集環境を提供し、ドラッグ&ドロップで直感的にページ全体をデザインできるツールです。

一方、Gutenberg(ブロックエディター)を拡張するタイプのプラグインは、「ブロック追加プラグイン」や「ブロックエディタ拡張プラグイン」と呼ばれています。これらは、WordPress標準機能に新しいブロックや機能を追加して、記事編集をより便利にします。

GenerateBlocks

GeneratePress開発元が提供する公式の無料プラグインです。コンテナ、グリッド、見出し、ボタンなど、デザイン性と拡張性に優れたブロックを追加できます。軽量で高速、テーマとの相性も抜群です。

必要最小限のブロックで最大限の柔軟性を提供するという考え方が特徴です。テーマとの親和性を重視しているため、デザインの一貫性を保ちやすいです。追加されるブロックは4つだけですが、これらを組み合わせて柔軟なレイアウトを作れます。

  • Container(コンテナ)
  • Grid(グリッド)
  • Headline(見出し)
  • Buttons(ボタン)

シンプルでありながら、これら4つを使いこなせば多彩な表現が可能です。少ないブロック数でも高い表現力を持つため、サイトの動作速度にも優しい設計になっています。

Gutenify

40種類以上のブロックテーマと連携できる無料プラグインです。様々なデザインパターンやブロックを追加できます。

多様性と拡張性を重視し、様々な業種に特化したデザインや機能をパッケージ化しています。テーマごとに異なる専用ブロックが用意されているのが特徴で、以下のようなブロックがあります:

  • 見出し
  • 画像・ギャラリー
  • ボタン
  • 価格表
  • サービス紹介
  • チームメンバー紹介
  • お問い合わせフォーム
  • カウントダウン
  • ヒーローセクション(サイト上部の大きな画像付き見出し)

使うテーマによって利用できるブロックが変わるため、自分のテーマに合った機能を探してみると良いでしょう。

Ultimate BlocksのExpandを使ってみた

今回は、Ultimate BlocksのExpandを使ってみました。

元のWordPressブロックの手前に、ULTIMATE BLOCKSが追加されました。

まとめ

WordPressでトグルボックスを使いたい場合、目的に合わせて最適なプラグインを選ぶことが大切です。

  • シンプルなトグルなら「トグルコンテンツ」や「Ultimate Blocks」
  • デザインや機能にこだわるなら「Elementor」
  • ショートコードを使いたい場合は「Arconix Shortcodes」

トグルボックスを上手に活用すると、訪問者が必要な情報を見つけやすくなり、サイトの使いやすさが大きく向上します。小さな工夫ですが、サイトの印象を良くする効果的な方法の一つです。