SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

WordPressでタブ切り替え|プラグインとテーマのタブブロック機能まとめ

WordPressでタブ切り替え|プラグインとテーマのタブブロック機能まとめ
  • URLをコピーしました!

WordPressのブロックエディターで、タブ切り替えができるプラグインやテーマを紹介します。

今回紹介するプラグインやWordPressテーマは、全て国産の有名なプロダクトなのでどれも安心して利用することができます。

また、同じタブ切り替えができるブロック(タブブロック)でも、各プラグインやテーマによって、微妙に機能や操作方法が異なります。

この記事では機能や操作性も比較しつつそれぞれのタブブロックを紹介していきます。WordPressのコンテンツ内にタブ切り替えを導入したい方はぜひ参考にしてください。


合わせて読みたい

ブロックエディター機能が充実したWordPressテーマまとめ。


ブロックエディターにおすすめのWordPressプラグインまとめ。


記事の正確性について ※初回執筆:2022/12/6

記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。

各テーマやプラグイン紹介の文末に確認したバージョンを記載しています。最新情報は各プロダクトの公式サイト等もご確認頂くようお願いします。

目次

テーマやプラグインのタブブロック機能比較表

この記事で紹介する、プラグインやWordPressテーマで使えるタブブロックの機能を以下にまとめました。


スクロールできます
プラグイン名おすすめ度最初に開くタブの指定リンクに応じた開くタブの指定タブの縦並び配置その他
Arkhe Blocks
Pro
対応対応
Snow Monkey
Blocks
対応
タブブロック機能比較表

※プラグイン名をクリックすると、対象の説明箇所までスクロールできます。

補足
  • おすすめ度は比較した結果から目安として表記しています。
  • 比較項目は、僕がサイト運営で「あると便利」と感じる内容を中心にピックアップしています。

目的別おすすめのタブブロック

上記で紹介した比較表の中から、目的別におすすめのタブブロックを紹介します。

  • 最初に開くタブを指定したい
  • ページ遷移元に応じてタブを指定したい
  • 縦並びのタブを設置したい

最初に開くタブを指定したい

通常の横並びのタブ表示では、1番左にあるタブが最初に開かれて表示されていますが、最初に開いておくタブを指定したい場合もあります。

以下がそのイメージです。

タブAのコンテンツ

タブBのコンテンツ

1つ目は1番目のタブが初期から開いており、2つ目は2番目のタブが開いていると思います。

このように最初に開くタブを指定できる機能を持ったタブブロックは以下です。

ページ遷移元に応じてタブを指定したい

上記、最初に開くタブの指定をさらに柔軟に、クリックした内部リンクやページ内リンクに応じて開くタブを制御できる便利なタブブロックもあります。

このような機能を持ったタブブロックは以下です。

さとしん

Arkhe Blocks Proのタブブロックは今回紹介する中でも特におすすめです…!

縦並びのタブを設置したい

横並びでタブが表示されているケースが多いですが、タブを縦に並べる機能を持ったタブブロックもあります。

Nishiki Proのタブブロック-1

縦並びのタブを作成できるブロックは以下です。

WordPressでタブブロックが使えるプラグイン

当サイトおすすめのブロック拡張プラグインの中から、アコーディオンを設置できる2種類のプラグインを紹介します。

Arkhe Blocks (Arkhe)|タブブロック

おすすめ度:

機能の充実度
悪い
1
2
3
4
5
良い
操作のしやすさ
悪い
1
2
3
4
5
良い

Arkhe Blocksでは、タブブロックを使うことができます。

Arkhe Blocksには無料版と有料版がありますが、タブブロックは無料版のArkhe Blocksでも利用可能です。※一部機能制限あり

Arkhe Blocksのタブブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。

できること
できないこと
  • 最初に開くタブを指定可能
  • リンクに応じて開くタブを指定可能
  • スタイルは2種類から選択可能
  • タブの配置とサイズの指定が可能
  • タブを縦並び配置にはできない

Arkhe Blocksのタブブロックでは、Pro版限定で最初に開いておくタブを指定できる機能があります。

サイドバーの設定欄「最初に開いておくタブの番号」にタブを左から数えた数値を入力することで、初期に開くタブが変更できます。

Arkhe Blocksのタブブロック-1

さらに、タブブロックを選択したときにサイドバーに表示されているURLパラメータを使うことで、リンクをクリックした後に開くタブを指定できます。

