サイトのメインカラーの設定です。body背景色や、背景画像の設定もできます。PC表示時に右下に表示される、「ページトップに戻る」ボタンの装飾もできます。
設定後、「設定を保存」をクリックして変更を確定してください。
カラー対応表
メインカラー (--vibe-main-color)
デフォルト: #0066cc
| 使用箇所 | 用途 |
|---|
| ナビゲーション | サブメニューのホバー文字色 |
| ヒーロー下メニュー | ホバー時・アクティブ時の文字色、下線色 |
| カルーセル | ナビボタンのホバー背景 |
| ページネーション | 現在ページの背景色 |
| パンくずリスト | ホバー時の文字色 |
| カテゴリバッジ | 背景色（80%透過） |
| コメント欄 | タイトル下線色、送信ボタン背景 |
| 目次 | タイトル下線色、見出し番号の色、リンクホバー色 |
| 関連記事 | タイトル下線色 |
| ウィジェットタイトル | 文字色 |
| ウィジェットリスト | ホバー時の文字色・ドット色 |
| 検索ウィジェット | フォーカス枠色、送信ボタン背景 |
| カレンダーウィジェット | リンク日付の背景色 |
| タグクラウド | ホバー時の背景色 |
| 最新コメント | リンク文字色 |
| 最新の投稿 | ホバー時の文字色 |
| プロフィール | ボタン背景色 |
| サイトマップ | セクションタイトル下線色・アイコン色、カテゴリホバー背景、リンクホバー色 |
| モバイルメニュー | ホバー文字色 |
| モバイル検索 | フォーカス枠色、送信ボタン背景 |
アクセントカラー (--vibe-accent-color)
デフォルト: #ff6600
| 使用箇所 | 用途 |
|---|
| ウィジェットタイトル | アクセントバー（左縦線）の色 |
| パスワード保護フォーム | ロックアイコン色、入力欄フォーカス枠、送信ボタン背景 |
| 見出し | グラデーションスタイル選択時の終点色（カスタマイザーで上書き可能） |
リンクカラー (--vibe-link-color)
デフォルト: #0066cc
| 使用箇所 | 用途 |
|---|
| 本文リンク | テキストリンクの文字色（aタグ） |
リンクホバーカラー (--vibe-link-hover-color)
デフォルト: #0055aa
| 使用箇所 | 用途 |
|---|
| 本文リンク | ホバー時の文字色 |
| カテゴリバッジ | ホバー時の背景色 |
| コメントフォーム | 送信ボタンのホバー背景 |
| モバイル検索 | 送信ボタンのホバー背景 |
背景色 (--vibe-bg-color)
デフォルト: #f5f5f5
個別カラー設定
ヘッダー
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_header_bg_color | #header の背景色 | #ffffff |
vibe_header_text_color | #header の文字色、リンク色 | #333333 |
vibe_header_border_color | #header の下線色 | #e0e0e0 |
トップバー
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_topbar_bg_color | .topbar の背景色 | #333333 |
vibe_topbar_text_color | .topbar の文字色 | #ffffff |
フッター
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_footer_bg_color | #footer の背景色 | #333333 |
vibe_footer_text_color | #footer の文字色、リンク色 | #ffffff |
ヒーロー下メニュー
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_hero_below_bg | #hero-below-nav の背景色（CSS変数 –vibe-hero-below-bg） | #ffffff |
vibe_hero_below_text | リンクの文字色 | #333333 |
vibe_hero_below_active | ホバー/アクティブ時の文字色 | #0066cc |
vibe_hero_below_border | 下線色（空の場合は非表示） | 空 |
記事カルーセル
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_carousel_bg_color | .post-carousel の背景色 | #ffffff |
モバイルフッターバー
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_mobile_footer_bg_color | バーの背景色（CSS変数 –vibe-mobile-footer-bg） | #ffffff |
vibe_mobile_footer_text_color | アイコン・テキスト色（CSS変数 –vibe-mobile-footer-text） | #333333 |
vibe_mobile_footer_active_color | アクティブ時の色（CSS変数 –vibe-mobile-footer-active） | #0066cc |
トップへ戻るボタン
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_scroll_top_bg | ボタンの背景色（CSS変数 –vibe-scroll-top-bg） | #333333 |
vibe_scroll_top_icon | アイコンの色（CSS変数 –vibe-scroll-top-icon） | #ffffff |
フッターCTA
| 設定名 | CSS 出力先 | デフォルト |
|---|
vibe_footer_cta_bg_color | CTA バーの背景色 | #ffffff |
vibe_footer_cta_text_color | テキストモード時の文字色 | #333333 |
vibe_footer_cta_button_color | テキストモード時のボタン色 | #0066cc |
見出し（H2〜H5）
管理画面の「見出し」タブで各レベルごとに設定可能。customizer.php でインラインCSSとして出力。
| 設定項目 | 用途 |
|---|
| テキスト色 | 見出しの文字色 |
| アクセント色 | 線・背景の色（スタイルにより適用箇所が変化） |
| グラデーション終了色 | グラデーションスタイル選択時の終点色 |
CSS カスタムプロパティ一覧
customizer.php で :root に出力される変数:
| CSS変数 | 設定元 | 用途 |
|---|
--vibe-main-color | カラー > メインカラー | テーマ全体の主要カラー |
--vibe-accent-color | カラー > アクセントカラー | 強調要素のカラー |
--vibe-link-color | カラー > リンクカラー | 本文リンクの文字色 |
--vibe-link-hover-color | カラー > リンクホバーカラー | 本文リンクのホバー色 |
--vibe-bg-color | カラー > 背景色 | サイト背景色 |
--vibe-hero-below-bg | ヒーロー下メニュー > 背景色 | ヒーロー下の背景色 |
--vibe-scroll-top-bg | カラー > トップへ戻る背景色 | スクロールトップボタン |
--vibe-scroll-top-icon | カラー > トップへ戻るアイコン色 | スクロールトップアイコン |
--vibe-mobile-footer-bg | モバイルフッター > 背景色 | モバイルフッターバー |
--vibe-mobile-footer-text | モバイルフッター > テキスト色 | モバイルフッターバー |
--vibe-mobile-footer-active | モバイルフッター > アクティブ色 | モバイルフッターバー |
--vibe-content-width | レイアウト > コンテンツ最大幅 | コンテンツエリアの幅 |
--vibe-sidebar-width | レイアウト > サイドバー幅 | サイドバーの幅 |
