BONTAには、サイト全体のアクセントカラーやヘッダー・フッターの背景色/文字色をまとめて変更できる「カラー」セクションが用意されています。ここでは各項目の役割と設定方法を紹介します。
BONTAのカラー設定でできること（アクセント・ヘッダー・フッター）
「外観」＞「カスタマイズ」の「カラー」セクションから、ボタンやリンクに使われるアクセントカラーをはじめ、ヘッダー・フッターの背景色と文字色を、それぞれ独立して変更できます。色を選択すると、公開前のプレビュー画面にもリアルタイムで反映されます。
設定方法（3ステップで完了）
設定は3ステップで完了します。
「外観」＞「カスタマイズ」を開く
「カラー」セクションを開き、変更したい項目の「色を選択」をクリックして色を指定する
変更内容はプレビュー画面にすぐ反映されます。
内容を確認して「公開」を押す
プレビュー中はまだ本番に反映されません。「公開」ボタンを押すまで確定しない点に注意してください。
アクセントカラー・ボタン文字色・ヘッダー/フッターの6項目の役割
「カラー」セクションには6つの項目があります。それぞれの役割は次のとおりです。
01
アクセントカラー
ボタンやリンクなど、サイト全体のアクセントカラーです。既定値は #2563eb(青)。
02
ボタン文字色
アクセントカラーのボタン(お問い合わせボタン等)の文字色です。既定値は白(#ffffff)。
03
ヘッダー背景色
ヘッダーの背景色です。既定値は白(#ffffff)。
04
ヘッダー文字色
ヘッダーのロゴ・ナビゲーションの文字色です。既定値は #111111(ほぼ黒)。
05
フッター背景色
フッターの背景色です。既定値は #111111(ほぼ黒)。
06
フッター文字色
フッターのロゴ・リンク・著作権表記の文字色です。既定値は白(#ffffff)。
💡 ポイント
淡い色をアクセントカラーに選んだ場合、「ボタン文字色」を白のままにするとボタンの文字が読みにくくなることがあります。アクセントカラーを変更したときは、あわせてボタン文字色も確認してください。
カラー設定運用時の注意点（反映タイミング・対象範囲）
- 色の変更はプレビュー画面にリアルタイムで反映されますが、「公開」ボタンを押すまでサイトには反映されません。
- この6項目以外の色(本文の文字色や背景色など)は、この設定の対象外です。
- ヘッダー・フッターの背景色/文字色は、それぞれ独立した設定です。片方だけを変更しても、もう片方には影響しません。
- アクセントカラーは記事詳細ページの一部要素やAgency Premium Blocksのブロック(CTAボックス等)にも共通して使われます。
カラー設定に関するよくある質問
色を変更すると、サイト内のすべてのボタン・リンクに反映されますか?
はい。アクセントカラーはサイト全体で共通して使われる1つの色として設計されているため、変更するとお問い合わせボタンやリンクなど、アクセントカラーを使っている箇所すべてに反映されます。
ヘッダーの背景色を変えても、ロゴの色は変わりますか?
いいえ。ロゴが文字(サイトタイトル)の場合は「ヘッダー文字色」が適用されますが、ロゴが画像の場合は画像自体の色は変わりません。背景に合う配色のロゴ画像をご用意ください。
色の変更を元に戻すことはできますか?
はい。カスタマイザーの色選択パネルから、既定値の色を再度入力することで元に戻せます(アクセントカラー: #2563eb、ボタン文字色: #ffffff、ヘッダー背景色: #ffffff、ヘッダー文字色: #111111、フッター背景色: #111111、フッター文字色: #ffffff)。
この設定はAgency Premium Blocksのブロックにも影響しますか?
はい。Agency Premium Blocksの一部ブロックはアクセントカラーなどのデザイントークンを参照する設計になっているため、この設定を変更すると連動して見た目が変わる場合があります。
