WordPressでタブを作る方法｜プラグイン・ブロック編集・HTML/CSSで簡単実装

はじめに

WordPressの記事や固定ページにタブを設置すると、限られたスペースに複数の情報を整理して表示できます。料金プラン、商品仕様、店舗情報、よくある質問など、内容を分類して見せたい場面に便利です。

WordPressでタブを作る方法は、主に次の3つです。

• タブ作成プラグインを利用する

• ブロックエディターの拡張ブロックを利用する

• HTML・CSS・JavaScriptで自作する

初心者にはプラグインや拡張ブロックが適しており、デザインや動作を細かく調整したい場合はHTML/CSSによる自作が向いています。

この記事では、それぞれの作り方を具体的な手順とコード例付きで解説します。タブが表示されない場合の対処法や、SEOへの影響についても確認していきましょう。

1. WordPressのタブとは？できることと活用シーン

1-1. タブ表示の基本的な仕組み

タブとは、複数の見出しを横または縦に並べ、選択された見出しに対応するコンテンツだけを表示する仕組みです。

たとえば、「基本情報」「料金」「アクセス」という3つのタブを用意すると、訪問者は知りたい項目をクリックして内容を切り替えられます。

一般的なタブは、次の2つの要素で構成されます。

• 切り替え操作を行うタブボタン

• 各ボタンに対応するコンテンツパネル

WordPressでは、プラグインの専用ブロックやHTML、CSS、JavaScriptを使って、この仕組みを実装します。

1-2. タブを使うメリット

WordPressにタブを設置する主なメリットは、ページ内の情報をコンパクトに整理できることです。

長い説明をすべて縦に並べると、ページのスクロール量が増え、訪問者が目的の情報を探しにくくなります。タブを利用すれば、関連する情報をグループに分け、必要な内容だけを表示できます。

特に、次のような効果が期待できます。

• ページ全体をすっきり見せられる

• 情報の種類やカテゴリーを整理できる

• 訪問者が目的の情報を探しやすくなる

• 同じ場所で複数の商品やプランを比較できる

• スマートフォンでのスクロール量を抑えられる

ただし、重要な情報をすべてタブの中に隠すと、存在に気づかれない可能性があります。ページの結論や主要な訴求内容は通常表示し、補足情報や比較情報をタブにまとめる使い方がおすすめです。

1-3. よく使われる表示例

WordPressのタブは、次のようなコンテンツでよく利用されています。

たとえば料金ページでは、「月額プラン」「年間プラン」「法人プラン」をタブで切り替えられるようにすると、各プランの違いを整理して見せられます。

1-4. アコーディオンとの違い

タブとアコーディオンは、どちらも情報を折りたたんで表示するUIですが、操作方法が異なります。

タブは、上部や左側に並んだボタンを選び、同じ表示領域の内容を切り替える形式です。一方、アコーディオンは、見出しをクリックすると、その見出しの直下に内容が展開されます。

複数のプランや商品の違いを見せるならタブ、質問と回答を順番に並べるならアコーディオンが適しています。

2. WordPressでタブを作る主な方法

2-1. プラグインで作成する方法

最も簡単なのは、タブ作成機能を持つWordPressプラグインを利用する方法です。

専用の管理画面でタブ名と本文を登録し、ショートコードを投稿や固定ページに貼り付けるタイプと、ブロックエディター上で直接編集するタイプがあります。

HTMLやCSSの知識がなくても作成できるため、初心者や更新担当者が複数いるサイトに向いています。

2-2. ブロックエディターで作成する方法

WordPressのブロックエディターにタブブロックを追加し、通常の段落や画像と同じ感覚で編集する方法です。

WordPress標準のコアブロックには、独立したタブブロックが用意されていません。そのため、タブ機能を持つブロック拡張プラグインや、テーマ独自のブロックを利用します。WordPress Developer Resources

タブ内に見出し、文章、画像、ボタンなどのブロックを配置できる製品もあり、編集画面と公開画面の差を確認しながら作成できる点が特徴です。

2-3. HTML/CSSで自作する方法

カスタムHTMLブロックにHTMLを記述し、追加CSSや子テーマのスタイルシートでデザインを整える方法です。

