SWELLのタブブロック使い方ガイド【比較・記事一覧まで】

SWELLのタブブロックを触ってみたものの、「どこからいじればいいのかわからない」「作ってみたけどイマイチ見づらい」と感じていませんか。

この記事では、SWELLのタブブロックの使い方の流れから、よくある活用パターン、デザインの整え方、トラブルが起きたときのチェックポイントまで、ひと通りおさえられるようにまとめました。

SWELLのタブブロックとは？できることをざっくり整理

タブブロックでできること一覧

タブブロックは、一言でいうと「関連する情報を、タブ切り替えでわかりやすく見せるためのブロック」です。縦に長くなりがちな内容を、タブごとに整理して見せられます。

代表的な使い道を表にまとめると、こんなイメージです。

用途	具体例	向いているケース
サービス・料金比較	プランA／プランB／プランCの比較	LPやサービス紹介ページ
記事一覧の切り替え	新着記事／人気記事／カテゴリ別タブ	ブログのトップページやカテゴリページ
機能・スペック比較	商品A・B・Cのスペック比較	ガジェット・ツール・ソフト紹介記事
FAQ・よくある質問	「料金」「使い方」「トラブル」などジャンル別	サポートページ・講座ページ
用語集・チュートリアル	STEP1〜STEP4の手順解説	ハウツー記事・マニュアル系

私の場合は、自分のブログのトップページで「新着記事」と「おすすめ記事」をタブで切り替えられるようにしたときに、「あ、これは便利だな」とタブブロックのありがたみを実感しました。タブがあるだけで、読者が迷子になりにくくなる感覚があります。

SWELLタブブロックを使うメリット・向いている場面

タブブロックを使う主なメリットは、次のようなものです。

• 情報量が多くても、画面をコンパクトに保てる
• 読者が「今知りたい情報」だけを選んで見られる
• プランや機能の違いがひと目で比較しやすくなる
• ページの縦スクロールが減り、全体が見やすくなる

逆に、タブブロックが向かないのはこんな場面です。

• ストーリーを順番に読ませたい1本の記事
• 1つのテーマに絞って深堀りする解説記事
• タブの数が6個以上になりそうなケース

「情報量は多いけど、全部見せたい」「比較したい項目が3〜4個ある」こういった状況で、タブブロックは特に力を発揮します。

SWELLタブブロックの基本的な使い方（挿入〜編集まで）

タブブロックの追加方法と基本操作

タブブロックの挿入手順はとてもシンプルです。

• 投稿または固定ページの編集画面を開く
• ブロック挿入ツールから「SWELLブロック」を選ぶ
• その中の「タブ」ブロックをクリックする

あるいは、本文入力欄で「/タブ」や「/tab」と入力して、候補に出てきたタブブロックを選ぶ方法でもOKです。

タブブロックを挿入すると、最初は「タブ1」「タブ2」のような仮のラベルでタブが並んだ状態になります。ここから、次のような流れで編集していきます。

• タブのラベル部分をクリックして、好きなタイトルに書き換える
• タブの中身に文章・画像・リスト・投稿リストなど必要なブロックを入れる
• プレビューでタブの切り替え動作を確認する

慣れてくると、まず1つのタブだけしっかり作ってから、タブごと複製して中身だけ差し替える、というやり方の方が早くて楽になります。

タブの追加・削除・並び替えのやり方

タブは後からでも自由に増減できます。操作のイメージは次のとおりです。

• タブの右側などにある「＋」ボタンでタブを追加する
• いらないタブの「×」アイコンで削除する
• 矢印アイコンやドラッグ操作で順番を入れ替えるテーマ設定になっていることもある

実際に触ってみるとすぐ慣れますが、「とりあえず全部タブに詰め込もう」とやりすぎると、スマホでギチギチになりがちです。目安としては、タブの数は3〜5個くらいにおさえておくと、見やすさと情報量のバランスが取りやすいです。

よく使う初期設定をまとめた早見表

ここで、初めてタブブロックを使うときに触っておきたい設定を表にまとめておきます。細かいところはあとから試していけば大丈夫なので、最初はこの辺だけ押さえておけばOKです。

項目	どこで設定するか	ざっくりおすすめ設定
スタイル（デザイン）	右サイドバーの「スタイル」	基本は標準、比較表っぽく見せたいときはボックス系
タブサイズ（PC）	右サイドバーの「タブサイズ(PC)」	とりあえず「中」にして様子を見る
タブサイズ（SP）	右サイドバーの「タブサイズ(SP)」	「小」か「中」にして、スマホで読みやすい方を選ぶ
最初に開くタブ	右サイドバーのタブ設定	一番読んでほしいタブの番号を指定する
背景色	カラー設定の「背景色」など	サイトのベースカラーに近い、うすめの色が無難

