[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。

サイトの配色を試行錯誤

元の配色です。

臙脂色を基調した配色。

焦げ茶色をメインにした配色。

それをさらに濃くした配色です。

「ユーザー補助」

「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。

パッと見でも、文字が読みやすくなったと思います。

CSSでのカスタムカラー

追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color) を使うと変更がしやすくなります。

こちらもどうぞ。

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした

ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。 Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。