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;#93a1a1base1
#073642;base02
#939393;#93a1a1base1
#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()による色指定については、また時間のある時にでも。