【Wordpress・CSS】SWELLテーマのCSS色変数を解析してみました。

タイトルの通りなんですが、現在は、Wordpressの「SWELL」というテーマを使用することが多く、色々とCSSでサイトをカスタマイズする際に・・・

「管理画面で設定した色はどういう風にして取得しようか」

と考えるようになりました。

Google先生に聞いてみようと検索もしてみたんですが、どうもSWELLのCSSの色変数を紹介している記事に巡り合えず・・・

で、SWELLをちょっと自身で解析してみたんですが・・・

でるわでるわ、けっこういろんなCSSの色変数がありましたので、ご紹介いたします。

color: var(--color_main);
color: var(--color_main_thin);
color: var(--color_main_dark);
color: var(--color_text);
color: var(--color_link);
color: var(--color_htag);
color: var(--color_bg);
color: var(--color_gradient1);
color: var(--color_gradient2);
color: var(--color_list_check);
color: var(--color_list_num);
color: var(--color_list_good);
color: var(--color_list_triangle);
color: var(--color_list_bad);
color: var(--color_faq_q);
color: var(--color_faq_a);
color: var(--color_header_bg);
color: var(--color_header_text);
color: var(--color_footer_bg);
color: var(--color_footer_text);

これだけありました(笑)。

たぶん、もっとたくさんありますが、主要そうな個所を抜き出しました。

「var(--color_main)」はメインカラーですね。

ほぼほぼ、名称から想像できると思います。

その他、管理画面のどこで設定しているか謎な変数もあります(笑)

var(--color_main_thin) はメインカラーの明るい色（明るすぎですが）、

var(--color_main_dark) はメインカラーの暗い色、

というふうになっているようです。

とりあえず、色変数の早見表が必要だろうと思い、

テーブルで作ってみました。

管理画面の固定ページや新規投稿で「テーブルブロック」を作成し、「HTMLとして編集」に切り替えて、以下のHTMLソースをコピペしてください。

<figure class="wp-block-table"><table><tbody>
<tr><th>color: var(--color_main);</th><td><span style="color: var(--color_main);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_main);">&emsp;</div></td></tr>
<tr><th>color: var(--color_text);</th><td><span style="color: var(--color_text);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_text);">&emsp;</div></td></tr>
<tr><th>color: var(--color_link);</th><td><span style="color: var(--color_link);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_link);">&emsp;</div></td></tr>
<tr><th>color: var(--color_htag);</th><td><span style="color: var(--color_htag);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_htag);">&emsp;</div></td></tr>
<tr><th>color: var(--color_bg);</th><td><span style="color: var(--color_bg);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_bg);">&emsp;</div></td></tr>
<tr><th>color: var(--color_gradient1);</th><td><span style="color: var(--color_gradient1);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_gradient1);">&emsp;</div></td></tr>
<tr><th>color: var(--color_gradient2);</th><td><span style="color: var(--color_gradient2);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_gradient2);">&emsp;</div></td></tr>
<tr><th>color: var(--color_main_thin);</th><td><span style="color: var(--color_main_thin);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_main_thin);">&emsp;</div></td></tr>
<tr><th>color: var(--color_main_dark);</th><td><span style="color: var(--color_main_dark);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_main_dark);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_check);</th><td><span style="color: var(--color_list_check);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_check);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_num);</th><td><span style="color: var(--color_list_num);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_num);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_good);</th><td><span style="color: var(--color_list_good);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_good);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_triangle);</th><td><span style="color: var(--color_list_triangle);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_triangle);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_bad);</th><td><span style="color: var(--color_list_bad);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_bad);">&emsp;</div></td></tr>
<tr><th>color: var(--color_faq_q);</th><td><span style="color: var(--color_faq_q);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_faq_q);">&emsp;</div></td></tr>
<tr><th>color: var(--color_faq_a);</th><td><span style="color: var(--color_faq_a);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_faq_a);">&emsp;</div></td></tr>
<tr><th>color: var(--color_header_bg);</th><td><span style="color: var(--color_header_bg);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_header_bg);">&emsp;</div></td></tr>
<tr><th>color: var(--color_header_text);</th><td><span style="color: var(--color_header_text);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_header_text);">&emsp;</div></td></tr>
<tr><th>color: var(--color_footer_bg);</th><td><span style="color: var(--color_footer_bg);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_footer_bg);">&emsp;</div></td></tr>
<tr><th>color: var(--color_footer_text);</th><td><span style="color: var(--color_footer_text);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_footer_text);">&emsp;</div></td></tr>
</tbody></table></figure>

文字と背景色で指定してみております。

たぶん、けっこうわかりやすいんではないかなあと思います。

メインカラーを背景色に、

背景色で文字色にしたいという場合は、

color: var(--color_bg);
background-color: var(--color_main);

というふうにデザインもできますよね。

管理画面を見ていると、まだまだ色が拾えそうですが…

とりあえずこれくらいあれば充分かなあ、と思います。

それよりも、var(--color_main_thin) の 明るさを管理画面で調整することはできないものだろうかと、ちょっと悩み中です。

wp-content/themes/swell/classes/Style/Color.php

内の

Style::add_root( '--color_main_thin', SWELL::get_rgba( $color_main, 0.05, 0.25 ) );

の数値をいじればできるんでしょうけれど…SWELL親テーマ本体に修正を加えるのはちょっと気が引けます(;^_^A