サイト型トップページの作り方を公開しています!Check

Cocoonタブブロックの使い方&おしゃれカスタマイズ|ワンクリックで12デザイン切替

アイキャッチ|タブブロック Cocoon
Cocoon
記事内に広告が含まれています

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。

WordPressテーマCocoon(2.7.3~)に標準搭載された、待望の「タブブロック」。

直感的な操作でタブを切り替えられるため、「情報をコンパクトにまとめたい」「見た目を整理したい」といった要望にも簡単に応えられます。

さらに、この記事で紹介するカスタマイズを使えばおしゃれなタブデザインが数分で導入できます。Cocoonを使ったブログ初心者や、デザインを強化したいブロガーに最適です。

このカスタマイズでできること
  • タブブロックの基本操作をマスター
  • 12種類のデザイン(横スクロール、均等配置など)を導入
    • サイドバーからワンクリックでタブデザインを簡単選択
  • 簡単実装、作業目安は約5分
    • PHP+CSSを2か所に貼るだけ(コピペ対応)
  • タブの色/丸み/中央寄せの追加カスタム可

完成コードは記事後半で有料公開中。

12種類のデザインを即導入でき、有料テーマのような操作性とデザイン性をCocoonで手に入れられるのが大きな魅力。このサイトでも愛用しているカスタマイズです。

\先に完成コードを見たい方/
スポンサーリンク

About meこの記事を書いた人

はるみです
吹き出し/女性

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

  • ドメインパワー : 40(2025年8月時点)
  • 2023年より有料記事公開
    累計460件(月間約20件)のご購入実績
  • カスタマイズを丁寧にサポート

Cocoonタブブロックの使い方|初心者向け基本操作

Cocoonのタブブロックは、ブロックエディターで簡単にタブ切り替えを実装できるツールです。以下のステップで基本操作をマスターしましょう。

タブブロックの追加方法

  • 画面左上の「+」ボタン(ブロック追加)をクリック。
  • ブロック検索欄に「タブ」と入力。
  • 検索結果から「タブ」ブロックを選択して挿入。

「タブ」「タブ見出しボックス」「タブボックス」など類似のブロックが表示されますが、必ず「タブ」ブロックを選んでください。

Cocoon|タブブロック

タブ名の変更・追加・削除

  • タブの見出しを設定
    • タブブロックを選択した状態で、画面右側のブロック設定パネルを開く。
    • 「タブ設定」セクションで、各タブの見出し(例:「Tab 1」)を編集。
  • タブを追加
    • タブブロック内の「+」ボタン(タブエリアの右側)をクリック。新しいタブが自動で追加されます。
  • タブの削除
    • サイドバー「タブ設定」で対象のタブの「タブ削除」ボタンをクリック。

削除したタブ内のコンテンツも消えるので、必要に応じて事前に内容をコピーしてください。

タブコンテンツの入力

  1. タブブロック内で、編集したいタブをクリックして選択します。
  2. 選択したタブ内のブロックエリアに、テキスト、画像、リスト、ボタンなど、任意のブロックを追加します。

タブデザインの選択(この記事で追加)

タブの見た目を調整します。サイドバーの「スタイル」からを選択(例:「外枠付き」「吹き出し」)。

Cocoon|タブブロック
  • 詳細なカスタマイズは後述の「カスタマイズ」セクションを参照。
  • 設定後、公開前にプレビューでデザインや動作を確認し完成です。
スポンサーリンク

こんなデザインが可能に!Cocoonタブブロックのカスタマイズ例

Cocoonのタブブロックは標準でも十分使えますが、デザインを工夫すると見栄えがぐっと良くなります。ここでは代表的な標準 + 3タイプの表示例を紹介します。

各スタイルの特徴・使用例・実際の表示サンプルを掲載しています。

ひとつでも「これいいかも!」と思ったスタイルがあれば、ぜひ試してみてください。

デフォルト

Cocoon標準のシンプルなタブです。

  • Tab 1
  • Tab 2
  • Tab 3

