Snow Monkeyアクセントカラーとサブアクセントカラーの違い

Snow Monkeyの「基本デザイン設定」で「アクセントカラー」と「サブアクセントカラー」の2つが出てきます。

名前が似ているのでどう違うのかわかりにくいですが、実は役割がまったく異なります。

結論から言うと、サイトのデザインに直接影響するのはアクセントカラーだけ。

サブアクセントカラーはエディターのカラーパレットに追加されるだけで、サイトのどこにも自動で反映されません。

「パレットに色は出るけど、どこにも変わってない…？」

となったら、それは仕様どおりなので安心してください。

少しわかりにくので、整理もかねてご紹介しますね。

アクセントカラーが反映される箇所

アクセントカラーが反映される場所は意外と多いです。

順番に見ていきましょう。
（サンプルはブルーをアクセントカラーに設定しています。）

グローバルメニュー

グローバルメニューは3パターンで色が変わります。

状態	変わる箇所
ホバー時	文字色に反映
カレント（現在地）	文字色に反映
プルダウンメニュー	背景色（文字は白）に反映

カテゴリーラベル

記事一覧などに表示されるカテゴリーラベルの背景色に反映されます。

見出し下の装飾

セクション見出しの下に入るラインや装飾部分の色です。

リンク色

本文中のリンクテキストの色も反映されます。

ボタン

ボタンブロックのデフォルト背景色です。

ページネーション

ブログ一覧などのページ送りで、現在のページ番号部分に反映されます。

ページトップへ戻るボタン

右下に出るTOPに戻るボタンの背景色です。

スマホのドロワーメニュー

スマホでドロワーメニューを開いたときの背景色です。

これだけPC表示では確認できないので、スマホかデベロッパーツールのモバイル表示で確認してください。

サブアクセントカラーが反映される箇所

カラーパレットのみです。

エディター上のカラーパレットに「サブアクセントカラー」として表示されるだけで、サイトへの自動適用はありません。

色設定場面でアクセントカラーの次によく使う色として登録されているというイメージです。

利用シーンは、文字装飾、背景色設定など、カラーパレットを使うシーンで利用できます。

カラーパレットに色を追加したい場合

Snow Monkeyのカラーパレットには、アクセントカラーとサブのアクセントカラー以外にもデフォルトでいくつか色が登録されています。

それに加えて、よく使う色を追加しておくとブロックエディターでの作業が楽になります。

色の追加方法は、以下のコードをfunctions.php か my-snow-monkey.php に追加すればOKです。

// カラーパレット追加
// ----------------------------------------------
add_filter( 'wp_theme_json_data_theme', function( $theme_json ) {
    $get_data = $theme_json->get_data();

    // 以下に追加したい色を入れる
    $add_color_palette = array(
        array(
<strong><span style="color: #cf2e2e" class="sme-text-color">            'slug'  => 'your-color-1',
            'color' => '#000000',
            'name'  => '色の名前1（黒）',</span></strong>
        ),
        array(
<strong><span style="color: #cf2e2e" class="sme-text-color">            'slug'  => 'your-color-2',
            'color' => '#FF0000',
            'name'  => '色の名前2（赤）',</span></strong>
        ),
    );

    $new_color_palette = array_merge(
        $get_data['settings']['color']['palette']['theme'],
        $add_color_palette
    );

    $new_data = array(
        'version'  => 2,
        'settings' => array(
            'color' => array(
                'palette' => $new_color_palette,
            ),
        ),
    );

    return $theme_json->update_with( $new_data );
} );

• slug：色の名前を半角英数字で設定します。（重複不可）
• color：カラーコードを指定します。
• name：色の名前を設定します。

この3つを使いたい色に書き換えるだけです。配列をコピーして増やせばいくつでも追加できます。

まとめ

Snow Monkeyのカスタマイザーの「アクセントカラー」と「サブアクセントカラー」については、

• アクセントカラー：サイト全体の色に自動反映される（メニュー・ボタン・リンク・見出し装飾など幅広く影響する）
• サブアクセントカラー：エディターのカラーパレットに追加されるだけで、自動適用はされない

となります。

また、カラーパレットに色を追加したい場合は wp_theme_json_data_theme フィルターを使って設定できます。

使いやすいカラーパレットにして、更新しやすいサイトにしてくださいね！