Arkhe Blocksのタブブロック-2

これについては、以下の記事に実際の動作デモを用意しました。

Arkhe Blocksのタブブロックでは、2種類のスタイルを選択できます。

Arkhe Blocksのタブブロック-3
Arkhe Blocksのタブブロック-4
デフォルト
Arkhe Blocksのタブブロック-5
ボックス

また、タブの配置を3種類、タブのサイズをPC、SP(スマホ)のデバイスサイズごとに3種類から選択できます。タブを横スクロールで表示させることも可能です。

Arkhe Blocksのタブブロック-7
Arkhe Blocksのタブブロック-6
スクロールできます
Arkhe Blocksのタブブロック-8
テキストにあわせる
Arkhe Blocksのタブブロック-9
均等幅
Arkhe Blocksのタブブロック-10
固定幅(25%)
横スクロール表示

Arkhe Blocksのタブブロックはかなり柔軟に便利な設定ができる高機能なブロックでおすすめです。

公式

関連Arkhe Blocksの機能まとめ

関連Arkheの感想レビュー

以下の環境で動作を確認しています。※最終確認日:2022/12/6

WordPress

v6.1.1

Arkhe Blocks Pro

v2.19.1

Snow Monkey Blocks (Snow Monkey) |タブブロック

おすすめ度:

機能の充実度
悪い
1
2
3
4
5
良い
操作のしやすさ
悪い
1
2
3
4
5
良い

Snow Monkey Blocksでは、タブブロックを使うことができます。

Snow Monkey Blocksのタブブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。

できること
できないこと
  • スタイルを3種類から選択可能
  • タブの縦並び配置が可能
  • 最初に開くタブの指定はできない
  • リンクに応じて開くタブの指定はできない

Snow Monkey Blocksのタブブロックは、選択できるパターンが豊富です。

スタイルは3種類用意されていて、タブの配置についても4種類から選択可能です

Snow Monkey Blocksのタブブロック-1
スクロールできます
Snow Monkey Blocksのタブブロック-2
デフォルト/左配置
Snow Monkey Blocksのタブブロック-3
シンプル/左配置
Snow Monkey Blocksのタブブロック-4
ライン/中央配置
Snow Monkey Blocksのタブブロック-5
デフォルト/右配置
Snow Monkey Blocksのタブブロック-6
ライン/均等配置

個人的にうれしい機能は、タブを縦並びにも配置できる点です。サイドバーのブロック設定「タブの向き」で設定できます。

Snow Monkey Blocksのタブブロック-7

デザイン面がシンプルなので自分でカスタマイズが必要になるかもしれませんが、縦並び配置など用途に応じて柔軟に使うことができるブロックです。

公式Snow Monkey Blocks

関連Snow Monkey Blocksの機能まとめ

以下の環境で動作を確認しています。※最終確認日:2022/12/6

WordPress

v6.1.1

Snow Monkey Blocks

v17.2.0

Snow Monkey Editor

v9.1.0

WordPressテーマのタブブロックまとめ

当サイトおすすめのWordPressテーマの中から、アコーディオンを設置できる3種類のテーマを紹介します。

SWELL|タブブロック

おすすめ度:

機能の充実度
悪い
1
2
3
4
5
良い
操作のしやすさ
悪い
1
2
3
4
5
良い

WordPressテーマSWELLでは、タブブロックを使うことができます。

SWELLのタブブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。

できること
できないこと
  • 最初に開くタブを指定可能
  • スタイルは3種類から選択可能
  • タブのサイズの指定が可能
  • リンクに応じて開くタブの指定はできない
  • タブを縦並び配置にはできない

SWELLのタブブロックでは、最初に開いておくタブを指定することができます。

サイドバーのタブ設定「何番目のタブを最初に開いておくか」に、タブを左から数えた数値を入力することで、初期に開くタブを変更できます。

SWELLのタブブロック-11

タブのスタイルは3種類から選択できます。

SWELLのタブブロック-12
スクロールできます
SWELLのタブブロック-1
ノーマル
SWELLのタブブロック-2
ふきだし
SWELLのタブブロック-3
下線

タブのサイズをPC、SP(スマホ)のデバイスサイズごとに4種類から選択できます。タブを横スクロールで表示させることも可能です。