サイドバーの設定項目は、タブブロック本体を選択していないと表示されません。ラベルではなく、タブ全体の枠をクリックして選択されているか、意識しながら触ってみてください。

タブブロックの設定項目とおすすめ設定

デザイン・サイズ・開くタブなど基本設定のまとめ

タブブロックには、主に次のような設定があります。

設定項目	内容のイメージ	おすすめの考え方
スタイル	タブの形・枠線・背景の見た目を変える	比較表っぽく見せたいなら、枠付きのスタイルが使いやすい
タブサイズ(PC/SP)	PCとスマホでタブラベルの文字サイズや高さを調整する	まずはどちらも「中」にして、スマホ側だけ微調整する
何番目のタブを開くか	ページ読み込み時に表示しておくタブを指定する	左から1、2、3…と数えて、一番見てほしいタブを指定
背景色	タブ全体の背景色を変える	本文を邪魔しない、少し薄めの色にしておくと安心
角丸・境界線など	テーマやスタイルごとに装飾の雰囲気が変わる	サイト全体の雰囲気に合うかを基準に選ぶ

「最初に開くタブ」は、タブ設定の項目に数字を入れることで指定します。左から1番目、2番目…という感じで数えればOKです。ここに、読者に一番見てほしい内容を置いておくと、ページを開いた瞬間から伝えたい情報をしっかり見せられます。

アイコン・ID設定など一歩進んだ使い方

タブブロックには、慣れてきた人向けのちょっと便利な機能も用意されています。

• タブラベルの先頭にアイコンを表示する
• タブブロックに任意のIDをつける
• 特定のタブを開いた状態でページに飛ばすリンクを作る

たとえば「料金」「機能」「レビュー」といったタブに、アイコンを添えてあげるだけでも、ぱっと見で内容が伝わりやすくなります。文字ばかりになりがちな画面に、ちょっとした視覚的な目印を足してあげるイメージです。

IDを設定しておくと、「このタブを開いた状態でページを読んでもらいたい」というときに、URLで指定して飛ばせるようになります。広告や別ページから誘導するときに、地味に役立つテクニックです。

スマホ表示で気をつけたいポイント

タブブロックを使うときは、PCよりもスマホでの見え方を意識した方が失敗しにくいです。私がいつもチェックしているのは次のようなポイントです。

• タブラベルは4〜6文字くらいにおさえる
• タブ数は3〜4個にしておく
• スマホのタブサイズを変えたら、必ずプレビューで確認する
• 横スクロールが出ていないか、タブが2段になっていないかを見る

PCではきれいに収まっていても、スマホだとラベルが2段になって窮屈に見えることもあります。タブを作ったら、必ずスマホ表示に切り替えて、実際にタップしてみる習慣をつけておくと安心です。

具体例で分かるSWELLタブブロックの活用アイデア

料金・サービス比較に使うパターン

まず定番なのが「プラン比較」「サービス比較」です。料金プランがいくつかあるサービスなら、タブを使って整理してあげると、読者が違いを理解しやすくなります。

たとえば、こんなタブ構成がわかりやすいです。

タブ名	中身の主な内容	ポイント
ライトプラン	月額料金・使える機能・おすすめな人	「こんな人に向いている」を短く書く
スタンダード	月額料金・使える機能・サポート内容	一番推したいプランをここにする
プレミアム	月額料金・追加機能・サポートの違い	価格差の理由をはっきり書く

コツは、どのタブを開いても「同じ順番」「同じ情報の粒度」にそろえることです。

• 上から「料金 → 主な機能 → サポート → おすすめな人」の順に統一する
• 箇条書きの数も、できるだけそろえる

こうしておくと、読者はタブを切り替えながら「ここが違うんだな」と自然に比較できるようになります。

新着記事・人気記事タブの作り方

ブログのトップページなどでは、「新着記事」と「人気記事」をタブで切り替えられるようにしているサイトも多いですよね。SWELLでも、記事一覧をタブ切り替えで表示する設定や、タブを使った記事一覧レイアウトが用意されています。

ざっくりとした作り方の流れは次のようになります。

• タブブロックの中に「投稿リスト」ブロックを入れる
• 投稿リストの設定で「並び順」や「表示件数」を調整する
• タブごとに条件を変えて、新着と人気などを切り替えられるようにする

また、テーマのカスタマイザーから「記事一覧リスト」の設定を開き、「新着」「人気」などのタブを切り替えられるようにする機能もあります。トップページやカテゴリーページ全体に、タブ付きの記事一覧を設置したい場合は、こちらの設定も合わせて確認してみてください。