クリックによる切り替え処理には、JavaScriptまたはCSSのラジオボタンを利用します。

自作にはコードの知識が必要ですが、次のようなメリットがあります。

• デザインを自由に調整できる

• 必要な機能だけを実装できる

• 不要なプラグインを増やさずに済む

• サイトのデザインに合わせやすい

一方、テーマ変更やWordPress更新後の動作確認、アクセシビリティ対応なども自分で行う必要があります。

2-4. 各方法の難易度・自由度・おすすめ度比較

初めてWordPressにタブを設置する場合は、ブロック拡張プラグインがおすすめです。管理画面で見たまま編集しやすく、ショートコードの貼り間違いも防げます。

3. プラグインを使ってWordPressにタブを作る方法

3-1. タブ作成におすすめのプラグイン

WordPressでタブを作成できるプラグインには、次のような選択肢があります。

Kadence Blocks

Kadence Blocksは、WordPressのブロックエディターを拡張するプラグインです。タブブロックでは、横並び・縦並びの設定や、色、余白、アイコンなどを調整できます。タブ内にはほかのブロックも配置できます。WordPress.org+2Liquid Web+2

タブ以外のレイアウト作成にも利用したい人に向いています。

Tabs Block

Tabs Blockは、ブロックエディターにシンプルなタブ機能を追加するプラグインです。複雑なページビルダー機能を必要とせず、タブだけを手軽に追加したい場合に選択しやすい製品です。WordPress.org

Easy Tabs Block

Easy Tabs Blockは、ブロックエディター上で横型または縦型のタブを作成できるプラグインです。コードを書かずにレスポンシブなタブを設置できます。WordPress.org

プラグインを選ぶときは、機能の多さだけでなく、次の点も確認しましょう。

• 使用中のWordPressバージョンとの互換性

• 最終更新日

• 有効インストール数

• 利用者の評価

• サポート状況

• スマートフォン対応

• キーボード操作への対応

• 不要なCSSやJavaScriptの読み込み量

3-2. プラグインのインストール手順

WordPressの管理画面からプラグインをインストールする基本手順は次のとおりです。

1. WordPress管理画面にログインする

2. 「プラグイン」から「新規プラグインを追加」を開く

3. 検索欄にプラグイン名を入力する

4. 対象プラグインの「今すぐインストール」をクリックする

5. インストール後に「有効化」をクリックする

有効化が完了すると、ブロックエディターや管理画面のメニューにタブ作成機能が追加されます。

似た名前のプラグインが表示されることがあるため、名称だけでなく、開発者名や説明文も確認してください。

3-3. タブコンテンツの作成手順

ブロック型プラグインを利用する場合は、次の流れでタブを作成します。

1. 投稿または固定ページの編集画面を開く

2. ブロック追加ボタンの「＋」をクリックする

3. 「Tabs」または「タブ」と検索する

4. 使用するタブブロックを選択する

5. タブの数を設定する

6. 各タブのタイトルを入力する

7. タブ内に文章や画像を配置する

8. 色、枠線、余白などを調整する

9. プレビューで動作を確認する

タブ名には、「タブ1」「詳細」のような曖昧な言葉ではなく、「料金」「機能」「導入方法」など、内容が分かる名称を付けましょう。

3-4. 投稿・固定ページへの設置方法

ブロック型プラグインでは、作成したタブブロックを投稿や固定ページに配置したまま公開できます。

ショートコード型プラグインでは、専用画面でタブを作成した後、発行された次のようなショートコードを貼り付けます。

[tabs id="123"]

投稿や固定ページにショートコードブロックを追加し、発行されたコードを入力してください。

ショートコードの前後に余分な記号を追加したり、コードブロックへ貼り付けたりすると正常に表示されない場合があります。

3-5. プラグインを使うメリット・デメリット

プラグインを利用するメリットは、コードを書かずにタブを作成できることです。デザイン設定やスマートフォン対応も管理画面で完結しやすく、更新担当者がタブ内容を修正しやすくなります。

一方、次のようなデメリットもあります。

• プラグインの更新や管理が必要

• テーマや別のプラグインと干渉する場合がある

• 無料版ではデザイン機能が制限されることがある

• プラグインを停止すると表示できなくなる場合がある

