WordPress 7.1 タブ(Tabs)ブロックの使い方

WordPress 7.1にはタブ（Tabs）ブロックとオーディオプレイリスト（Playlist）ブロック、この2つのブロックが新たに追加されました。その中でもタブブロックはプラン比較、製品情報、FAQのように整理が必要なコンテンツをすっきり見せることができ、活用度が高いです。この記事では WordPress 7.1のタブブロックの使い方を詳しく見てみましょう。

タブブロックを活用する

タブブロックを活用すると、複雑なコンテンツをきれいでわかりやすく表示できます。

たとえば、商品プランをタブとして実装すると、一度にあまりにも多くの情報を表示するのではなく、プラン名タブをクリックすると、そのプランに関する情報のみが表示されます。

次はソウルリージョンを導入し、韓国内でもスピードが速く苛性比まで備え ケミクラウド(ChemiCloud)の WordPress プランをタップで紹介する例です。 （ブログを始める段階であるか、訪問者数がそれほど多くない場合、ケミクラウドが安くてスピード面で良いオプションかもしれません。 クラウドウェイズを考慮することができます。😄）

製品情報を一覧表示する目的でも活用できます。以下は、最近サムスンが発売したギャラクシーフォールド8の製品情報をタブで表示した例です。

ちなみにギャラクシーZフォールド8/ Zフリップ8を購入するとジェミナイ6ヶ月を無料で利用できます。

• ギャラクシーZフォールド8 / Zフリップ8購入時ジェミナイ6ヶ月無料

特にFAQをカテゴリ別に分けて表示したいときにタブを活用すれば、1ページにすべての回答が長くリストされるのを防ぎ、はるかにきれいに整理できます。

次は、 WordPress 関連する質問をカテゴリ別に分けてタブで表示する例です。

👉 WordPress ブロックエディタはトグル/アコーディオンブロックもサポートします。

トグルとアコーディオンの違い

トグルでは個々の項目が独立して機能しますが、アコーディオンは一度に1つの項目のみ展開され、別の項目をクリックすると展開された項目は折りたたまれます。

• Gutenberg エディタ：詳細/要約ブロック（トグル/アコーディオン機能）

ブロックエディタでタブブロックを使用する（WordPress 7.1以上）

WordPress 7.1では、ブロックエディタのタブ（Tab）ブロックが追加されました。今 エレメンのようなページビルダーを使用せずに WordPress 基本機能でタブが使えるようになりました😀

タブを使用するには WordPress バージョンは7.1以上でなければならず、ブロックエディタ（Gutenberg）はデフォルトエディタでなければなりません。 WordPress 5.0以来、ブロックエディタはデフォルトエディタとして採用されています。

タブを追加するには、ブロックエディタのブロックインサータアイコンをクリックします。

上図のようにブロックを挿入するアイコンをクリックすると、以下のようにタブリストが表示されます。 検索で直接検索する デザイン セクションの タブ ブロックを選択します。

簡単な方法で何もない段落（段落）ブロックで「/タブ」を入力してタブブロックを選択できます（WordPress ブロックエディタキーボードショートカットの使い方 を参照）。

👉 タブが「タブ」に翻訳されています。ただ「タブ」に翻訳すると自然なのですが、韓国語翻訳についてよく分からない方が翻訳したか自動翻訳機に翻訳したのではないかと思います。

下図のようにタブブロックが挿入されます。タブのタイトル（Tab Title）を指定し、タブの内容を入力できます。

画像、テーブル（テーブル）などの他の要素をタブコンテンツとして追加できます。複数のタブを表示したい場合は、上部の タブの追加/タブの削除 オプションを使用してタブを追加または削除できます。

個々のタブにテキスト/画像/テーブルなどのさまざまな要素を使用してコンテンツを入力してください。

タブをクリックすると、右側にブロック設定が表示されます。タブタイトルのフォント（テキスト）色と背景色を指定できます。

CSSを使用してタブスタイルを必要に応じて指定することも検討できます。