イメージとしては、次のような構成です。

タブ名	並び順・条件例	想定している読者
新着記事	公開日の新しい順に表示	最近の更新をチェックしたい人
人気記事	PV数などをもとに人気順で表示	とりあえず読んでおくべき記事を知りたい人
カテゴリ別	ブログ運営・ライフハックなどカテゴリごと	興味のあるジャンルだけ読みたい人

トップページに置くなら、「新着」と「人気」の2つだけでも十分役に立ちます。カテゴリ別のタブは、サイドバーやメニューナビでフォローしてあげると、全体としてスッキリしたレイアウトになります。

FAQ・用語集をタブでまとめるコツ

もうひとつ相性がいいのが、FAQ（よくある質問）や用語集のページです。ジャンルごとにタブを分けてあげると、読者が知りたい内容にまっすぐ辿りつけます。

たとえば、こんな分け方が考えられます。

• タブ1：料金に関する質問
• タブ2：使い方に関する質問
• タブ3：トラブル・不具合に関する質問

各タブの中身については、次のようなイメージで作ると読みやすくなります。

• 1つのタブに入れる質問は5〜7問くらいまで
• 質問文は短く、答えの中で太字や箇条書きを使って区切る
• 似たような質問はまとめて書く

タブでジャンルを分けておけば、読者は気になるタブだけパッと開いて読めるので、「情報は多いけど、知りたいことにすぐたどり着ける」ページを作りやすくなります。

デザイン調整とCSSカスタマイズの基本

色・余白など見やすさアップのチェックポイント

デザイン調整と聞くと難しく感じるかもしれませんが、最初は次のようなポイントだけ見ておけばOKです。

項目	チェックするポイント	こんな調整が有効
タブラベル	文字がつぶれていないか、読みづらくないか	文字数を減らす、フォントサイズを少し大きくする
背景色	本文とのコントラストが強すぎないか	色を少し薄める、グレー寄りにする
枠線・影	他のパーツと比べて浮いていないか	影やボーダーを弱める、または外す
余白	タブ内の文字が詰まりすぎていないか	上下の余白を少し広げる
スマホ表示	2段になっていないか、横スクロールが出ていないか	タブ数を減らす、ラベルを短くする、サイズを小さくする

私も、最初から完璧な見た目を目指すのではなく、「プレビューして気になるところを1つだけ直す」を何度か繰り返すようにしています。そのくらいの気持ちで調整したほうが、時間もかからず気楽に続けられます。

よく使うCSSカスタマイズ例

もう少し踏み込んでデザインを変えたい場合は、CSSによるカスタマイズも便利です。やること自体はシンプルで、次のような流れになります。

• 「外観」→「カスタマイズ」→「追加CSS」で、サイト全体のタブに共通するスタイルを書く
• ページごとに変えたい場合は、そのページのカスタムCSS欄にスタイルを書く

たとえば、

• メインカラーとは別のアクセントカラーでタブを目立たせたい
• 料金ページだけタブの色を変えて、特別感を出したい

といったときに、タブブロックのクラスや、自分でつけたクラス名に対して背景色や文字色を指定してあげると、印象を変えやすくなります。

CSSが苦手な場合は、既に公開されているコード例をベースに、色コードだけ差し替えるところから始めるとハードルが下がります。

デザインを崩さないための注意点

CSSでタブブロックをカスタマイズするときに、特に意識しておきたいのは次の3つです。

• テーマのアップデートでも崩れにくいように、過度な上書きはしない
• タブ全体ではなく、できるだけ自分で付けたクラス名に対してスタイルを書く
• !importantを連発しない

タブブロックは、テーマ側で細かくスタイルが指定されている部分も多いので、広い範囲に影響するCSSを書いてしまうと、別ページのタブまで想定外の見た目になってしまうことがあります。

まずは、SWELLの標準デザインとカラー設定だけでどこまで調整できるか試してみて、それでも足りないところだけCSSで補う、という順番で触っていくのがおすすめです。

SWELLタブブロックでよくあるトラブルと解決方法

タブが切り替わらない・動かないとき

「タブをクリックしても中身が切り替わらない」「全部の内容が一気に表示されてしまう」といった症状は、いくつかよくある原因があります。

まずは、次のようなところを確認してみてください。

• キャッシュ系プラグインを入れている場合は、一度キャッシュを削除する
• JavaScriptの動作を制限するプラグインが入っていないか確認する
• ブラウザの拡張機能をオフにして、別のブラウザでも試す
• SWELL本体とWordPress本体のバージョンが、案内されている推奨環境と合っているかを見る

それでも改善しない場合は、原因を切り分けていきます。

