エディタ使いに優しい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()
による色指定については、また時間のある時にでも。
コメント