私は2つのスタイルをCSSとして実装して使用しています。 「タブ」ブロックにtab-1またはtab-2クラスを指定し、次のコードを 外観 » カスタム » 追加 CSSに追加すると、上記のスタイル（上記のスタイルはtab-1クラス）でタブを表示できます。

/* 탭 블록 */
/* ============================================
   공통 구조
   ============================================ */
.tab-1,
.tab-2 {
	margin: 1.5em 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tab-1 .wp-block-tab-list,
.tab-2 .wp-block-tab-list {
	display: flex;
	align-items: stretch;
	gap: 6px;
	padding: 10px;
	border-bottom: 1px solid;
}

.tab-1 .wp-block-tab-list button[role="tab"],
.tab-2 .wp-block-tab-list button[role="tab"] {
	box-sizing: border-box;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 7px;
	font-weight: 500;
	font-size: 0.95em;
	line-height: 1.4;
	letter-spacing: -0.01em;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	background-image: none;
	background-clip: padding-box;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* 코어 활성 탭 인디케이터 제거 — 하단 흰 줄 / 모서리 삐져나옴의 원인 */
.tab-1 .wp-block-tab-list button[role="tab"]::after,
.tab-1 .wp-block-tab-list button[role="tab"]::before,
.tab-2 .wp-block-tab-list button[role="tab"]::after,
.tab-2 .wp-block-tab-list button[role="tab"]::before {
	display: none !important;
	content: none !important;
}

.tab-1 .wp-block-tab-panel,
.tab-2 .wp-block-tab-panel {
	padding: 24px 20px;
	line-height: 1.7;
}

.tab-1 .wp-block-tab-panel p:last-child,
.tab-2 .wp-block-tab-panel p:last-child {
	margin-bottom: 0;
}

.tab-1 .wp-block-tab-panel:not([hidden]),
.tab-2 .wp-block-tab-panel:not([hidden]) {
	animation: tabFadeIn 0.25s ease;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   tab-1 : 딥 블루 계열
   ============================================ */
.tab-1 {
	border: 1px solid #d3ddea;
}

.tab-1 .wp-block-tab-list {
	background: #eef2f8;
	border-bottom-color: #d3ddea;
}

.tab-1 .wp-block-tab-list button[role="tab"] {
	background-color: #c2d3e8 !important;
	color: #274b6d !important;
	opacity: 0.75;
}

.tab-1 .wp-block-tab-list button[role="tab"]:hover {
	opacity: 1;
}

.tab-1 .wp-block-tab-list button[role="tab"][aria-selected="true"] {
	background-color: #1c4870 !important;
	color: #ffffff !important;
	border-color: #14324f;
	opacity: 1;
}

/* ============================================
   tab-2 : 웜 크림 + 코럴 포인트
   ============================================ */
.tab-2 {
	border: 1px solid #ece3d6;
}

.tab-2 .wp-block-tab-list {
	background: #faf6f0;
	border-bottom-color: #ece3d6;
}

.tab-2 .wp-block-tab-list button[role="tab"] {
	background-color: #f1e7d9 !important;
	color: #7a6a55 !important;
	opacity: 0.8;
}

.tab-2 .wp-block-tab-list button[role="tab"]:hover {
	opacity: 1;
}

.tab-2 .wp-block-tab-list button[role="tab"][aria-selected="true"] {
	background-color: #e8875a !important;
	color: #ffffff !important;
	border-color: #c96b41;
	opacity: 1;
}

上記のコードをチャットGPTやジェミナイなどAIに入力し、好きなスタイルに変えてほしいとすればコードを変更してくれます。

タブブロックにカスタムCSSクラスを入力する

タブブロックにCSSクラスを入力するには、タブを選択した状態でツールバーの「親ブロックの選択「アイコンをクリックしてください。

ブロック設定で 高級をクリックして、 追加のCSSクラス フィールドにCSSクラス（tab-1など）を入力します。

参照

• エレメントの新機能 - アトミックタブ
• クラウドウェイズサーバーOSのアップグレード方法