SWELLタブブロックの使い方｜タブの切り替えで散らばった情報を整理できる！

「複数のコンテンツをタブで整理したい…」

「タブブロックの設定や活用方法は？」

「タブブロックのIDは設定必要？」

この記事では、そんな方に向けて、SWELLでタブブロックの使い方を解説します。

タブブロックとは…複数のコンテンツをタブで切り替えて表示できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• タブの切り替えで情報を整理することができる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事の見やすさや読みやすさを向上させることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELLタブブロックでできること3選

SWELLタブブロックでは以下のようなことができます。

それぞれ詳しく解説します。

タブをおしゃれにデザインできる

SWELLのタブブロックは「スタイル」「背景色」「ボーダー」を選べ、以下のようなデザインにカスタマイズできます。

豊富なカスタマイズ性から、サイトの雰囲気やユーザーに与えたい印象を考慮して選べます。

デバイス別でタブのサイズを設定できる

SWELLのタブブロックでは、PCとスマホ・タブレットごとにタブサイズを設定することができます。

横スクロールすることも可能です。

タブタイトルの長さに合わせてタブサイズを決めたり、横スクロールさせることができるので重宝するでしょう。

最初に開いておくタブを指定できる

以下のように、最初に開いておくタブも指定できます。

他のタブをクリックしてもらえない可能性があることを考慮して、1番ユーザーに読んでほしいタブを最初に開いておくことができますよ。

SWELLタブブロックの使い方とカスタム設定6つ

SWELLのタブブロックの使い方は以下のとおりです。

ちなみに、タブブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

タブブロックで設定可能な項目は6つあります。

それぞれ詳しく解説します。

3種類からスタイルを選ぶ

SWELLでは、タブブロックのスタイルを以下の3種類から選べます。

「ノーマル」はテキストカラーと同色、「ふきだし」「下線」はメインカラーと同色になります。

ほどんどの人がテキストカラーを黒色にしていると思うので、「ノーマル」スタイルも黒色になってしまい、少しダサくなってしまいます。

ですので、メインカラーと同色である「ふきだし」「下線」スタイルを使えば、サイト全体で統一感も出せておすすめですよ。

タブブロックのIDを定める

SWELLのタブブロックには、任意のIDが最初から設定されています。

同じページ内にもう1つタブブロックを追加したり、複製しても自動で異なるIDに変更されますが、

同じページ内にある他のタブブロックのIDと被らないように注意してください。

タブブロックのIDは触らないで、そのままの設定で使用すれば問題ないと思いますよ。

何番目のタブを最初に開いておくか決める

最初に開いておきたいタブを設定できます。

以下のタブブロックは、3番目のタブを最初に開いておく設定にしています。

最初にユーザーに見せたいタブから開くことができ、非常に便利ですね。

番号の数え方はタブの一番左を1とし、右のタブにズレるにつれて2、3、…というように数えますよ。

デバイス別でタブサイズを設定する

SWELLではタブのサイズをPCとSP(＝スマホ、タブレット)ごとに設定できます。

ここで設定できる項目は以下の4つあります。

ここで、5つのタブがあるタブブロックで上記4つの設定項目を試してみました。

場合によってはタブが2行以上に配置されます。

そんなときは、「ナビをスクロール可能にする」をONにして横スクロールさせると1行に配置されるようになりますよ。

タブの背景色を決める

タブブロック全体の背景色を設定できます。

この設定だとタブタイトルやタブ内の色だけの変更はできないみたいです。

もし背景色を設定する場合は、サイトの統一感を出すためにメインカラーと同じ色にすることをおすすめですよ。

使用したい色がなかったり、好きな色を指定して使いたい場合は、カラーピッカーで調べたカラーコードを入力しましょう。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

_{＼クリックで開く／}

ボーダーを設定する

タブブロックを囲むボーダーを設定することができます。

以下は当ブログで設定している4種類のボーダーです。

スタイル「ふきだし」「下線」を選んだ場合、タブブロックを囲む線がありません。

どこまでがタブブロック内のテキストで、どこからがタブブロック外のテキストか区別がつきにくいです。

ですので、「ふきだし」「下線」スタイルのタブブロックを使う場合にボーダーを設定することをおすすめですよ。

ボーダーの設定方法は、以下の2ヶ所から設定できます。

4種類のボーダーセットを登録でき、以下の3項目で設定できます。

設定し終えたら、画面下の変更を保存を押してください。

【実体験】SWELLタブブロックのおすすめな活用例3つを紹介

当ブログで使用しているSWELLのタブブロックのおすすめな活用方法を3つ紹介します。

それぞれ詳しく解説します。

類似の情報をタブで分けて並べる

SWELLのタブブロックを使いたい場面は、類似の情報やコンテンツを整理して、タブの切り替えで確認できるようにするときです。

例えば、以下のようなケースです。

このように複数の情報やコンテンツをキレイに並べることができるので、見やすさや読みやすさが格段に上がりますよ。

マイクロコピーでタブの切り替えを誘導する

タブブロックの上にマイクロコピーを配置してタブの切り替えを誘導できます。

マイクロコピーとは…リンクボタン周りなどに添える短い文章のこと

クリックで切り替えできることに気づいてもらえない可能性があるので、マイクロコピーを使ってタブの切り替えを誘導しましょう。

_{＼クリックで開く／}

タブタイトルにアイコンを挿入する

タブブロックのタイトルにアイコンを挿入することができます。

SWELLで使えるアイコンは公式サイトでもまとめられていますが、本記事でも抜粋して紹介すると以下のとおりです。

公式サイト：SWELLで使えるアイコンの一覧

アイコンが配置されていると目に留まりやすくなるので、よりタブを切り替えてもらえやすくなりますよ。

_{＼クリックで開く／}

SWELLタブブロックまとめ

今回は、SWELLでタブブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。