Snow Monkey の CSS変数について知る（My Snow Monkey Starter成長記 vol.1）

この記事はSnow Monkeyの2020年アドベントカレンダー 11日目の記事です。

こんにちは、mimiです。

Snow Monkeyの2020年アドベントカレンダー、私が別にしゃしゃり出る必要は無かったんじゃないかという盛況ぶりで何よりですが、ピアスがもう一個欲しかったので頑張って書きました！というのは冗談ですけれども私にとってのSnow Monkeyのファーストインプレッションは2018年のイヤリングなのでなにやら勝手に縁を感じますね。まだ2年か。濃。

Photo by Mika Taniai

さて、夏に書きました My Snow Monkey Starter がちょっとアップデートしたよという記事にしようと思ったのですが、それだけだと俺得以外の何物でもないので、Snow Monkeyコミュニティにちょっとは貢献する内容にならないかなと思いまして、今年からついにSnow Monkeyにも導入されましたCSS変数の解説でもしてみたいと思います。

Snow Monkey の CSS変数について

実は7月の時には数個しか無かったSnow MonkeyのCSS変数が、ガサっと増えていまして、ちょっと前に案件で少し焦ったのでちゃんと調べておきたいなと思っていたのでした。

CSS変数とは?

その前にそもそも、CSS 変数とはなんぞ？という方に少しだけ解説させていただくと、

CSS変数、本来は「カスタムプロパティ」と呼ぶべきらしいですが、CSS変数の方が分かりやすいのでこの記事ではCSS変数と呼びます。CSS内に書ける変数、文書全体で再利用可能な特定の値、のことです。

通常、色を指定する時は、

color: black;

という風に書きますが、

--main-color: black;

と設定しておくと、

color: var(--main-color);

という風に記述することができます。色だけでなく色んな値を変数化できるのでとても便利です。

より詳しくはこちらのページなどをご参照ください。

CSS カスタムプロパティ (変数) の使用 – CSS: カスケーディングスタイルシート | MDN

つまり、Snow Monkeyに使われているCSS変数を把握しておくと、冗長なハックをせずにサクッとデザイン変更ができるようになります。

ご注意:
Snow Monkeyは公式として、現時点ではCSS変数のユーザー側の活用を推奨しているわけでは無いのでご注意ください。

Snow MonkeyのCSS変数を書き出してみよう

さて、そんな便利なCSS変数ですが、まずはSnow Monkeyにどんな変数が使われているのかをリストアップしてみました。

私の調査では、Snow Monkey 11.8 に設定されているCSS変数は以下の通りでした（昨日12が出たので一応ソースを再確認した、気になっていますが変わってたら御免）。実際に記述されている先も書いておきましたが、興味がある人はごく一部というかほぼ私用のメモなので、あんまり気にしないでください。値は初期値です。

/vendor/inc2734/wp-basis/src/assets/packages/sass-basis/src/css/foundation/_base.scss

:root {
    --_background-color: transparent;
}

これは↓で上書きされていますね。

/src/css/foundation/_foundation.scss

:root {
    --_background-color: #fff;
}

/assets/css/foundation/_body/_body.php

