今回はSWELLのタブブロックについて解説します!
タブブロックは複数のコンテンツを並列に配置し切り替えながら表示することができ、とても便利な機能です。
比較記事を作る際にもサイト型トップページでもタブブロックは活躍してくれます!
私もよく利用しているSWELLの中でもお気に入りのブロックです(^o^)
SWELLタブブロックの使い方
タブブロックでは以下のようなブロックを作ることが出来ます!
![](https://komachi1015.com/wp-content/uploads/2023/11/22516289-1024x768.png)
1.設置までの流れ
まずは簡単に設置までの流れを説明していきます。
![](https://komachi1015.com/wp-content/uploads/2023/11/43fe392cf2eb44e19437c92cd01eb3a8.png)
ブロックの追加で、SWELLブロックからタブを選択します。
![](https://komachi1015.com/wp-content/uploads/2023/11/764cc5f2115c16dc601bbd7b03357bab-1024x325.png)
初期設定では上記のようになります。
![](https://komachi1015.com/wp-content/uploads/2023/11/e4b684df311fb86cc2e8340197489777.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/70e7c26e5312b2fd97df4f4c39abf7b7.png)
ブロックの設定画面でデザインを設定していきます。
![](https://komachi1015.com/wp-content/uploads/2023/11/8d538ac92b3d420499d31649ce96645a-1024x319.png)
タブの名称や数などを設定します。「+」をクリックするとタブの数を増やせます。
最後にタブのサイズを設定して整えます。
![](https://komachi1015.com/wp-content/uploads/2023/11/f0f859c134e1bdc244f6bdb9612d180b-1024x340.png)
2.デザインの設定
スタイル
デフォルト
![](https://komachi1015.com/wp-content/uploads/2023/11/9849dabd7fb3ed4f3895ff5fd6aefb96-1024x244.png)
吹出し
![](https://komachi1015.com/wp-content/uploads/2023/11/0ab04f66e4de1007db510b453be6ec48-1024x237.png)
下線
![](https://komachi1015.com/wp-content/uploads/2023/11/9f7e7b11467b21f2353854442c39b75e-1024x200.png)
ボーダー設定(4種類)
![](https://komachi1015.com/wp-content/uploads/2023/11/f8f106a78f2e573f55ac41a8a2620582-1024x314.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/811233b386f551614b0097a9e49cc6e9-1024x281.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/3040175c73cfe08f6e3501eb08310467-1024x290.png)
![](https://komachi1015.com/wp-content/uploads/2023/11/d99a32a444ed1a3c17580bcd60e157aa-1024x288.png)
タブサイズ
![](https://komachi1015.com/wp-content/uploads/2023/11/c545893d876cf8e84c1206bc46d06418-1024x310.png)
デフォ固定幅(25%)
![](https://komachi1015.com/wp-content/uploads/2023/11/ab1b67abecb3db015fe9d195642f4a6a-1024x299.png)
端まで並べる
![](https://komachi1015.com/wp-content/uploads/2023/11/b44e489b6249028bbca823c7606f3269-1024x299.png)
端まで並べる(均等幅で)
![](https://komachi1015.com/wp-content/uploads/2023/11/ccd4f809c57e0ff11bcbf52a810d2f53-1024x289.png)
個人的には【端まで並べる(均等幅で)】か【固定幅】がバランスよく見えるのでオススメです。
タブ数や文字数でも変わってくるので都度バランスを見て設定してみてください。
カラー設定
好きな背景色に設定が出来ます!
何番目のタブを最初に開いておくか
最初にページを開いたときに左から数えて何個目のタブを開いておくかの設定が出来ます。
左から順番どおりに並べたいけど、このタブブロックのように表示させたいのは1番右のタブがいいといった場合に使えます^^
今回のまとめ
今回はSWELLブロックのタブブロックについての解説をしました!
比較記事を作る際にとても便利ですね^^
応用も出来るので、タブブロックの中に「投稿リスト」ブロックを追加すれば、皆様もよく見かけるであろうタブで切り替えできる記事一覧リストが作れます。サイト型のトップページを作成したい時に使うと便利です♪
私もトップページで利用しています!!
別の記事で「投稿リスト」についても解説していきたいと思います。
今回も最後までご覧いただきありがとうございました(^o^)