SWELLのタブ切り替え3ステップ｜初心者でも迷わない設定ガイド

SWELLでタブの切り替えを使ってみたいけれど、「どこを触ればいいのか分からない」「設定が多くて途中で止まっている」という方は多いと思います。

この記事では、そんなときに迷子にならないように、SWELLのタブ切り替えの種類と使い方を、順番にやさしく整理していきます。

ひとことで言うと、SWELLのタブ切り替えはポイントだけ押さえれば難しくないので、一緒に少しずつ形にしていきましょう。

SWELLのタブ切り替えで何ができる？基本の考え方

ブロックエディターで使えるSWELLタブブロックの特徴

まずは、投稿や固定ページの中で使う「タブブロック」です。

これは、1つのページの中で内容を切り替えるためのブロックで、商品比較や料金プランの比較などに向いています。

代表的な使いどころを表にまとめておきます。

使い方の例	タブタイトルの例	向いている理由
料金プラン比較	ベーシック / スタンダード / プレミアム	縦長になりがちな料金表をタブに分けて見やすくできる
サービスの詳細説明	特長 / 料金 / よくある質問	知りたい情報だけをピンポイントで開ける
ブログの書き方講座	準備 / 執筆 / 添削	ステップごとに情報を整理しやすい
商品レビュー	良い点 / 気になる点 / 総評	メリットとデメリットを切り替えながら比較しやすい

SWELLのタブブロックは、ブロックエディター上でタブの追加や並び替えが直感的にできるので、HTMLやCSSが分からなくてもタブによる切り替えを実装できます。

「ページには情報をたくさん載せたいけれど、読者にはスッキリ見せたい」というときに、かなり心強いブロックです。

記事一覧のタブ切り替え機能との違い

もう一つが、トップページなどで使う「記事一覧リストのタブ切り替え」です。

こちらは、記事カードをタブで出し分けるイメージを持ってもらうと分かりやすいです。

例えば、次のような構成が定番です。

• 新着記事 / 人気記事をタブで切り替える
• 「ブログ運営」「ライフハック」などカテゴリ別のタブ
• お知らせ / イベント / セール情報などのお知らせ系タブ

タブブロックは「1ページ内の情報の見せ方を切り替えるもの」、記事一覧のタブ切り替えは「サイト全体の記事の見せ方を切り替えるもの」と覚えておくと整理しやすいです。

SWELLタブ切り替えを使う前に決めておきたいこと

タブを使うべきページ・使わない方がいいページ

タブ切り替えは便利な反面、どこにでも使えば良いというものでもありません。

タブを使うと効果的なページと、あえて使わない方が読みやすいページを分けて考えてみましょう。

タブを使うと相性がいいページ

• 情報量が多く、縦に長くなりやすいページ
• 料金表や比較表など、一覧性が大事なページ
• トップページなど、初めての人がよく訪れるページ

タブをあまり使わない方がいいページ

• 1つのテーマをストーリー形式で読ませたい記事
• スクロールしながら流れで理解してもらいたい解説記事
• そもそも文字数が少なく、タブの中身がスカスカになりそうな記事

SWELLのタブ切り替えは、「情報を整理してあげたい場所」に絞って使うイメージを持つと、サイト全体の印象がスッキリします。

タブの数・名前をどう決めるか

タブの数や名前の付け方は、ユーザー体験に直結します。

私がサイト制作や自分のブログで試して、しっくりきたルールをいくつか紹介します。

たとえば、記事一覧のタブ切り替えなら「新着」「人気」「カテゴリ名」のように、誰が見ても意味が伝わるタブ名にするだけで、クリックしたくなる確率が上がります。

SWELLタブブロックでコンテンツをタブ切り替えする手順

タブブロックの挿入から基本設定までの流れ

SWELLのタブブロックは、ブロックの追加から設定まで一連の流れを覚えてしまえば、あとは応用するだけです。

ざっと全体の流れを表にまとめておきます。

ステップ	操作内容	ポイント
1	ブロック追加ボタンから「SWELLブロック」を開く	SWELL専用ブロック一覧の中に「タブ」がある
2	「タブ」ブロックを挿入する	初期状態では2つのタブが並んだ形で挿入される
3	タブタイトルを書き換える	「基本」「応用」など、短くて意味が伝わる名前にする
4	それぞれのタブに中身のコンテンツを入れる	通常の段落や画像、リストなどを自由に入れられる
5	設定パネルでスタイルやタブ数を調整する	あとからタブの追加・削除や見た目の変更も簡単
6	初期表示にするタブを選ぶ	多くの人に見てほしいタブを最初に表示する

