「タブ見出しボックス」の使い方・カスタマイズも【cocoon】

「ブログ記事で複数の情報を分かりやすく整理したいけど、ページが縦に長くなって読みにくい…」

そんな悩みを抱えていませんか？

WordPressテーマCocoonには、複数の情報をコンパクトにまとめられる便利な機能「タブ見出しボックス」が搭載されています。

この記事では、Cocoonの「タブ見出しボックス」の基本的な使い方から、デザインをさらに魅力的にするためのカスタマイズ方法までを丁寧に解説します。

「タブ見出しボックス」とは？

「タブ見出しボックス」とは、あたかも書類のインデックス（タブ）のように、突き出たタブが特徴です。

背景色・文字色も変更でき、タブの中には「カラム」や「リスト」など挿入できるのが使う幅が広がりますね。

「タブ見出しボックス」の使い方

実際にWordPressのCocoonエディター上で、「タブ見出しボックス」をどのように作成し、コンテンツを表示させていくのか、その基本的な使い方をステップごとに解説していきます。

「タブ見出し」と検索する

プラスマークをクリックして、「タブ見出し」と検索します。

※プラスマークは投稿ページ内をクリックすると出現します。

見出し・中身を入力

「タブ」をクリックして、見出しを入力します。

「ボックス内」をクリックして、文章を入力して完了です。

アイコン設定

右側の「ブロックバー」から、アイコンを設定することができます。

見出しの頭に「アイコン」が付けられますね。

背景色・文字色・枠線変更

右側の「ブロックバー」から、背景・文字色・枠線を変更できます。

どの色を入れようかな？と迷う場合は、こちらを参考にしてみてください。

「タブ見出し」をCSSカスタマイズ

タブ見出しボックスの「見出し」を大きくして、ボックス内の両側の余白を付けてきます。

ここでは、追加CSSに記入していきます。

※CSSを追加するときは、必ずバックアップをしてください。

バックアップのおすすめプラグインはこちら

サイト全体に設定

/* タブ見出し */
.tab-caption-box-label{
	padding:10px 20px;　　/* 上下余白10px　左右余白20px */
	font-weight: bold;　　/* 文字を太く */
        letter-spacing:0.1em;    /* 文字と文字の間隔 */
}

.tab-caption-box-content{
	padding: 20px;    /* 余白20px */
}

サイト全体に設定する場合です。追加CSSにコピペします。

※余白など、自分の好きなように調整してください。

個別に設定（追加CSSクラス）

この「タブ見出しボックス」のみの設定にしたい！という場合は、右側の「ブロックバー」の「高度な設定」から「追加CSSクラス」に名前を付けます。

ここでは、「tab1」にします。

/* タブ見出し */
.tab1 .tab-caption-box-label{
	padding:10px 20px;　　/* 上下余白10px　左右余白20px */
	font-weight: bold;　　/* 文字を太く */
        letter-spacing:0.1em;    /* 文字と文字の間隔 */
}

.tab1 .tab-caption-box-content{
	padding: 20px;    /* 余白20px */
}

全体に設定するCSSの、出だしを変更するのみでOKです。

ボックスに入れる

「見出しボックス」のボックス内に「リスト」「カラム」などを挿入することができます。

リストを入れる

ボックス内に「リスト」を入れることもできます。

リストについての記事はこちらをご覧ください。

カラムを入れる

ボックス内に「カラム」を入れることもできます。

まとめ

この記事では、WordPressテーマCocoonに搭載された便利な機能「タブ見出しボックス」の使い方から、さらに見やすくするための基本的なカスタマイズ方法までを解説しました。

「タブ見出しボックス」は「ブロックバー」で自分のサイトに合うようアレンジすることができます。

情報を整理し、読者にとって分かりやすいコンテンツを提供することで、サイトの利便性が向上するでしょう。