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

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

SWELLのタブブロック|最初に開くタブを指定できるのが便利
  • URLをコピーしました!

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

この記事の内容
  • SWELLのタブブロックでできること
  • SWELLのタブブロックの使い方
  • 少し工夫したタブブロックの表示の仕方

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

さとしん

タブブロックうまく活用しながら情報が整理されたコンテンツを作っていきましょう…!


SWELLのブロックエディターガイド

SWELLの高機能なブロックエディターを快適に使うためのガイドを作りました。

目次

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

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

それぞれ紹介します。

タブのデザインの変更

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

  • ノーマル
  • ふきだし
  • 下線
SWELLのタブブロック-1
ノーマル
SWELLのタブブロック-2
ふきだし
SWELLのタブブロック-3
下線

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

SWELLのタブブロック-4
ボーダー
SWELLのタブブロック-5
ボーダー+背景色

タブサイズの設定

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

  • テキストにあわせる
  • 固定幅(PC:25%,SP:50%)
  • 端まで並べる
  • 端まで並べる(均等幅で)
SWELLのタブブロック-6
テキストにあわせる
SWELLのタブブロック-7
固定幅(25%)
SWELLのタブブロック-8
端まで並べる
SWELLのタブブロック-9
端まで並べる(均等幅で)

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

SWELLのタブブロック

最初に開くタブの指定

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

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

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

タブAのコンテンツ

タブBのコンテンツ

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

さとしん

左から順番どおりに並べたいけど、表示させたいのは1番右のタブ!というケースなどで大活躍…!

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

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

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

STEP
メインコンテンツエリアで+ボタンをクリック
SWELLのタブブロック-23
STEP
「タブ」を探してクリック
SWELLのタブブロック-18
ちなみに…

ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

SWELLボタンブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /tab
  • /タブ
さとしん

「/」の操作は覚えておくと便利ですよ…!

詳しくは「ブロックエディターの記事執筆を快適にするショートカットまとめ!」で紹介しています。

STEP
タブのタイトルを入力
SWELLのタブブロック-19
STEP
タブのコンテンツ部分を入力

リストや画像、テーブルなど自由にブロックを挿入可能です。

SWELLのタブブロック-20
STEP
3つ目以降のタブの配置

もし、タブの項目を増やしたい場合は「+」ボタンをクリック

SWELLのタブブロック-21
STEP
サイドバーから細かい設定をする
SWELLのタブブロック-22

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

デザインの設定

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

SWELLのタブブロック-12

タブサイズの変更

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

SWELLのタブブロック-10

最初に開くタブの指定

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

SWELLのタブブロック-11

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

みにしん

例えば、左から3つ目のタブを表示させておきたい場合は「3」と入力するだけでOK…!

タブの移動、追加、削除

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

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

SWELLのタブブロック-13
さとしん

アイコンでどんな操作ができるか感覚的に分かると思いますので試してみてください…!

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

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

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

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

SWELLのタブブロック-14

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

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

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

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

みにしん

タブの中のコンテンツを見てもらえない可能性がある…!

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

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

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

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

>> 

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

SWELLのタブブロック-16

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

SWELLのタブブロック-15
さとしん

タイトルにショートコードを挿入するだけなので簡単ですね…!

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

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

SWELLのタブブロック-17
さとしん

1か所だけ他のタブと雰囲気が変わったので、より興味を持ってもらえるかもしれませんね…!

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

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

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

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

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

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

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

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

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

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


はこちらからどうぞ…!

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

SWELL全般の関連記事

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

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

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