MENU
お問い合わせ
CONTACT
  1. ホーム
  2. SWELL
  3. SWELLタブカスタマイズ全集！色やデザイン、スマホ設定を徹底解説

SWELLタブカスタマイズ全集！色やデザイン、スマホ設定を徹底解説

SWELL ウェブ制作・ライティング

こんにちは。hakubi code 代表のてらだです。

サイトのデザインを整えているとき、「もっとSWELLのタブブロックをおしゃれにカスタマイズできないかな？」と思うことってありませんか。
標準のままでも十分に使いやすいですが、色やアイコンを変更してサイトの雰囲気に合わせたり、スマホ表示での横スクロールや切り替え動作にこだわりたいという要望は尽きないものです。

特にタブがうまく切り替わらないといったトラブルに直面すると、どう対処すればいいか悩んでしまいますよね。今回は、そんなあなたのこだわりや悩みを解消するためのテクニックをまとめてみました。

  • SWELLタブのデザインをおしゃれに見せる配色のコツ
  • スマホ表示で見やすいタブ設定と横スクロールの仕様
  • 新着記事やカテゴリー別の記事一覧をタブで切り替える方法
  • タブが反応しない・切り替わらない時の具体的な修正手順
目次

初心者必見のSWELLタブカスタマイズと基本設定

初心者必見のSWELLタブカスタマイズと基本設定

SWELLのタブブロックは、ただ情報を整理するだけでなく、少しの手間でサイトの印象をガラリと変えるポテンシャルを持っています。ここでは、今日からすぐに使えるデザインのコツや、スマホユーザーを逃さないための必須設定について、私が普段実践している内容をベースに解説していきます。

デザインをおしゃれにするコツ

デザインをおしゃれにするコツ

タブデザインをおしゃれに見せる一番の近道は、「スタイル」と「角丸」の使い分けにあると私は考えています。

SWELLには標準で「ノーマル」「ふきだし」「下線」という3つのスタイルが用意されていますよね。これらをなんとなく選んでいませんか？実は、それぞれのスタイルには適したシチュエーションがあるんです。

スタイル特徴とおすすめの用途
ノーマルカチッとした印象。スペック比較やサービス案内など、信頼感を出したい時に最適。
ふきだし親しみやすい印象。Q&Aやブログ記事内の選択肢など、クリックを促したい時に。
下線シンプルでモダン。圧迫感がないので、ミニマルなデザインや画像の邪魔をしたくない時に。

「ノーマル」です。

「ふきだし」です。

「下線」です。

さらに、ここへ「角丸（border-radius）」のCSSを加えるだけで、一気にオリジナリティが出ます。特に「ふきだしスタイル」を使うとき、角を少し丸くするだけで、クリックしたくなるような柔らかいボタンのような見た目になります。

普通に角丸を追加すると、色が切り替わるときに一瞬四角く戻ってしまうことがあります。
これを防ぐために、あらかじめ元のボタンに角丸を設定しておくのがコツです。まずはこのコードで、「形」と「基本の色」を整えてみてください。

/* ==============================================
   SWELLタブブロック カラー＆デザイン一括カスタマイズ
   ============================================== */

/* --- 1. ノーマルスタイルのカスタマイズ --- */
/* ベースの形（左上と右下を丸くする個性的な形） */
.is-style-default .c-tabList__button {
    border-radius: 8px 0 8px 0; /* 左上・右上・右下・左下の順 */
    transition: background-color 0.3s ease;
}

/* 選択中・ホバー時の色設定 */
.is-style-default .c-tabList__button:hover, 
.is-style-default .c-tabList__button[aria-selected="true"] {
    background-color: #db2d16 !important;
}

/* コンテンツ枠の色と形（ボタンに合わせて対角を丸く） */
.is-style-default .c-tabBody {
    border: 1px solid #db2d16;
    border-radius: 8px 0 8px 0;
}