• ページに追加のCSSやJavaScriptが読み込まれることがある

タブだけが必要な場合は、機能の多いページビルダーよりも、軽量な専用ブロックを選ぶ方法もあります。

4. ブロックエディターでタブを作る方法

4-1. WordPress標準ブロックでタブは作れる？

WordPressの標準ブロックには、記事本文用のタブブロックは用意されていません。標準ブロックだけで作成するには、グループブロックやボタンブロックに独自のCSSとJavaScriptを組み合わせる必要があります。WordPress Developer Resources

なお、WordPressの開発者向け機能には「TabPanel」というコンポーネントがありますが、これはブロックやプラグインの開発に使用するReactコンポーネントです。投稿画面にそのまま追加できる標準タブブロックではありません。WordPress Developer Resources

簡単にタブを作りたい場合は、拡張プラグインを利用したほうが効率的です。

4-2. ブロック拡張プラグインを使う方法

ブロック拡張プラグインを有効化すると、ブロック追加画面からタブブロックを選択できるようになります。

基本的な操作は次のとおりです。

1. 編集画面で「＋」をクリックする

2. 検索欄に「Tabs」または「タブ」と入力する

3. タブブロックを追加する

4. タブの数と表示方向を設定する

5. タイトルとコンテンツを入力する

6. サイドバーで色や余白を調整する

プラグインによっては、タブ内に段落、画像、リスト、ボタン、カラムなどのブロックを配置できます。単なる文章だけでなく、商品紹介や料金表も作成可能です。

4-3. テーマ独自ブロックでタブを作る方法

使用しているWordPressテーマによっては、独自のタブブロックやショートコードが付属していることがあります。

編集画面で「タブ」と検索して該当ブロックが表示される場合は、追加プラグインをインストールせずに利用できる可能性があります。

ただし、テーマ独自機能には次の注意点があります。

• 別のテーマへ変更すると利用できなくなることがある

• テーマ変更後にショートコードが本文へ残る場合がある

• デザインや機能がテーマの仕様に依存する

• 子テーマと親テーマで設定が異なる場合がある

将来的にテーマを変更する可能性が高いサイトでは、テーマに依存しないブロックプラグインも検討しましょう。

4-4. ブロック編集で作る場合の注意点

ブロックエディターでタブを作る場合は、編集画面だけでなく公開画面も確認してください。

管理画面では正常でも、テーマのCSSが影響して、公開画面では文字色や余白が変わることがあります。また、パソコンで横並びになっていても、スマートフォンではタブ名が折り返されたり、画面外にはみ出したりする場合があります。

公開前には、次の項目を確認しましょう。

• すべてのタブをクリックできるか

• 最初に表示するタブが適切か

• タブ名が途中で切れていないか

• スマートフォンで横にはみ出さないか

• キーボードで操作できるか

• 文字と背景のコントラストが十分か

• タブを削除したときに本文まで消えないか

5. HTML/CSSでWordPressにタブを自作する方法

5-1. HTMLでタブの構造を作る

JavaScriptで切り替えるタブの基本的なHTMLは次のとおりです。

HTML
<div class="wp-tabs" data-tabs>
  <div class="wp-tabs__list" role="tablist" aria-label="サービス情報">
    <button
      type="button"
      id="tab-basic"
      class="wp-tabs__button"
      role="tab"
      aria-selected="true"
      aria-controls="panel-basic"
      tabindex="0"
    >
      基本情報
    </button>

    <button
      type="button"
      id="tab-price"
      class="wp-tabs__button"
      role="tab"
      aria-selected="false"
      aria-controls="panel-price"
      tabindex="-1"
    >
      料金
    </button>

    <button
      type="button"
      id="tab-flow"
      class="wp-tabs__button"
      role="tab"
      aria-selected="false"
      aria-controls="panel-flow"
      tabindex="-1"
    >
      利用方法
    </button>
  </div>

  <div
    id="panel-basic"
    class="wp-tabs__panel"
    role="tabpanel"
    aria-labelledby="tab-basic"
  >
    <h3>基本情報</h3>
    <p>ここにサービスの概要を入力します。</p>
  </div>

  <div
    id="panel-price"
    class="wp-tabs__panel"
    role="tabpanel"
    aria-labelledby="tab-price"
    hidden
  >
    <h3>料金</h3>
    <p>ここに料金プランを入力します。</p>
  </div>

  <div
    id="panel-flow"
    class="wp-tabs__panel"
    role="tabpanel"
    aria-labelledby="tab-flow"
    hidden
  >
    <h3>利用方法</h3>
    <p>ここに申し込み手順を入力します。</p>
  </div>