1-横スクロール

  • タブが横一列に並び、画面幅を超える場合はスワイプでスクロール
  • タブ数が多くてもコンパクト表示
  • モバイル表示に最適
  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
  • Tab 6
  • Tab 7
  • Tab 8
  • Tab 9
  • Tab 10
  • Tab 11
  • Tab 12
  • Tab 13
  • Tab 14
  • Tab 15

1-1 外枠付き|横スクロール

  • Tab 1
  • Tab 2
  • Tab 3
  • コンテンツ部分の外枠付きのスタイルです
  • タブ間の余白をなくしてフィットさせています

コンテンツ

コンテンツ

1-2 シンプル|横スクロール

  • Tab 1
  • Tab 2
  • Tab 3

背景色だけのシンプルなスタイルです。

背景色だけのシンプルなスタイルです。

背景色だけのシンプルなスタイルです。

1-3 吹き出し|横スクロール

  • Tab 1
  • Tab 2
  • Tab 3

吹き出しスタイルです。

吹き出しスタイルです。

吹き出しスタイルです。

1-4 下線|横スクロール

  • Tab 1
  • Tab 2
  • Tab 3

下線だけのごくシンプルなスタイルです。

下線だけのごくシンプルなスタイルです。

下線だけのごくシンプルなスタイルです。

2-タブ均等配置+横スクロール

  • 各タブの幅が均等で整った印象
  • 横幅を超える場合はスクロール表示
  • 見出しの長さに左右されず、デザインの統一感を重視する場合におすすめ
  • Tab 1
  • Tab 2
  • Tab 3

  • Tab 1
  • Tab 2
  • Tab 3

  • 幅を超えた場合には横スクロールが有効になります。
  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
  • Tab 6
  • Tab 7
  • Tab 8
  • Tab 9
  • Tab 10
  • Tab 11
  • Tab 12
  • Tab 13
  • Tab 14
  • Tab 15

2-1 外枠付き|均等配置+横スクロール

  • Tab 1
  • Tab 2
  • Tab 3
  • コンテンツ部分の外枠付きのスタイルです
  • タブ間の余白をなくしてフィットさせています

コンテンツ

2-2 シンプル|均等配置+横スクロール

  • Tab 1
  • Tab 2
  • Tab 3

背景色だけのシンプルなスタイルです。

2-3 吹き出し|均等配置+横スクロール

  • Tab 1
  • Tab 2
  • Tab 3

吹き出しスタイルです。

2-4 下線|均等配置+横スクロール

  • Tab 1
  • Tab 2
  • Tab 3

下線だけのごくシンプルなスタイルです。

3-タブ均等配置+自動折り返し

  • タブ幅が自動で均等配置され、レイアウトが整う
  • タブ数が多い場合、自動で折り返して一覧性アップ
  • 横スクロール不要で、PC・タブレット閲覧向き
\タブを多く配置した例/
  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
  • Tab 6
  • Tab 7
  • Tab 8
  • Tab 9
  • Tab 10
  • Tab 11
  • Tab 12
  • Tab 13
  • Tab 14
  • Tab 15

3-1 外枠付き|均等配置+自動折り返し

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
  • コンテンツ部分の外枠付きのスタイルです
  • タブ間の余白をなくしてフィットさせています

コンテンツ

コンテンツ

3-2 シンプル|均等配置+自動折り返し

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5

背景色だけのシンプルなスタイルです。

3-3 吹き出し|均等配置+自動折り返し

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5

吹き出しスタイルです。

3-4 下線|均等配置+自動折り返し

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5

下線だけのごくシンプルなスタイルです。

以上のカスタムデザインは、記事後半でPHP+CSSの実装方法を有料公開しています。

\この記事のデザインを5分で導入/
スポンサーリンク

タブブロックのカスタマイズ方法|CSSでデザインを強化

Cocoonのタブブロックは標準でも便利ですが、少し手を加えるだけで ブログに合わせたオリジナルデザインを実現する方法を、目的・手順・コード例で解説します。

タブの色を変更する

  • Tab 1
  • Tab 2
  • Tab 3

  • Tab 1
  • Tab 2
  • Tab 3

  • 目的:ブランドカラーやサイト配色に合わせたいとき
  • 手順:子テーマの style.css に以下のCSSを追加