:root {
--_container-max-width: 1280px;
--accent-color: #cd162c;
--dark-accent-color: #710c18;
--light-accent-color: #ed5c6d;
--lighter-accent-color: #f49aa5;
--lightest-accent-color: #f6aab3;
--sub-accent-color: #707593;
--dark-sub-accent-color: #444759;
--light-sub-accent-color: #aaadbf;
--lighter-sub-accent-color: #d1d3dd;
--lightest-sub-accent-color: #dcdde4;
--entry-content-h2-border-left: 1px solid var(--accent-color, #cd162c);
--entry-content-h2-background-color: #f7f7f7;
--entry-content-h2-padding: calc(var(--_space, 1.76923rem) * 0.25) calc(var(--_space, 1.76923rem) * 0.25) calc(var(--_space, 1.76923rem) * 0.25) calc(var(--_space, 1.76923rem) * 0.5);
--entry-content-h3-border-bottom: 1px solid #eee;
--entry-content-h3-padding: 0 0 calc(var(--_space, 1.76923rem) * 0.25);
--widget-title-display: flex;
--widget-title-flex-direction: row;
--widget-title-align-items: center;
--widget-title-justify-content: center;
--widget-title-pseudo-display: block;
--widget-title-pseudo-content: "";
--widget-title-pseudo-height: 1px;
--widget-title-pseudo-background-color: #111;
--widget-title-pseudo-flex: 1 0 0%;
--widget-title-pseudo-min-width: 20px;
--widget-title-before-margin-right: .5em;
--widget-title-after-margin-left: .5em;
}

/src/css/editor-style.scss

:root {
  --wp-block-width: var(--_container-max-width, 1280px);
}

あたりが分かりやすいですが他にも、/vendor/inc2734/wp-basis/src/assets/packages/sass-basis/src/css/core/var　以下にごそっっと入っていますので気になる人は見てみてください。

というわけで思っていた以上に沢山あって私もびっくりしています。幅や色、マージンなどの設定値がズラッとありますが、マージンや余白調整に迂闊に踏み込むと痛い目を見ると思いますので、この記事では軽く色の設定について取り出して書いていこうと思います。

カスタマイザーから設定できる色

--accent-color
--dark-accent-color
--light-accent-color
--lighter-accent-color
--lightest-accent-color
--sub-accent-color
--dark-sub-accent-color
--light-sub-accent-color
--lighter-sub-accent-color
--lightest-sub-accent-color
--header-text-color

この辺りは、カスタマイザーで設定できる2色、アクセントカラーとサブアクセントカラーから生成されているのでそちらから変更できるようになっています。最後の--header-text-color はカスタマイザー > デザイン > ヘッダーにあるヘッダーの文字色 ですね。カスタマイザーを利用している方が大半だと思うので、この辺りの色は追加CSSとかから変更せずにカスタマイザーの設定を変更しましょう。

また、私みたいなひねくれ者しかあんまりやる人は居ないと思うのですが、もしかしたら軽量化を目的に Snow Monkey Dietで「カスタマイザー由来の CSS を無効化」にチェックを入れていると、上記の_body.phpによるheadタグ内のスタイルは読み込まれなくなります。しかしCSS変数自体は生きているので、上書きが可能です。

カスタマイザーからは設定出来ない色

次に、カスタマイザーからの設定では変更できない色設定について解説します。以下の2つはカスタマイザーで見出しの設定をいじると表示されなくはなりますが、色自体はいじれないので、色だけをちょっと変えたい人がいたら触ってみると良いかもです。

`--entry-content-h2-background-color`

h2の標準スタイルの時の背景色。初期値は#f7f7f7

`--entry-content-h2-border-left`

これは色だけでなくてborder-leftそのものなのですが、h2の標準スタイルの時の左横線。初期値は 1px solid var(--accent-color, #cd162c)

`--widget-title-XXXXXX`

ウィジェットのタイトルまわりの設定値。

--widget-title-display: flex;
--widget-title-flex-direction: row;
--widget-title-align-items: center;
--widget-title-justify-content: center;
--widget-title-pseudo-display: block;
--widget-title-pseudo-content: "";
--widget-title-pseudo-height: 1px;
--widget-title-pseudo-background-color: #111;
--widget-title-pseudo-flex: 1 0 0%;
--widget-title-pseudo-min-width: 20px;
--widget-title-before-margin-right: .5em;
--widget-title-after-margin-left: .5em;

これもh2と同じく、オフにはできるけれど色を変えたりは出来ないので、ちょっと弄りたい時には良いかもしれません。

例えば、

:root {
--widget-title-pseudo-background-color: #999;
}

と追加CSSに書くと横線が少し薄めになったりとか。displayまでいじれるので結構色々できますね。

さて、わりと気軽に触れるのはココまでかもしれないです。以下は色んな処に使われている色なので極端に色を変えると検証が面倒かもしれません。

`--_color-gray`

パンくずリスト、figcaptionの文字色など。

`--_light-color-gray`

コピーライトの文字色。ページネーションの背景色など。

`--_lighter-color-gray`

テーブルの線の色など、沢山の箇所に使われています。

`--_lightest-color-gray`

タグの背景色、フォームのdisableなど。

`--_color-black`

コピーライトの背景色など。

`--_lighter-color-text`

抜粋の文字色など。

…さて困りました。

本当は、Snow Monkeyの配色で、コピーライトの背景色の黒が強いから変えたくなる人多いんじゃないかなと思って、追加CSSに

:root {
    --_color-black: gray;
    --_light-color-gray: #fff;
}

とかしたらスグに変更できるよ、みたいなtipsを書いてお茶を濁そうと思っていたのですが、キタジマライブラリが壮大過ぎて影響が広すぎるので止めておきます。Woo commerce用の設定とかにも使われているので検証が面倒で責任が持てませんｗ

あと、color-blackにblackじゃない色を当てるのは気持ち悪いですしね。一応書いておくと、単純に上記のようなカスタマイズがしたかったら、

.c-copyright {
    background-color: gray;
    color: #fff;
}

で良いのであんまりコード量は変わりませんから気軽に影響箇所を把握していないCSS変数をいじらない方が良いです。それでも立ち向かおうという勇者は自力で解に辿り着く勢だと思うので頑張ってください！

個人的にはgrayのlighterをopacityいじる感じにしてくれると背景に馴染んでくれるから良いかもなあと思ったりしましたが、全体の調整が必要なので大変かなあ。

多分、まだ過渡期で来年になったらまた手が入っている気がするので、今後もウォッチしていきたいと思います。

2020/12/11 10:02 追記: キタジマさんから爆速でアンサーブログが届いたので追記させていただきますね。

Snow Monkey の CSS カスタムプロパティ（CSS 変数）について – WordPress テーマ Snow Monkey

なんでわざわざ black とか gray とか定義してるの？直接 #111 とか #ccc とか書けば良いやん？と思われる方もいると思うので解説を。これは別に黒やグレーをサイトの雰囲気にあわせて調整してねという用途で用意しているわけではなくて（まぁ結果それもできるようになってるけど）、ダークモードのために用意した変数になります。通常は黒だけどダークモードなら白に変更する、というのを一撃でできるようにするためですね。
（中略）
ただ、変数化してみたは良いものの、現実的には有彩色に重なった部分はどうするかとか、無彩色同士でも色の組み合わせによっては単純に反転させたら超見えにくいとか、いろいろ問題があるので、結局単純に一撃で変更することはできず、オフィシャルな機能としてはダークモード対応機能は持たせていません…。
Snow Monkey の CSS カスタムプロパティ（CSS 変数）について – WordPress テーマ Snow Monkey

さすがですね、2020のトレンド、ダークモードに対応しようとしている…！ダークモードとはなんぞ？という方はこちらの記事などを参照ください。

ダークモード、かっこいいのですが色を反転するだけで良い訳ではない、意外と考慮事項が多いスタイルなので一朝一夕で対応できるものでは無いのです。私もよっぽどコンテンツの内容的にダークモードと親和性が高い（例えば照明器具のサイトだったりとか、開発者ツールだったりとか？）場合でも無い限り提案しませんし、ちょっとやってみたいとかのノリのクライアントだったら全力で止めます。工数かかるよっていって。でもデザイナーとしてはガッツリ取り組んでみたくなるトレンドですよね。

こうやって日々色んな事を取り入れつつ、ちゃんと検証してくれているテーマなので皆にほんとに使いやすいものになっているんだと思います。有り難や。

グレイの扱いも、本当に難しくていつもデザインで悩みますので、めっちゃ分かる。

変数の名前ひとつにも設計者の深い意図が隠されている、ということですね。

My Snow Monkey Starter には、この辺の変数を書き変えてしまう（さっきさわるなっていったやないかというツッコミは甘んじて受けます）コードを書いています。Dart Sassにしたの忘れてて実装に地味に時間がかかったのですが、いい勉強になりました。

おまけ：Starter にカスタムの Block Pattern と Block Style を突っ込めるクラス作ったよ

さて、おまけ的に、案件で使ったクラスなどをスターターに盛り込んでみました。

5.6から使えるようになったremove_theme_support( 'core-block-patterns' );を使ってコアのブロックパターンを全削除しまして、自作のパターンを簡単に突っ込めるカタチにしております。

2020/12/11 10:23追記: 5.6からって書きましたが、フラグ自体は5.5からでした。
https://make.wordpress.org/core/2020/07/16/block-patterns-in-wordpress-5-5/
Gutenbergとしては8.6からなのですが、先にコアに取り込まれていたようです。
https://github.com/WordPress/gutenberg/pull/24042

こんな感じのブロックパターンが一つだけ入るようになっています。

もちろん、Snow Monkey Blocksのパターンはそのままです。コード的にはこのあたりをイジって、/block-patterns/hero.jsonの書き方を真似したjsonを作ればいいだけです。Block Patternの仕様はこちら。

まあとはいえ、普通はカスタムブロックパターンを入れるなら、VK Block Patterns とかCustom Block Patternsとかを使えば良いとは思います。コアのパターン削ったり色々細かくハンドリングしたい人向けですね。まあMy Snow Monkeyという発想自体がそういう開発者層向けですよね。

あと、カスタムブロックスタイルも一例として buttons に一つ入れておきました。コードとしてはこのあたり。

どなたかのお役に立てれば幸いです。
miminari/my-snow-monkey-starter

明日のSnow Monkey Advent Calendar 2020 – Adventar 12日目は YMさんです！

Snow Monkey の CSS変数 について知る（My Snow Monkey Starter成長記 vol.1）

Snow Monkey の CSS変数 について

CSS変数とは?

Snow MonkeyのCSS変数を書き出してみよう

カスタマイザーから設定できる色

カスタマイザーからは設定出来ない色

--entry-content-h2-background-color

--entry-content-h2-border-left

--widget-title-XXXXXX

--_color-gray

--_light-color-gray

--_lighter-color-gray

--_lightest-color-gray

--_color-black

--_lighter-color-text