SWELLのタブブロック｜最初に開くタブを指定できるのが便利

WordPressテーマSWELLのタブブロックについて紹介します。

タブは複数のコンテンツを並列に配置し切り替えながら表示することができるので、ページをすっきりさせつつ、情報がまとめられるので便利です。

---

SWELLのタブブロックでできること

SWELLのタブブロックには以下のような設定や機能があります。

それぞれ紹介します。

タブのデザインの変更

SWELLのタブブロックでは、3種類のスタイルからデザインを選択できます。

• ノーマル
• ふきだし
• 下線

さらに、タブを囲むボーダーや背景色の設定も可能です。

タブサイズの設定

タブのサイズをPC(パソコン)とSP(タブレット)の画面サイズごとに設定できます。

• テキストにあわせる
• 固定幅(PC：25%,SP：50%)
• 端まで並べる
• 端まで並べる(均等幅で)

さらに、タブを横スクロールさせることも可能です。タブの数が多くなる場合などに重宝します。

最初に開くタブの指定

通常のタブブロックでは、１番左にあるタブのコンテンツが最初に開いた状態になります。

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

以下に2つのタブをサンプルとして配置しました。

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

では、実際のSWELLのタブブロックの使い方や設定方法を紹介していきます。

SWELLのタブブロックの使い方

SWELLのタブブロックの基本的な使い方は以下の手順です。

詳細の設定を紹介していきます。

デザインの設定

タブブロックのデザインは、サイドバーの「スタイル」から変更が可能です。

タブサイズの変更

タブサイズの変更もサイドバーから行います。「タブサイズ設定(PC)」、「タブサイズ設定(SP)」をそれぞれお好みの内容で設定します。

最初に開くタブの指定

最初に開くタブの設定は、サイドバーのタブ設定「何番目のタブを最初に開いておくか」の入力欄に表示したいタブの番号を入力します。

番号の数え方は1番左から1で始まります。

タブの移動、追加、削除

SWELLのタブブロックは操作性も良く直感的にタブを作成できます。

タブの追加や削除、移動はタブの上や横に表示されているアイコンをクリックするだけでOKです。

同ページ内でタブブロックのIDが重複しない様に注意

SWELLのタブブロックには、それぞれ固有のIDが割り振られています。

通常の操作をしていれば問題ないですが、同じページ内にあるタブブロックのIDが同じにならないように注意しましょう。

タブブロックのIDはサイドバーのタブ設定「タブブロックのID」から確認できます。

【おまけ】タブタイトルにアイコンを挿入して強調してみる

ここまでSWELLのタブブロックの機能や使い方を紹介してきました。

タブブロックは、並列に並べた複数のコンテンツをユーザーの操作で切り替えて表示することができるので、Webページを縦方向に短くできる点でもメリットがあります。

一方で、初期で開いているタブ以外は、読者の方がクリック(タップ)操作をしないと表示されない点には注意が必要です。

クリック(タップ)して隠れたコンテンツを見てもらうためには、タブのタイトルで興味を持ってもらうことが大切かなと思います。

そこで今回はSWELLの機能を組み合わせて、簡単にできるタブのタイトルを強調できそうな方法を考えてみました。

タブタイトルにアイコンを表示

SWELLではショートコードでアイコンを挿入することができます。

>> SWELLで使えるアイコンの一覧

このアイコンをタブのタイトル欄に挿入してみました。

この時のエディター(編集画面)は以下のようになっています。

より見せたいタイトルにのみアイコンを表示

さらにもう一工夫、右のタブ1か所にのみアイコンを挿入しつつ、アイコンの色を変えてもう少し目立たせてみました。

今回の方法はあくまで一例ですが、最初に開いておくタブの設定などと組み合わせながら、ユーザーに優しいタブコンテンツを作っていきましょう。

SWELLのタブブロックは操作性、機能性ともに素敵です

SWELLのタブブロックについて紹介しました。

SWELLのタブブロックでできることは以下です。

最初に開いておくタブの指定ができるのはとても便利です。

実は、SWELLと同じ開発者が作っているArkhe Blocks Proというプラグインでは、クリックしたリンクに応じて最初に開くタブを制御できる更に便利な機能も実装されています。

かなりおすすめの機能なので、Arkhe Blocksプラグインのタブブロックもぜひ確認してみてください。

また、今回は例として、SWELLの機能を組みあわせたタブブロックの活用案も紹介しました。

僕はデザイナーではないので、他にもっと有効な方法がたくさんあると思いますが、工夫しながら読者の方に優しいコンテンツを作っていきましょう。

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

---

SWELL公式サイトはこちらからどうぞ…！

SWELLブロックエディターの関連記事

SWELL全般の関連記事