最初からたくさん文章を詰め込むより、「見出し＋短い説明＋ボタン」くらいのシンプルな構成で試してみると、全体のバランスがつかみやすくなります。

タブコンテンツに入れると相性がいい情報の例

タブ切り替えは、「同じテーマだけれど視点が違う情報」を並べると、とても相性がいいです。

例えば、ブログ運営のノウハウ記事なら次のような分け方ができます。

• タブ1：手順（やり方）
• タブ2：具体例（実例）
• タブ3：よくある失敗と対策

商品レビュー系の記事なら、こんな感じです。

• タブ1：良いところ
• タブ2：イマイチなところ
• タブ3：おすすめの人・おすすめしない人

タブごとに役割をはっきり分けてあげると、読者は自分が知りたい情報だけをストレスなく読めます。

SWELLのタブ切り替えを活かすためにも、「このタブでは何を比較させたいのか」を先に決めてから中身を作るのがおすすめです。

タブブロックをスマホで見やすくする設定

タブブロックは、スマホでの見え方もかなり重要です。タブ名が長かったり数が多すぎたりすると、2段になって読みにくくなってしまいます。

スマホでの見やすさのために意識したいポイントをまとめておきます。

SWELLのタブブロックは設定パネルからスタイルやサイズを変えられるので、まずはデフォルトで試して、気になるところだけ微調整していくイメージで触ると迷いにくいです。

SWELLのタブ切り替え付き記事一覧を作る方法

トップページで新着と人気記事をタブ切り替えする手順

もっともよく使われる組み合わせが、「新着記事」と「人気記事」のタブです。

管理画面のカスタマイザーから設定していく流れを整理します。

ステップ	操作場所のイメージ	設定のポイント
1	外観 → カスタマイズに進む	SWELLの全体設定を行う画面に入る
2	「記事一覧リスト」関連のメニューを開く	トップページやアーカイブの一覧表示をまとめて設定できる
3	タブ切り替えの項目をオンにする	新着・人気など、表示したいタブを選択できる
4	それぞれのタブの名前（ラベル）を編集する	「新着」「人気」など短くて分かりやすい名前にする
5	タブごとの表示件数や並び順を調整する	1タブあたり何記事出すか、どこまで見せるかを決める
6	プレビューでPC・スマホ両方を確認し、公開する	文字の折返しやタップしやすさを必ずチェックする

新着と人気記事をタブで切り替えられるようにするだけでも、読者は「今の情報」と「よく読まれている情報」を行き来しやすくなります。

結果として、サイト内の回遊が自然に増えていくことが期待できます。

カテゴリ・タグ別タブ一覧（タームタブ）の作り方

SWELLでは、カテゴリやタグをタブにして記事一覧を切り替える「タームタブ」も用意されています。

ジャンルが複数あるブログや、企業サイトなどでとても使いやすいタブ切り替えです。

設定のざっくりした流れは次のようなイメージです。

• 記事一覧リストの設定画面で、タブ切り替えの種類を「カテゴリ」または「タグ」にする
• タブとして表示したいカテゴリ（またはタグ）を選ぶ
• 各タブごとの表示件数や並び順を調整する

カテゴリが多い場合は、全部をタブにするのではなく、よく読まれるものや見てもらいたいものを3〜4つに絞るとスッキリします。

例えば、「全記事」「ブログ運営」「ライフスタイル」「レビュー」といった分け方にしておくと、初めての人でも自分の興味に合わせて選びやすくなります。

ブログタイプ別おすすめタブ構成パターン

「タブで切り替えたいのは分かったけれど、どういう構成にすればいいか分からない」という場合もあると思います。

そこで、ブログのタイプ別におすすめのタブ構成パターンを表にまとめました。