SWELLのタブブロック-10
スクロールできます
SWELLのタブブロック-6
テキストにあわせる
SWELLのタブブロック-7
固定幅(25%)
SWELLのタブブロック-8
端まで並べる
SWELLのタブブロック-9
端まで並べる(均等幅で)

SWELLのタブブロックは、デザイン面、機能面ともに充実していてとても使いやすいブロックです。

公式

関連SWELLのブロックエディター機能まとめ

関連SWELLの評判・口コミ・レビュー

以下の環境で動作を確認しています。※最終確認日:2023/1/21

WordPress

v6.1.1

SWELL

v2.7.2.1

Nishiki Pro|タブブロック

おすすめ度:

機能の充実度
悪い
1
2
3
4
5
良い
操作のしやすさ
悪い
1
2
3
4
5
良い

WordPressテーマNishiki Proでは、タブブロックを使うことができます。

Nishiki Proのタブブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。

できること
できないこと
  • タブの縦並び配置が可能
  • タイトルにアイコンを表示できる
  • 細かいデザインの設定が可能
  • 最初に開くタブの指定はできない
  • リンクに応じて開くタブの指定はできない
  • スタイルは1種類のみ

Nishiki Proのタブブロックでは、タブレットサイズ以上の画面サイズの時に、タブを縦並びに配置することができるのがありがたいです。

Nishiki Proのタブブロック-1

縦並びの設定含め、サイドバーの「レイアウト設定」から細かい設定ができるようになっています。

Nishiki Proのタブブロック-2

タブのタイトルにはアイコンを挿入できます。

Nishiki Proのタブブロック-3

ブロックのスタイルは1種類のみですが、タブやコンテンツ部分のカラーを柔軟に設定できる仕様になっています。

Nishiki Proのタブブロック-4

縦並びの配置ができる点や、細かく柔軟な設定ができる点が便利なブロックです。

公式Nishiki Pro

以下の環境で動作を確認しています。※最終確認日:2022/12/6

WordPress

v6.1.1

Nishiki Pro

v1.0.307

SANGO|タブブロック

おすすめ度:

機能の充実度
悪い
1
2
3
4
5
良い
操作のしやすさ
悪い
1
2
3
4
5
良い

WordPressテーマSANGOでは、タブブロックを使うことができます。

SANGOのタブブロックの機能を他のプラグインやテーマの機能と比較すると、以下のような特徴があります。

できること
できないこと
  • タイトルにアイコンか画像を表示できる
  • タイトルを何列にするか設定できる
  • 最初に開くタブの指定はできない
  • リンクに応じて開くタブの指定はできない
  • スタイルは1種類のみ
  • タブを縦並び配置にはできない

SANGOのタブブロックでは、スタイルは1種類のみでシンプルですが、主にタブのタイトル周りで柔軟な設定ができます。

タブのタイトルにアイコンか画像を挿入することが可能です。

SANGOのタブブロック-3
アイコンを挿入
SANGOのタブブロック-2
画像を挿入

Arkhe BlocksやSWELLのようにタブのサイズを細かく指定することはできませんが、タブの数に応じて折り返すかどうかの設定ができるようになっています。

SANGOのタブブロック-3
2個ずつ折り返す
SANGOのタブブロック-4
3個ずつ折り返す

機能としてはシンプルですが、デザイン面で柔軟な設定ができるブロックです。

公式SANGO

関連SANGOのブロックエディター機能まとめ

関連SANGOの評判・感想レビュー

以下の環境で動作を確認しています。※最終確認日:2023/1/21

WordPress

v6.1.1

SANGO

v3.6.4

WordPressテーマやプラグインのタブブロックまとめ

WordPressのブロックエディターでタブブロックが使えるWordPressテーマやプラグインを紹介しました。

>>機能比較表をもう一度見る

タブブロックを活用することで、複数のコンテンツを並列に配置しつつ、気になる情報だけ表示させることができるのでページをすっきりさせつつ情報をまとめることができると思います。

同じタブブロックでも、テーマやプラグインによって機能が異なるので、あなたの目的に合ったタブブロックをこの記事で見つけてもらえていたら嬉しいです。

ブロックエディターを活用して素敵なコンテンツを作っていきましょう。

最後まで読んでいただきありがとうございました。


WordPressでタブ切り替え|プラグインとテーマのタブブロック機能まとめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次