:root {
   --cocoon-tab-label-color: #f2f2f2; /* 非アクティブ時の背景色 */
   --cocoon-tab-label-active-color: #dbb6a2; /* 選択したタブの背景色 */
}

ポイント:CSSカスタムプロパティで管理しやすく。詳細は解説記事をご覧ください

タブの形を丸くする

  • Tab 1
  • Tab 2
  • Tab 3

  • Tab 1
  • Tab 2
  • Tab 3

  • 目的:角を丸めて柔らかい印象にしたいとき
  • 手順:
    1. 子テーマの style.css に以下のCSSを追加
    2. 特定のタブだけ適用したい場合 、ブロックエディターの「高度な設定」→ 「追加CSSクラス」に rounded-tabs を入力
.rounded-tabs .tab-label-group .tab-label {
   border-radius: 30px;
}

ポイント:

  • border-radius: 30px → 値を大きくすると丸みが強くなります
  • 全タブに適用したい場合は .tab-label-group .tab-label のみに記述すればOK
  • 追加CSSクラス」の使い方はこちらの記事で解説しています

タブを中央寄せにする

  • Tab 1
  • Tab 2
  • Tab 3

  • Tab 1
  • Tab 2
  • Tab 3

  • 目的:均等配置ではなく中央寄せで整えたいとき
  • 手順:
    1. 子テーマの style.css に以下のCSSを追加
    2. 特定のタブだけ適用したい場合 、ブロックエディターの「高度な設定」→ 「追加CSSクラス」に centered-tabs を入力
.centered-tabs .tab-label-group {
   justify-content: center; /* タブを中央寄せ */
}
.centered-tabs .tab-label-group .tab-label {
   flex: none; /* 均等配置を解除 */
}

ポイント:

  • justify-content: center; … 横方向の中央寄せ
  • flex: none; … 均等配置を解除し、タブ幅を内容に合わせる
  • 全体に適用するならクラス指定を外して .tab-label-group に直接指定
  • 追加CSSクラスを使うことで、特定のタブブロックだけに中央寄せを適用できます
スポンサーリンク

注意点と特徴|タブブロックカスタマイズのポイント

イメージ画像/ポイント

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

  • スキンによる影響
    • この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。(スキンと併用できるかはお問い合わせください)
  • 子テーマを利用
    • コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
  • バックアップの推奨
    • 念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • サーバー設定の影響
    • WAF(セキュリティ設定)が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
スポンサーリンク

Cocoonタブブロックの実装手順|完成コードのご案内(有料)

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

PHPの設定

目的:「スタイル切り替え機能」を追加

記述場所:子テーマの functions.php

CSSの設定

目的:「各スタイルのデザイン」を定義

記述場所:子テーマのスタイルシート (style.css)

  1. WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
  2. 子テーマ(Cocoon Child) が選択されていることを確認します。
  3. 右側のファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 をクリックします。
  4. 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記します。
phpの記述について
  1. WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
  2. 子テーマ(Cocoon Child)が選択されていること を確認します。
  3. ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開きます。
  4. 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加します。
CSS編集/スタイルシート

参考記事 Cocoonカスタマイズ|HTML・CSSの編集とワードプレスをバックアップする方法

  • PHP+CSSの完成版コード(コピペで導入可能)
  • 3種類×4のデザインをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「完成形のタブブロック」を導入したい方はぜひご活用ください。

特定商取引法に基づく表記

サイト名
Turicco

サイトURL
https://turicco.com/

運営者情報
運営責任者:はるみ
お問い合わせ先:https://turicco.com/contact/

購入方法
コンテンツ販売サービス「codoc(コードク)」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。

納品方法
購入完了後、対象の記事が閲覧可能になります。

お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済

※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。

返金・キャンセルについて
codoc株式会社の利用規約第10条(返金)に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。

販売価格
500円(税込)

※導入前に不明点があれば、お気軽にお問い合わせください。

Comment 記事の感想を書き込んでいただけると幸いです

タイトルとURLをコピーしました