ブログタイプ	タブ構成の例	狙い
雑記ブログ	新着 / 人気 / カテゴリA / カテゴリB	いろいろなテーマの記事があっても、興味のあるジャンルに入りやすくする
特化ブログ（1テーマ）	新着 / ランキング / 初心者向け / 中級者向け	同じテーマでも、読むべき順番や難易度を示してあげる
企業サイト	お知らせ / コラム / 事例 / 採用情報	訪問者の目的ごとに情報を分けて、必要な情報へすぐ誘導する
EC系ブログ	新着 / 売れ筋 / セール / レビュー	購入につながりやすい情報をタブにまとめて見せる

自分のサイトの目的をざっくり整理してから、この表をベースにタブ構成をアレンジしてみると、タブの数や名前を決めやすくなります。

SWELLのタブ切り替えは、こうした「導線の整理」に使うと本領を発揮してくれます。

SWELLタブ切り替えをおしゃれに見せるデザインとCSSのコツ

標準機能だけでできるタブデザイン調整

まずはCSSを書かずに、SWELL標準の設定でできる範囲を整えてしまいましょう。

タブ周りは、テーマカラーとの相性がかなり大きいので、ベースの色を調整するだけでも印象が変わります。

調整する項目	どこで変えられるか	見た目への影響
テーマカラー（メイン色）	カスタマイザーの配色設定	タブのアクティブ色やリンク色などに反映されることが多い
タブのスタイル	タブブロックの設定パネル	下線タイプやボタンタイプなど、雰囲気を簡単に変えられる
角丸の有無	デザイン関連の設定（ボーダーや角丸）	かっちりした印象か、やわらかい印象かが決まる
文字サイズ	全体の文字サイズ設定やブロック個別の設定	スマホでの読みやすさに直結する

いきなり細かいCSSをいじるより、まずはテーマカラーとタブのスタイルを整える方が確実です。

サイト全体の雰囲気とタブの見た目が揃っているだけで、「ちゃんとデザインされているサイト」という印象になります。

コピペで使えるシンプルなカスタマイズ例の考え方

CSSでタブをカスタマイズするときも、「全部変えよう」と欲張る必要はありません。

むしろ、やりすぎると他のパーツとのバランスが崩れてしまいます。

タブを少しだけカスタムしたいときの考え方をまとめると、次のような感じです。

• まずは「色」「角丸」「影」のどれか1つだけ変える
• ホバー時の色を少し暗くするなど、変化が分かりやすいところから触る
• タブごとに色を変えたい場合は、nth-child指定で色を足しすぎないようにする
• タブの上下の余白を少し広げるだけでも、読みやすさがかなり変わる

例えば、「アクティブなタブだけ背景色を少し濃くする」「タブの下線だけ太くする」といったシンプルな変化でも、SWELLらしいきれいなデザインを保ったまま個性を出せます。

配色と余白でタブの可読性を上げる

デザインに迷ったときは、細かい装飾よりも「配色」と「余白」だけを見ると判断しやすくなります。

• 背景色とタブの色のコントラストをしっかりつける
• アクティブなタブと他のタブで、色だけでなく太さや下線も変える
• タブ周りの余白を少し広げて、「タブがまとまっている箱」を意識させる
• タブの文字色を本文より少しだけ濃くして、見出しのような役割を持たせる

タブ切り替えはナビゲーションのような役割も持っているので、「ここを押せば切り替わる場所なんだ」と一目で分かることが大事です。

SWELLの設定を触りながら、少しずつ自分のサイトに合うバランスを探してみてください。

SWELLタブ切り替えでよくあるつまずきと解決策

タブが切り替わらない・表示がおかしいときに見るポイント

タブをクリックしても反応しない、表示が崩れる、といった相談は意外と多いです。

よくある症状と原因、チェックポイントを表に整理します。

症状	よくある原因の例	チェック・対処のポイント
タブをクリックしても内容が切り替わらない	キャッシュ系プラグインの影響	キャッシュ削除や、一時的にプラグインを無効化して動作を確認する
サイト全体の動作が重く、タブもカクカクする	JSを多く読み込むプラグインを大量に導入している	不要なプラグインを停止し、1つずつ様子を見る
特定ページだけタブのレイアウトが崩れる	そのページだけに当てたカスタムCSSの影響	追加CSSを一度オフにして、表示が戻るか確認する
スマホだけタブが2段になって読みにくい	タブ名が長すぎる、タブ数が多すぎる	タブ名を短くするか、タブ数を減らしてレイアウトを整える
一部のタブ内だけレイアウトが崩れる	タブごとのコンテンツの高さ差が大きい	画像サイズや段落を調整し、高さ差をできるだけ小さくする

