wp.Vicuna Extのスタイルシート改造をやり直す

あけましておめでとうございます。本年もどうぞよろしくお願いします。

さて、以前、Vicuna ext.のスタイルシートは、注釈がしっかりついているのでいじりやすそうだと書きましたが、間違っていました。いくつものスタイルシートが複数のフォルダに渡ってあり、階層が深いところにあったりするため、WordPressにあるテーマ編集機能（スタイルシートやテーマのPHPファイルををブラウザからいじれる機能）が使えないため、むしろ編集はやりづらいかも、と昨年末に少しいじってみて思いました。

そのときいじりかけのまま放置してしまったので、改めてどういう構造になっているのかCSSを既存のものに一旦戻して、改造をやり直しつつしっかり見ていくことにしました。

まず、たくさんあるスタイルシートをどういう順番で読み込んでいるかということですが、

http://blog.yuco.net/wp-content/themes/wp.vicuna.ext/style.php

にあるように、

@import url(style-smartCanvas/1-element.css);
@import url(style-smartCanvas/2-class.css);
@import url(style-smartCanvas/3-context.css);
@import url(style-smartCanvas/4-layout.css);
@import url(style-smartCanvas/module/mod_subSkin/1-subSkin.css);
@import url(style-smartCanvas/module/mod_subSkin/2-singleUtilities.css);

@import url(style-smartCanvas/module/mod_gNavi/mod_gNavi.css);

@import url(http://blog.yuco.net/wp-content/plugins/vicuna-adaptors/css/icon.css);

という順番のようです。これら既存のスタイルシートには手を加えず、自作のスタイルシートファイルを追加して上書きする方向で行きたいと思います。

現在ベースに使っているLeavesというテーマを使うには、WordPress テーマ vicuna - スキンのLeavesからダウンロードして展開すると「module」というフォルダができます。これを、

wp-content/themes/wp.vicuna.ext/style-smartCanvas/

以下の「module」というディレクトリにコピーすると使えるようになります。

これで、ベースとなるスタイルシートができたので、自作スタイルシートの置き場所を考えます。

スタイルシートの読み込み順を決定しているstyle.phpの最後の行に

@import url(style.css);

を追加して、CSSファイルはもともと存在していたけれども中身がなくて、使われていなかったstyle.cssファイル内に独自の内容を書いて上書きしていくことにします。ここならブラウザからの編集もできますし。

wp-content/themes/wp.vicuna.ext/style-smartCanvas/module/mod_subSkin

内にある、

1-subSkin.css
2-singleUtilities.css

という2つのCSSファイルのうち、おもに1-subSkin.cssを見て、バックグラウンド画像を指定したり、個別エントリ表示時にタイトルの最初の一文字の色を変更しているのでその色指定を変更（このエントリなら「wp.Vicuna Extのスタイルシートを変更」の最初の「w」の字です）、フッターの文字色変更などをして、style.cssに変更して上書きしていっています。

タイトルやバックグラウンドの画像を保存するためには、既存のディレクトリを使わず、wp.vicuna.ext直下に新しいディレクトリを作ってそこに保存しました。

このようにして、本体がバージョンアップして内容が変更になっても自分が独自に改造した分だけは切り分けられるようにしています。