</div>

aria-controlsには、対応するコンテンツパネルのIDを指定します。反対に、パネル側のaria-labelledbyには対応するボタンのIDを指定します。

同じページに複数のタブを設置するときは、idが重複しないように変更してください。

5-2. CSSでタブのデザインを整える

先ほどのHTMLに、次のCSSを適用します。

CSS
.wp-tabs {
  width: 100%;
  margin: 2rem 0;
}

.wp-tabs__list {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 2px solid #d9d9d9;
  -webkit-overflow-scrolling: touch;
}

.wp-tabs__button {
  flex: 0 0 auto;
  min-width: 8rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f5f5f5;
  color: #333;
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

.wp-tabs__button[aria-selected="true"] {
  background: #1e73be;
  border-color: #1e73be;
  color: #fff;
}

.wp-tabs__button:hover {
  filter: brightness(0.97);
}

.wp-tabs__button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.wp-tabs__panel {
  padding: 1.5rem;
  border: 1px solid #d9d9d9;
  border-top: 0;
  background: #fff;
}

.wp-tabs__panel > :first-child {
  margin-top: 0;
}

.wp-tabs__panel > :last-child {
  margin-bottom: 0;
}

.wp-tabs__panel[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .wp-tabs__button {
    min-width: 7rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }

  .wp-tabs__panel {
    padding: 1rem;
  }
}

CSSは、テーマの追加CSS機能、子テーマのstyle.css、または独自CSSを管理できるプラグインへ追加します。

親テーマのファイルを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。継続的に利用する場合は、子テーマや専用のCSS管理方法を使いましょう。

5-3. JavaScriptなしで切り替える方法

ラジオボタンとCSSを組み合わせれば、JavaScriptを使わずにタブのような表示を作れます。

HTML
<div class="wp-css-tabs">
  <input type="radio" name="css-tabs" id="css-tab-1" checked>
  <input type="radio" name="css-tabs" id="css-tab-2">
  <input type="radio" name="css-tabs" id="css-tab-3">

  <div class="wp-css-tabs__labels">
    <label for="css-tab-1">基本情報</label>
    <label for="css-tab-2">料金</label>
    <label for="css-tab-3">利用方法</label>
  </div>

  <div class="wp-css-tabs__panels">
    <div class="wp-css-tabs__panel panel-1">
      <h3>基本情報</h3>
      <p>サービスの概要を入力します。</p>
    </div>

    <div class="wp-css-tabs__panel panel-2">
      <h3>料金</h3>
      <p>料金プランを入力します。</p>
    </div>

    <div class="wp-css-tabs__panel panel-3">
      <h3>利用方法</h3>
      <p>申し込み手順を入力します。</p>
    </div>
  </div>
</div>

CSS
.wp-css-tabs {
  position: relative;
  margin: 2rem 0;
}

.wp-css-tabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wp-css-tabs__labels {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 2px solid #d9d9d9;
}

.wp-css-tabs__labels label {
  flex: 0 0 auto;
  min-width: 8rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f5f5f5;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.wp-css-tabs__panel {
  display: none;
  padding: 1.5rem;
  border: 1px solid #d9d9d9;
  border-top: 0;
}

#css-tab-1:checked
  ~ .wp-css-tabs__labels
  label[for="css-tab-1"],
#css-tab-2:checked
  ~ .wp-css-tabs__labels
  label[for="css-tab-2"],
#css-tab-3:checked
  ~ .wp-css-tabs__labels
  label[for="css-tab-3"] {
  background: #1e73be;
  border-color: #1e73be;
  color: #fff;
}

#css-tab-1:checked
  ~ .wp-css-tabs__panels
  .panel-1,
#css-tab-2:checked
  ~ .wp-css-tabs__panels
  .panel-2,
#css-tab-3:checked
  ~ .wp-css-tabs__panels
  .panel-3 {
  display: block;
}

JavaScriptなしの方法は構成が簡単ですが、一般的なタブUIに求められる矢印キー操作やARIA属性の切り替えには対応しにくい点がデメリットです。

簡単な装飾として使う場合には便利ですが、操作性やアクセシビリティを重視するサイトではJavaScriptを使った実装が適しています。

5-4. JavaScriptでクリック切り替えを実装する方法

5-1のHTMLへ、次のJavaScriptを追加します。

JavaScript
document.querySelectorAll("[data-tabs]").forEach((tabs) => {
  const buttons = Array.from(
    tabs.querySelectorAll('[role="tab"]')
  );

  const activateTab = (selectedButton) => {
    buttons.forEach((button) => {
      const isSelected = button === selectedButton;
      const panelId = button.getAttribute("aria-controls");
      const panel = tabs.querySelector(`#${panelId}`);

      button.setAttribute(
        "aria-selected",
        isSelected ? "true" : "false"
      );
      button.setAttribute(
        "tabindex",
        isSelected ? "0" : "-1"
      );

      if (panel) {
        panel.hidden = !isSelected;
      }
    });
  };

  buttons.forEach((button, index) => {
    button.addEventListener("click", () => {
      activateTab(button);
    });

    button.addEventListener("keydown", (event) => {
      let nextIndex = index;

      if (event.key === "ArrowRight") {
        nextIndex = (index + 1) % buttons.length;
      } else if (event.key === "ArrowLeft") {
        nextIndex =
          (index - 1 + buttons.length) % buttons.length;
      } else if (event.key === "Home") {
        nextIndex = 0;
      } else if (event.key === "End") {
        nextIndex = buttons.length - 1;
      } else {
        return;
      }

      event.preventDefault();
      buttons[nextIndex].focus();
      activateTab(buttons[nextIndex]);
    });
  });
});

このコードでは、クリックだけでなく、左右の矢印キー、Homeキー、Endキーでもタブを切り替えられます。

JavaScriptは、子テーマのファイルや独自プラグインから読み込む方法が安全です。カスタムHTMLブロック内にscriptタグを記述する方法は、ユーザー権限、セキュリティ設定、キャッシュ・最適化機能などの影響を受ける場合があります。

5-5. カスタムHTMLブロックへの設置手順

HTMLをWordPressへ追加する手順は次のとおりです。

1. 投稿または固定ページの編集画面を開く

2. ブロック追加ボタンをクリックする

3. 「カスタムHTML」を検索する

4. カスタムHTMLブロックを追加する

5. HTMLコードを貼り付ける

6. CSSを追加CSSまたは子テーマへ登録する

7. JavaScriptを子テーマや独自プラグインから読み込む

8. プレビューで表示と動作を確認する

カスタムHTMLブロックは、ブロック追加画面から選ぶほか、新しい段落で/htmlと入力して追加できます。WordPress.org

コードを貼り付ける際は、コードブロックではなく、必ずカスタムHTMLブロックを使用してください。コードブロックはソースコードを訪問者へ表示するためのブロックであり、HTMLを実行するためのものではありません。

6. WordPressのタブを見やすくするデザインのコツ

6-1. スマホ表示に対応させる

スマートフォンでは画面幅が狭いため、タブが横にはみ出しやすくなります。

主な対応方法は次の3つです。

• タブ部分を横スクロールできるようにする

• スマホではタブを縦並びにする

• スマホではアコーディオン表示へ切り替える

横スクロールを利用する場合は、タブ一覧に次のCSSを指定します。

CSS
.wp-tabs__list {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

ただし、スクロールできることに気づきにくい場合があります。右端のタブを少しだけ見せる、スクロール案内を表示するなどの工夫も有効です。

6-2. タブの数を増やしすぎない

タブの数が多すぎると、どこに目的の情報があるのか分かりにくくなります。

基本的には、2～5個程度にまとめると見やすくなります。項目数が多い場合は、カテゴリーを整理するか、アコーディオンやページ内リンクへの変更を検討してください。

特にスマートフォンでは、短いタブ名でも4～5個並べると画面に収まらないことがあります。

6-3. 選択中のタブを分かりやすくする

現在選択されているタブは、背景色、文字色、枠線などを変えて明確に示します。

たとえば、選択中を濃い背景色と白文字、未選択を薄いグレーにすると、状態の違いを判断しやすくなります。

色だけに依存せず、次のような表現を組み合わせることも大切です。

• 下線を付ける

• 枠線を太くする

• アイコンを表示する

• 文字を太くする

• 選択中のタブとパネルを視覚的につなげる

6-4. 読みやすい余白・文字サイズにする

タブボタンが小さすぎると、スマートフォンで押し間違えやすくなります。上下左右に十分な余白を設け、指で選択しやすいサイズにしましょう。

本文パネルにも適度な余白を入れます。タブをクリックした直後に文字が枠へ密着していると、窮屈な印象になります。

文字サイズはテーマ本文との統一感を保ち、タブ名だけを極端に小さくしないことが重要です。

6-5. SEOとユーザビリティを両立させる

タブ内の文章も、初期HTMLに含まれていれば検索エンジンが内容を取得できる可能性があります。ただし、検索エンジンに読ませるためだけに大量のキーワードや文章を隠す使い方は避けるべきです。

Googleは、モバイルでスペースを節約する方法として、コンテンツをタブやアコーディオンに移動することを案内しています。一方で、モバイル版とデスクトップ版には同等の主要コンテンツを用意することが重要です。Google for Developers

SEOと使いやすさを両立するには、次の点を意識しましょう。

• タブ名に内容を表す具体的な言葉を使う

• タブ内にも適切な見出しを設置する

• 重要な結論を初期表示のタブに入れる

• JavaScript実行後に初めて文章を取得する構成を避ける

• スマートフォンでもすべての内容を閲覧可能にする

• キーワードを不自然に詰め込まない

• タブが動かなくても内容を確認できる構造を検討する

7. WordPressでタブがうまく表示されないときの対処法

7-1. タブがクリックできない場合

タブをクリックしても内容が切り替わらない場合は、JavaScriptが正常に読み込まれていない可能性があります。

次の項目を確認してください。

• 使用しているプラグインが有効になっているか

• JavaScriptファイルの読み込みに失敗していないか

• ブラウザの開発者ツールにエラーが出ていないか

• ボタンのaria-controlsとパネルのIDが一致しているか

• 同じIDを複数の場所で使用していないか

• 最適化プラグインがJavaScriptの実行順序を変えていないか

• 別の要素が透明な状態でタブの上に重なっていないか

自作タブの場合は、JavaScriptを停止した状態でも本文が失われない構造にしておくと安全です。

7-2. デザインが崩れる場合

タブの色、幅、余白などが想定どおりにならない場合は、テーマや別のプラグインのCSSが影響している可能性があります。

特に、次のような汎用的なCSSが原因になりやすい傾向があります。

CSS
button {
  width: 100%;
}

div {
  overflow: hidden;
}

label {
  display: block;
}

開発者ツールで対象要素を選択し、どのCSSが適用されているか確認しましょう。

独自CSSのクラス名を.tabsや.panelのような短い名前にすると、ほかの機能と重複しやすくなります。.wp-tabs__buttonのように、固有性の高いクラス名を使うと干渉を減らせます。

7-3. スマホで横にはみ出る場合

スマートフォンでタブが画面外にはみ出す場合は、固定幅や最小幅の指定を確認します。

次のCSSが指定されていると、画面幅を超える可能性があります。

CSS
.wp-tabs {
  width: 800px;
}

固定幅ではなく、次のように最大幅を利用しましょう。

CSS
.wp-tabs {
  width: 100%;
  max-width: 800px;
}

タブボタンが多い場合は、一覧部分にoverflow-x: autoを指定します。タブ名が長い場合は、名称を短くすることも有効です。

7-4. プラグイン同士が干渉している場合

タブプラグインとキャッシュ、セキュリティ、ページビルダー、JavaScript最適化プラグインなどが干渉することがあります。

原因を調べるときは、バックアップを取得したうえで、次の順番で確認します。

1. タブ以外のプラグインを一時停止する

2. タブが正常に動くか確認する

3. プラグインを一つずつ有効化する

4. 問題が再発した時点のプラグインを特定する

5. JavaScriptの遅延・結合・圧縮設定を見直す

公開中のサイトで直接停止するのが難しい場合は、ステージング環境で検証してください。

7-5. キャッシュが原因の場合

CSSやJavaScriptを変更しても表示が変わらない場合は、古いファイルがキャッシュされている可能性があります。

次のキャッシュを順番に削除します。

• WordPressキャッシュプラグイン

• レンタルサーバーのキャッシュ

• CDNのキャッシュ

• ブラウザキャッシュ

• スマートフォンブラウザのキャッシュ

シークレットウィンドウや別のブラウザで確認すると、ブラウザキャッシュの影響を切り分けやすくなります。

8. WordPressのタブ実装でよくある質問

8-1. タブ内のコンテンツはSEOに影響する？

タブ内のコンテンツだからという理由だけで、直ちにSEO上の問題になるわけではありません。

重要なのは、タブ内の文章がページのHTMLに含まれており、訪問者が問題なく閲覧できることです。スマートフォンでもデスクトップと同等の主要情報を確認できるようにしてください。Googleも、モバイル画面のスペースを節約する方法としてタブやアコーディオンを挙げています。Google for Developers

ただし、検索順位を操作するために、訪問者へ見せる意図のないキーワードや文章を大量に隠すことは避けましょう。

8-2. タブはスマホでも使いやすい？

タブの数とデザインを適切に調整すれば、スマートフォンでも使いやすくできます。

2～4個程度の短いタブであれば、横並びでも操作しやすいでしょう。項目数が多い場合は、横スクロールまたはアコーディオンへの切り替えが適しています。

スマートフォンでは、タブを押しやすい大きさにし、選択中の状態を明確に表示することが重要です。

8-3. プラグインなしでもタブは作れる？

プラグインなしでも作成できます。

カスタムHTMLブロックへHTMLを追加し、CSSとJavaScriptを組み合わせれば、自由度の高いタブを実装可能です。簡単なタブであれば、ラジオボタンとCSSだけでも切り替えられます。

ただし、次の作業を自分で行う必要があります。

• HTML構造の作成

• レスポンシブ対応

• JavaScriptの管理

• キーボード操作への対応

• テーマ変更後の動作確認

• 不具合発生時の修正

コードの管理に不安がある場合は、ブロック拡張プラグインを利用したほうが安全です。

8-4. タブとアコーディオンはどちらがおすすめ？

複数のプランやカテゴリーを並列で比較したい場合は、タブがおすすめです。

一方、FAQや補足説明のように、項目を上から順番に確認してもらいたい場合はアコーディオンが向いています。

パソコンではタブ、スマートフォンではアコーディオンへ切り替える方法もあります。使用するプラグインによっては、画面幅に応じて自動的に表示形式を変更できます。

8-5. 初心者におすすめの作り方は？

初心者には、タブブロックを追加できるブロック拡張プラグインがおすすめです。

ブロックエディター上でタブ名と本文を直接編集できるため、HTMLやショートコードを扱う必要がありません。まずはシンプルなプラグインで作成し、デザインや動作に細かな要望が出てきた段階で自作を検討するとよいでしょう。

プラグインを選ぶ際は、デザイン機能だけでなく、スマートフォン対応、更新状況、操作性、キーボード操作への対応も確認してください。

まとめ

WordPressでタブを作る方法は、プラグイン、ブロック拡張、HTML/CSSによる自作の3種類に分けられます。

手軽さを重視する場合は、ブロックエディターから操作できるタブプラグインが適しています。テーマ独自のタブ機能を利用する方法もありますが、将来テーマを変更したときに表示できなくなる可能性がある点には注意が必要です。

デザインや機能を細かく調整したい場合は、カスタムHTMLブロックとCSS、JavaScriptを使って自作できます。その際は、スマートフォン対応だけでなく、選択中の表示、キーボード操作、ARIA属性なども意識しましょう。

タブは情報を整理するための便利な機能ですが、項目を増やしすぎると、かえって目的の内容を探しにくくなります。重要な内容を分かりやすいタブ名で分類し、訪問者が迷わず操作できる構成にすることが大切です。