エディタ使いに優しい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カラーに対応させた。なお、各色の確認には原色大辞典さんの色調合を使用した。複数の色を並べて比較できるので、非常に便利であった。
| 変更前 | 変更後 | 色名 |
|---|---|---|
| #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()による色指定については、また時間のある時にでも。
コメント