SWELLのタブ切り替えが動かないときは、テーマ本体というより「他プラグインとの相性」や「個別CSS」が原因になっているケースもよくあります。

焦らずに、1つずつ機能をオフにしながら原因を切り分けていくのが結局一番早いです。

タブを増やしすぎたときのUXの問題

タブは便利なので、つい増やしたくなりますが、やりすぎると読みにくくなります。

• 横スクロールしないと全部のタブが見えない
• どのタブから読めばいいか分からず、選ぶのが面倒になる
• 似たような名前のタブが並び、違いが分かりにくい

こうなると、せっかくのタブが「親切なメニュー」ではなく「ハードルの高いメニュー」になってしまいます。

SWELLのタブ切り替えは、情報を詰め込むためではなく「必要な情報だけ残すための道具」と考えると、ちょうど良いバランスが取りやすいです。

複数タブブロックを置くときの注意点

1つのページにタブブロックをいくつも置くと、視覚的な疲れや混乱が出てくることがあります。

• どのタブを操作していたのか、読者が分からなくなる
• ページ内リンクや目次と役割がかぶり、導線が複雑に見える
• スマホではタブの連続で、スクロールが大変になる

私の場合、「1ページに使うタブブロックは最大2つまで」というマイルールを作ることが多いです。

最初のタブでページ全体を整理して、後半のタブで比較情報をまとめる、といった使い方にすると、SWELLのタブ切り替えの良さを活かしつつ、ゴチャゴチャ感を抑えやすくなります。

よくある質問

Q1. SWELLのタブ切り替えはSEO的に不利になりませんか？

A. 一般的な使い方をしている限り、SWELLのタブ切り替えを使ったからといって、SEOで大きく不利になることはあまり気にしなくて大丈夫です。

タブ内のテキストも基本的にはページのHTMLとして読み込まれているので、検索エンジンから完全に見えなくなるわけではありません。

ただし、重要な見出しや結論、メインのキーワードを全部タブの奥に入れてしまうと、ユーザーにも検索エンジンにも伝わりにくくなります。

SWELLのタブ切り替えは、「補足情報」や「比較情報」を整理する場所と考え、いちばん大事な内容は通常の本文や見出しで見せることを意識してみてください。

Q2. SWELL以外のタブ系プラグインと併用しても大丈夫？

A. 技術的には、SWELLテーマのタブ切り替えと他のタブ系プラグインを併用することも可能です。

ただ、その場合はJavaScriptやCSSがぶつかって、表示崩れや動作不良が起こるリスクも高くなります。

運用のしやすさを考えると、タブ機能はできるだけSWELL側の機能で完結させた方が、トラブルも少なく管理しやすいと感じています。

どうしても他のプラグインのタブを使いたい場合は、次のような点に気をつけてみてください。

• 同じページの中に、SWELLのタブと他プラグインのタブを混在させない
• どちらのタブをメインで使うか決めて、役割をはっきり分ける

Q3. SWELLタブ切り替えがうまく動かないときのチェック順は？

A. SWELLのタブ切り替えがうまく動かないときは、次の順番でチェックしていくと原因を見つけやすいです。

• キャッシュ系プラグインを一時停止し、ブラウザのキャッシュも削除して確認する
• シークレットウィンドウなど、ログインしていない状態の表示を確認する
• 他のプラグインを1つずつオフにし、どこで動作が変わるかをチェックする
• そのページだけに書いたカスタムCSSがあれば、一度コメントアウトして様子を見る

この流れで試していくと、「SWELL本体の問題なのか」「他の要素との相性なのか」が切り分けやすくなります。

まとめ：SWELLのタブ切り替えで「探しやすいサイト」を作ろう

この記事のポイントを振り返ります

今日からできる最初の一歩として、まずは自分のサイトのトップページを開いて、「ここにタブがあると分かりやすくなりそうだな」と思う場所を1つだけ探してみてください。

その場所に、新着と人気記事、または主要カテゴリのタブを試しに置いてみるだけでも、サイトの見え方はかなり変わります。

少しずつタブの数や配置を調整しながら、自分のサイトにとって一番しっくりくるSWELLのタブ切り替えの形を育てていきましょう。