蛍光マーカーの色を全媒体共通にするのをやめた話
今回やったこと
本文の強調に使う色は、色コード単体で決められない。明るい背景向けの黄色いマーカーをダークテーマへ持ち込むと、白に近い本文との組み合わせが崩れ、強調したい箇所が読みにくくなる。そこで媒体ごとにテーマを分け、ダークテーマでは琥珀色の半透明マーカーを使う構成へ改めた。
対象のテーマは背景 #070b14、本文 #f8fafc、アクセント #00ffca で構成される。マーカーは rgba(224,168,0,.35) とし、既存記事に残る #fff066 はCSSの属性セレクターで吸収する。記事本文を書き換えず、表示側で過去の指定を安全に受け止めるのが今回のポイントだ。
色ではなく組み合わせを検査する
同じ黄色でも、白系の背景と暗い背景では意味が変わる。明るいテーマでは黄色の帯が背景から浮いても、暗いテーマでは半端に明るい帯と白い文字がぶつかる。色を全媒体の定数として配ると、サイト側の前提を取り違えた瞬間に問題が広がる。
設定ファイルでは媒体ごとに marker を持ち、背景と本文の値は各サイトのCSS変数を参照する。zashstudioだけは --bg-dark と --text-main を使う。背景・本文・マーカーを一つの表へコピーして管理しないことで、「ドキュメントだけ古い」という別のズレも避けている。
.pro-content [style*="fff066" i] {
background: linear-gradient(transparent 60%, rgba(224,168,0,.35) 60%) !important;
}
この吸収ルールは過去記事の互換層であり、新規記事に明るい色を直書きしてよいという意味ではない。囲みボックスの背景色までは同じルールで吸収できないため、暗色テーマ用の値を使う必要がある。
デザイン判断を機械ゲートにつなぐ
scripts/config/media_theme.json には、媒体のテーマ、マーカー、CSS上書き、検査対象のコンテンツ範囲を記録している。ドキュメント側のテーマ表はスクリプトで生成され、手動変更との差分を検査できる。さらにコントラストの下限を設定し、色の選択を「見た目の好み」だけにしない。
ただし、数値が通れば読みやすさが保証されるわけではない。帯と背景の差、本文との境界、実際の文字サイズを合わせて確認する必要がある。重要なのは、一度の目視確認だけで満足せず、変更が入った時点で自動検査の対象として残し、継続して目視確認できる仕組みにすることだ。
更新履歴
- 2026-08-23: 初稿
訂正履歴
なし。