WordPressの配色にSolarizedを適用

エディタ使いに優しいSolarizedの配色をWordPressにも適用してみた。

『基礎からのWordPress』によると、WordPressのスタイルシートはstyle.cssに一元化されているとのこと。場所を調べ、編集に備えてバックアップを取った後、使用されている配色を調べてみる。

> find public_html/blog/ -name 'style.css' -print
public_html/blog/wp-content/themes/twentytwelve/style.css
public_html/blog/wp-content/themes/twentyfourteen/style.css
public_html/blog/wp-content/themes/twentythirteen/style.css
> cd public_html/blog/wp-content/themes/twentyfourteen/
> mv style.css style.css.orig
> cp style.css.orig style.css
> grep -Eoe '#[0-9a-z]+;' style.css.orig | sort | uniq
#000;
#21759b;
#24890d;
#2b2b2b;
#41a62a;
#4d4d4d;
#55d737;
#767676;
#939393;
#999;
#c0392b;
#ccc;
#f1f1f1;
#f5f5f5;
#fff;
#fff9c0;

それほど多くはなく、モノクロームに緑系でアクセントを加えていることが分かる。文字色/背景色も加味して、以下のとおりSolarizedカラーに対応させた。なお、各色の確認には原色大辞典さんの色調合を使用した。複数の色を並べて比較できるので、非常に便利であった。

TwenteenFourteenとSolarizedの対応表
変更前 変更後 色名
#000; #002b36; base03
#586e75; base01
#21759b; #6c71c4; violet
#24890d; #859900; green
#b58900; yellow
#2b2b2b; #657b83; base00
#41a62a; #2aa198; cyan
#4d4d4d; #586e75; base01
#55d737; #268bd2; blue
#767676; #93a1a1 base1
#073642; base02
#939393; #93a1a1 base1
#999; #eee8d5; base2
#c0392b; #dc322f; red
#ccc; #93a1a1; base1
#f1f1f1; #eee8d5; base2
#f5f5f5; #fdf6e3; base3
#fff; #93a1a1; base1
#586e75; base01
#fdf6e3; base3
#fff9c0; #eee8d5; base2

スタイルシートに反映させ、差分を取る。

> vim style.css
> diff -u style.css.orig style.css > ~/public_html/resources/style.css.diff
> cp style.css ~/public_html/resources/wp-twentyfourteen-solarized-style.css

やっつけ感満載ではあるが、ご参考まで適用したスタイルシートオリジナルとの差分を公開する。rgba()による色指定については、また時間のある時にでも。

コメントをどうぞ