Vicunaのスキンをローカルで編集・調整する方法

Vicunaで配布しているスキンをカスタマイズする場合には、ローカルでスキンCSSを編集したあとにサーバーにアップロードし、実際のブログの表示を確認するという方法になりますが、大幅に変更したい場合などは編集のたびにこの作業をしなくてはならず、とっても面倒くさいです。

そこで、編集作業を軽減するために、VicunaのXHTML構造と同じHTMLファイルを用意しました。このファイルを使い、ローカルでスキンの編集と表示の確認をした後、完成したCSSファイル一式をサーバーニアップロードすることでローカルでの表示と実際にVicunaを使って運営されているブログが同じように表示されます。

私がVicunaのスキンを製作するときはこのファイルを利用しています。

使い方

まず以下のリンクからtyle-test.zipをダウンロードします。

• Download: styleTest.zip

スキンフォルダの中へ入れる

ダウンロードしたzipファイルを解凍すると、styleTestフォルダが出てきますので、編集したいstyle-xxxxフォルダの中へ移します。(styleTestフォルダの中へskinフォルダを入れるのではありません)

例として、style-vegaスキンを編集する場合は次のようになります。

しつこいようですが、編集したいstyle-xxxxフォルダの中に、先ほどのstyleTestフォルダを入れます。

表示の確認

styleTestフォルダの中には、ブログの各ページのHTML構造と同じものが入っています。

ためしに、styleTestフォルダ内のindex.htmlをブラウザで表示してみてください。style-vegaが反映されたブログのインデックスページと同じ表示になっているはずです。

ページの右上には、各ページを切り替えできるリンクが挿入されています。

このリンクボタンを利用することで、スキンの編集が他のページではどのように反映されているかを、確認できます。

グローバルナビ・カレンダーの確認

グローバルナビやカレンダーが記述された際の表示の確認も行えるように、各ページのHTML内にはそれぞれのソースがコメントアウトして記述してあります。これらの表示を確認する場合はコメントを解除してください。

Meta Refresh

各ページのhead要素内には、3秒置きにブラウザを更新するメタリフレッシュが記述されています。初期ではコメントアウトされていますので、利用したい方はコメントを解除してください。

メタリフレッシュを有効にすることで、CSSファイルの編集・保存と共に自動的にブラウザの表示結果が更新され、調整作業を楽にしてくれます。

スキンの編集の完成・アップロード

styleTestを使い、ローカルでスキンの編集を終えたら、style-xxxxフォルダを指定の場所にアップロードします。このとき、フォルダ内にはstyleTestフォルダが含まれていますが、そのままアップしても問題ありません。もちろん、編集・調整が完了したらstyleTestフォルダを消してからアップロードしてもかまいません。

あなたのブログが、ローカルで編集したデザインと同じようになっているはずです。