/* --- 2. ふきだしスタイルのカスタマイズ --- */
/* ベースの形（全体を丸くする） */
.is-style-balloon .c-tabList__button {
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* 選択中・ホバー時の色設定 */
.is-style-balloon .c-tabList__button:hover, 
.is-style-balloon .c-tabList__button[aria-selected="true"] {
    background-color: #db2d16;
}

/* ふきだしの矢印（三角形）の色設定 */
.is-style-balloon .c-tabList__button::before {
    border-top-color: #db2d16;
}

/* --- 3. 下線スタイルのカスタマイズ --- */
/* 選択中・ホバー時の文字色設定 */
.is-style-bb .c-tabList__button:hover, 
.is-style-bb .c-tabList__button[aria-selected="true"] {
    color: #db2d16;
}

/* 下線の色設定（borderではなくbackground-colorで指定） */
.is-style-bb .c-tabList__button::after {
    background-color: #db2d16;
}

「ノーマル」です。

「ふきだし」です。

「下線」です。

デザインのポイント
女性向けの柔らかいサイトなら角を丸く、ビジネスライクなサイトなら四角のままにするなど、サイト全体のトーン＆マナーに合わせるのがおしゃれへの第一歩です。

色や背景色を変更する手順【コピペOK】

色や背景色を変更する手順【コピペOK】

「サイトのキーカラーとタブの色を合わせたい」というのはよくある相談ですが、実は多くのSWELLユーザーが探していても見つけられないカスタマイズがあります。

それは、「タブごとに違う色を設定したい」という要望です。

通常の設定やよくあるCSSコードでは「全てのタブが同じ色」になってしまいます。しかし、「メリット（青）」と「デメリット（赤）」のように、内容に合わせて色を変えたいシーンは多いはず。そこで今回は、他ではあまり紹介されていない「タブの順番を指定して個別に色を変えるコード」を特別に紹介します。

このカスタマイズで実現できること
・1つ目のタブは「赤」、2つ目のタブは「青」にする
・特定の商品カラーに合わせてタブを配色する
・「選択中」と「未選択」の色を個別に制御する

以下のコードを「カスタマイズ」＞「追加CSS」に貼り付けてみてください。nth-child(1)の数字を変えれば、何番目のタブでも自由に指定できます。

/* ==============================================
タブごとに色を個別に変える（超完全版）
============================================== */

/* --- 1つ目のタブを「赤」にする設定 --- */
/* 1. 未選択の状態 */
.swell-block-tab .c-tabList__item:nth-child(1) .c-tabList__button {
	background-color: #fcecec; /* 薄い赤 */
	color: #bf0000;            /* 濃い赤文字 */
}

/* 2. 選択中・ホバー時の「背景と文字」 */
.swell-block-tab .c-tabList__item:nth-child(1) .c-tabList__button:hover,
.swell-block-tab .c-tabList__item:nth-child(1) .c-tabList__button[aria-selected="true"] {
	background-color: #bf0000; /* 濃い赤背景 */
	color: #ffffff;            /* 白文字 */
}

/* 3. 吹き出しスタイルの「三角」の色（選択中 ＋ ホバー時も追加！） */
.swell-block-tab.is-style-balloon .c-tabList__item:nth-child(1) .c-tabList__button:hover::before,
.swell-block-tab.is-style-balloon .c-tabList__item:nth-child(1) .c-tabList__button[aria-selected="true"]::before {
	border-top-color: #bf0000;
}

/* 4. 下線スタイルの「線」の色 */
.swell-block-tab.is-style-bb .c-tabList__item:nth-child(1) .c-tabList__button::after {
	background-color: #bf0000;
}


/* --- 2つ目のタブを「青」にする設定 --- */
/* 1. 未選択の状態 */
.swell-block-tab .c-tabList__item:nth-child(2) .c-tabList__button {
	background-color: #ecf4fc; /* 薄い青 */
	color: #004bb1;            /* 濃い青文字 */
}

/* 2. 選択中・ホバー時の「背景と文字」 */
.swell-block-tab .c-tabList__item:nth-child(2) .c-tabList__button:hover,
.swell-block-tab .c-tabList__item:nth-child(2) .c-tabList__button[aria-selected="true"] {
	background-color: #004bb1; /* 濃い青背景 */
	color: #ffffff;
}

/* 3. 吹き出しスタイルの「三角」の色（選択中 ＋ ホバー時も追加！） */
.swell-block-tab.is-style-balloon .c-tabList__item:nth-child(2) .c-tabList__button:hover::before,
.swell-block-tab.is-style-balloon .c-tabList__item:nth-child(2) .c-tabList__button[aria-selected="true"]::before {
	border-top-color: #004bb1;
}

/* 4. 下線スタイルの「線」の色 */
.swell-block-tab.is-style-bb .c-tabList__item:nth-child(2) .c-tabList__button::after {
	background-color: #004bb1;
}

「ノーマル」です。

「ふきだし」です。

「下線」です。

このnth-child(数字)というセレクタを使うのがプロのテクニックです。これを活用すれば、「松・竹・梅」のようなランク分けや、キャラクターのイメージカラーに合わせた配色など、表現の幅がグッと広がります。ぜひ試してみてください！

あわせて読みたい
SWELL Googleフォント設定ガイド。Webフォントの速度問題も解説 こんにちは。hakubi code 代表のてらだです。 WordPressテーマSWELLでサイトを立ち上げた時、フォント設定ってどうしてますか？ SWELLでWebフォントを使って、サイトデ…

アイコンを設定して視認性を上げる

アイコンを設定して視認性を上げる

文字だけのタブって、読むのが少し面倒に感じませんか？私は、可能な限りアイコンをセットで使うことをおすすめしています。

人間は文字よりも画像（アイコン）の方を圧倒的に早く認識できると言われています。例えば「カメラ」という文字を読むより、カメラのアイコンを見た方が一瞬で意味が伝わりますよね。

SWELLのタブブロックは優秀で、標準機能としてアイコン設定がサポートされています。エディタ上でタブのタイトル部分をクリックすれば、SWELLに内蔵されているアイコンセットから選んだり、クラス名を入力して外部アイコンを使ったりすることができます。

おすすめの組み合わせ例
・「ペンのアイコン」＋「記事一覧」
・「フキダシのアイコン」＋「よくある質問」
・「星のアイコン」＋「人気ランキング」

わかりやすいですね！

このようにアイコンを添えるだけで、ユーザーの認知負荷（脳の疲れ）を減らし、結果としてサイトの使い勝手＝UXを向上させることができます。小さなことですが、こういう配慮がプロっぽさを生むんですよね。

スマホ表示を最適化する設定

スマホ表示を最適化する設定

今の時代、スマホでの見え方を無視してサイトを作ることはできません。特にタブブロックは、PCでは綺麗に並んでいても、画面の狭いスマホだとレイアウトが崩れがちなパーツの一つです。

SWELLでは、デバイスごとの表示設定機能がかなり充実しています。私が必ずチェックするのは以下の項目です。

  • スマホでのタブサイズ：指でタップしやすい大きさになっているか？
  • 列数の調整：無理に横に並べすぎて、文字が潰れていないか？

例えば、PCでは4つ横並びのタブでも、スマホでは2列×2行にするか、あるいは縦積みにする方が親切な場合があります。SWELLのプレビュー機能を使いながら、「自分の指で押しやすいか？」を確認しながら調整してみてください。

横スクロールしない理由と仕様

横スクロールしない理由と仕様

ここ、気になりますよね。「YouTubeのアプリみたいに、タブのメニューを横にシュッとスクロールさせたいのにできない！」という相談をよく受けます。

結論から言うと、SWELLの標準タブブロックには、メニュー部分を横スクロールさせる機能はありません。

SWELLは基本的に、スマホでは「折り返して表示」するか「縮小して表示」する仕様になっています。もしメニュー部分を横スクロールさせたいなら、高度なCSS（overflow-xなど）を書く必要があります。

よくある誤解
「リッチカラムブロック」にはスマホでの横スクロール設定がありますが、あれは「コンテンツを並べる」ためのもので、「切り替える」ためのタブブロックとは別物です。
もし、タブの中にある「表」などをスクロールさせたい場合は、タブ自体の設定ではなく、中に入れたテーブルブロック側で「横スクロール」を有効にする必要があります。

高度なSWELLタブカスタマイズとトラブル対処

高度なSWELLタブカスタマイズとトラブル対処

ここからは、SWELLのポテンシャルを最大限に引き出すための応用テクニックと、いざという時のトラブルシューティングについて解説します。特に「新着記事」と「人気記事」の切り替えなどは、サイトの回遊率を上げるための鉄板テクニックですよ。

「新着・人気記事」の切り替えリスト作成

「新着・人気記事」の切り替えリスト作成

トップページでよく見かける「新着記事」と「人気記事」をタブで切り替えるUI。これ、SWELLならプラグインなしで簡単に実装できるってご存知でしたか？

やり方はシンプルで、タブブロックの中に「投稿リストブロック」を入れる（ネストする）だけです。

  1. タブブロックを配置し、タブを2つ作成します。
  2. 1つ目のタブ（ラベル：新着記事）の中に「投稿リストブロック」を入れ、設定で「新着順」を選びます。
  3. 2つ目のタブ（ラベル：人気記事）の中にも「投稿リストブロック」を入れ、設定で「人気順（PV順）」を選びます。

たったこれだけで、動的に更新される高機能な記事リストが完成します。限られたスペースで多くの情報を提示できるので、スマホユーザーにとって非常にありがたい設計になります。

この「ブロックの中にブロックを入れる」という考え方は、複雑なレイアウトを作る際の基本になります。以前紹介したループスライダーの実装でも似たような構造を使っていますので、興味があれば見てみてください。

あわせて読みたい
SWELL完全対応！ループスライダーをCSSコピペで簡単実装 こんにちは。hakubi code 代表のてらだです。 SWELLで企業ロゴなんかが流れる、あの「ループスライダー」を実装したいけど、標準機能にはなくて困ってませんか。 CSSで…

カテゴリー別の記事一覧を表示する方法

カテゴリー別の記事一覧を表示する方法

先ほどの応用編として、タブごとに特定のカテゴリー記事を表示させるテクニックもあります。例えば「ブログ」タブと「お知らせ」タブを分けたい場合などですね。

この場合も投稿リストブロックを使いますが、設定画面にある「タクソノミーの条件設定」を活用します。ここで表示させたいカテゴリーIDやスラッグを指定すれば、そのカテゴリーの記事だけを抽出して表示できます。

さらに使いやすくするコツ 各タブの下に「もっと見る」ボタンを設置する場合、それぞれのタブの内容に合わせたリンク先を設定するのを忘れないでください。SWELLの投稿リスト設定には「MOREリンクのURL」という項目があるので、ここに各カテゴリー一覧ページへのURLを入力しておきましょう。

タブが切り替わらない時の解決策

タブが切り替わらない時の解決策

「設定は合っているはずなのに、クリックしてもタブが切り替わらない！」 これは本当に焦りますよね。私の経験上、この原因の多くはHTML属性の不整合かJavaScriptのエラーです。

特にWordPressやテーマのアップデート直後に起こりやすいのですが、タブのHTMLに含まれる data-onclick="tabControl" という部分が、セキュリティ対策や自動整形によって壊れてしまっているケースがあります。

また、ブラウザのキャッシュが強力に残っていると、古いスクリプトと新しいHTMLが喧嘩をして動かないこともあります。まずは落ち着いて、ブラウザのキャッシュクリアや、シークレットモードでの確認を試してみてください。

タブが反応しない原因と対処法

タブが反応しない原因と対処法

キャッシュを消しても直らない場合、より技術的な「パッチ当て」が必要になることがあります。これはfunctions.phpを使って、強制的にタブの動作を制御するスクリプトを読み込ませる方法です。

具体的には、以下のようなロジックでJavaScriptを動かします。

  • ページ読み込み完了（DOMContentLoaded）を待つ
  • 全てのタブボタン要素を取得する
  • クリックされたら、デフォルトの動作をキャンセル（preventDefault）する
  • ARIA属性（aria-selected / aria-hidden）を書き換えて表示を切り替える

少し専門的な話になりますが、SWELL標準の機能に頼らず、自分で書いたスクリプトで上書きして動かすという「緊急回避策」です。もし自分でコードを書くのが不安な場合は、無理に触らずにSWELLのフォーラムで相談するか、専門家に依頼することをおすすめします。

注意点
functions.phpの編集は、記述を間違えるとサイト全体が真っ白になるリスクがあります。必ずバックアップを取ってから作業してくださいね。

SWELLタブカスタマイズの総まとめ

SWELLタブカスタマイズの総まとめ

今回は「swell タブ カスタマイズ」をテーマに、デザインの調整からトラブルシューティングまで幅広く解説してきました。

SWELLのタブブロックは、単なる飾りではありません。情報を整理し、ユーザーに必要な情報を最短距離で届けるための強力なツールです。色やアイコンで見た目を整えることも大切ですが、それ以上に「スマホで見やすいか？」「目的の記事にたどり着きやすいか？」という視点を持ってカスタマイズすることが、結果として読者の満足度につながります。

ぜひ、今回紹介したテクニックを使って、あなたのサイトだけの使いやすいタブを作り上げてみてください。

SWELL ウェブ制作・ライティング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次