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