• プラグインを一度すべて停止して、ひとつずつ有効化しながら動作を確認する
• テスト用の固定ページを新しく作り、タブブロックだけを置いて動くか試す

この作業で「どのタイミングからおかしくなるか」がわかると、原因にかなり近づけます。

レイアウトが崩れたときのチェックリスト

タブブロックのレイアウト崩れは、タブの中に入れた内容が影響していることも多いです。よくあるパターンを表にまとめると、こんな感じです。

症状	よくある原因	試してみたい対処
タブの幅がバラバラ	タブラベルの文字数がバラバラ	文言を短くそろえる、似た長さに調整する
スマホでタブが2段になる	タブの数が多すぎる	タブ数を減らす、略称に変える
タブ内の画像だけ妙に大きい	画像サイズが「フルサイズ」になっている	「中」や「大」などバランスの良いサイズに変更する
タブ下の余白が広すぎる	タブ内のブロックと外側の余白設定が重なっている	どちらか一方の余白を減らす

私も、タブ内に大きめの画像や表を入れたときに、スマホで横スクロールが出てしまったことがあります。そのときは、画像サイズをひと回り小さくしたり、表の列を減らしたりするだけでかなり見やすくなりました。

それでも解決しないときの相談先

自分でいろいろ試しても解決しない場合は、どこかで区切りをつけて、詳しい人に相談したほうが早いこともあります。たとえば、次のような場所が頼りになります。

• SWELL公式サイトのマニュアルやユーザーコミュニティ
• 有料テーマのサポートフォーム
• SWELLに詳しい制作者さんのブログやSNS

そのときは、次のような情報をセットで伝えると、状況が伝わりやすくなります。

• タブブロックを使っているページのURL
• 困っている症状（できればスクリーンショット付き）
• 使用中のプラグイン一覧と、有効・無効の状況

ここまで準備して相談すると、相手も状況を把握しやすく、解決までの時間がぐっと短くなります。

よくある質問（FAQ）

Q1. タブブロックはいくつまで使っても大丈夫ですか？

A. 基本的には、1つのページの中でタブブロックを複数使っても動作します。ただし、タブブロックは動きのあるパーツなので、あまり大量に並べると読み込みが重くなったり、読者がどこを見ればいいのか迷ってしまう可能性があります。

私の感覚では、「大きめのタブブロックは1〜2個まで」にして、それ以外は通常の見出しやアコーディオンブロックなどで情報を整理してあげると、全体がスッキリしやすいです。

Q2. タブブロックとアコーディオンブロック、どう使い分ければいいですか？

A. 並列の情報を横方向に切り替えて見せたいときはタブブロック、縦に情報をたたんでおきたいときはアコーディオンブロック、と考えると分かりやすいです。

タブブロックは、料金プランや機能の比較、記事一覧の切り替えなど、「同じような種類の情報を見比べる」場面が得意です。一方で、質問と答えをたくさん並べたいFAQなどでは、アコーディオンブロックの方が自然なことも多いです。

Q3. タブブロックの色がサイトのメインカラーと合わないときはどうすればいいですか？

A. まずは、タブブロックのカラー設定から背景色や枠線の色を調整してみてください。それでも雰囲気が合わないと感じる場合は、追加CSSやページごとのカスタムCSSを使って、タブ用の色を少しだけ変えてあげると、全体の統一感が出やすくなります。

いきなり派手な色に変えると浮いてしまうので、サイトでよく使っている色を少し薄めにした色から試してみると、しっくりきやすいです。

まとめ：SWELLタブブロックを味方にして、読みやすい記事を作ろう

この記事のポイントを整理します

• タブブロックは、情報量の多い内容をコンパクトにまとめるのが得意なブロック
• 基本の使い方は「挿入 → ラベル編集 → 中身を入れる」のシンプルな流れ
• スタイル・タブサイズ・最初に開くタブの3つを押さえると、一気に使いやすくなる
• 料金比較・新着／人気記事・FAQなど、用途ごとに「型」を決めておくと量産しやすい
• デザインは、標準設定で調整してから、必要に応じてCSSで少しだけ手を入れる

今日からできる最初の一歩としては、テスト用の固定ページを1つ作って、次の流れで試してみてください。

• タブを3つだけ作る（例：プランA／プランB／プランC）
• それぞれのタブに、料金と簡単な特徴を書いてみる
• PCとスマホの両方でプレビューし、タブサイズや背景色を少しだけ調整する

この小さな練習で、「自分のサイトに合うタブの型」が1つできあがります。一度その型が決まってしまえば、以降の比較記事やトップページ作りがぐっと楽になります。

SWELLのタブブロックとうまく付き合いながら、読者が迷わずスイスイ読めるページを一緒に増やしていきましょう。