【Cocoon】見出しボックス・タブ見出しボックス・ラベルボックスのカスタマイズ

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。

Cocoon汎用ブロック（見出しボックス・タブ見出しボックス・ラベルボックス）のカスタマイズを紹介します。

アイコン・カラーの変更方法やCSSカスタマイズで角の丸みやデザインをおしゃれで個性的に変更する方法をまとめました。

Cocoon汎用ブロックとは？

Cocoon汎用ブロックとは、ブログ作成のときに汎用的に利用できるブロックです。

ボックスの見出し、アイコン、色を自由に選択し、汎用的に利用できるボックスブロックです。

https://wp-cocoon.com/cocoon-blocks-response-status/

Cocoon汎用ブロックは３種類あります。

• 見出しボックス
• タブ見出しボックス
• ラベルボックス

見出しの文章を自由に変更できるのが特徴です。

当ブログのCocoon汎用ブロックカスタマイズ

このブログのCocoon汎用ブロックカスタマイズは以下のとおりです。

Cocoon汎用ブロックのカスタマイズ方法

Cocoon汎用ブロックのカスタマイズ方法を紹介します。

【設定】見出しにアイコンを設定する

見出しの文章の前にアイコンを設定できます。

ブロックを選択した状態で右上の【設定】をクリックします。

【ブロック】タブを選択し、アイコンを選びます。

【設定】カラー変更方法

カラーは自由に変更できます。

ブロックを選択した状態で右上の【設定】をクリックします。

【ブロック】タブを選択します。

【色設定】で「ボーダー色」「背景色」「文字色」を変更できます。

よく使う色は、Cocoon設定のカラーパレットに登録しておくのがおすすめです。

カラーパレットの追加方法は「【Cocoon】色の設定をしよう｜キーカラー・背景色・エディター・リンク色」のカラーエディターでよく使う色を登録するにまとめています。

【Cocoon】色の設定をしよう｜キーカラー・背景色・エディター・リンク色

WordPressのCocoonテーマで、キーカラー・背景色・エディター・リンクの色設定をする方法を紹介します。特に、カラーエディターでよく使う色を登録しておくと便利なので、ぜひ登録しておきましょう。

hibicolor.com

【CSS】見出しボックスのカスタマイズ

見出しボックスのCSSカスタマイズは以下のとおりです。

/*見出しボックスのカスタマイズ*/
.caption-box {
  position: relative;  /*要素を相対配置にする*/
  border: solid 1px;  /*線の種類、太さ*/
  border-radius: 0px;  /*角の丸みをなくす*/
  top: 2px;  /*位置の調整*/
}

【CSS】タブ見出しボックスのカスタマイズ

タブ見出しボックスのCSSカスタマイズは以下のとおりです。

/*タブ見出しボックスのカスタマイズ*/
.tab-caption-box-label{ 
  border-radius: 0px;  /*上部の角の丸みをなくす*/
}
.tab-caption-box-content{
  position: relative;  /*要素を相対配置にする*/
  border: solid 1px;  /*線の種類、太さ*/
  border-radius: 0px;  /*下部の角の丸みをなくす*/
  top: 2px;  /*位置の調整*/
}

【CSS】ラベルボックスのカスタマイズ

ラベルボックスのCSSカスタマイズは以下のとおりです。

/*ラベルボックスのカスタマイズ*/
.label-box-content{
  border: 1px solid #D9C9C9;  /*線の種類、太さ、色*/
  border-radius: 0px;  /*角の丸みをなくす*/
}

まとめ

Cocoon汎用ブロック（見出しボックス・タブ見出しボックス・ラベルボックス）は、ブログ記事執筆でよく使うブロックです。

お気に入りのデザインにして、ブログをおしゃれに読みやすくデザインしましょう。