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フォルダを消してからアップロードしてもかまいません。
あなたのブログが、ローカルで編集したデザインと同じようになっているはずです。
- Newer: 分割CSSファイルの構成とそのルール
- Older: Vicuna ユーザーページ数 2007.07/24
Comments:5
- そらまめ* 2009年3月28日 15:36
はじめまして。
ずっとHPビルダーでサイトを作ってきましたが、
ｍｔを導入したいと実践中です。
ローカルで編集する方法ですが、
私のダウンロードしたstyle-vegaの中身は
MACOSX,style-vegaの各フォルダが、
その中でstyle-vegaの中には、
imagesのフォルダとcore.css,import.css,layouts.css, .DS storeの４つのファイルしかありません。
上のフォルダ構造の図のようなmoduleフォルダほかその他のファイルがありません。
そのためか、styleTestのプレビューからindex.htmlを実行してもスタイルが何もない状態なのです。
ど素人の私ですが、なんとかカスタマイズを頑張りたいと思っていますのでご指導よろしくお願いします。
- wu 2009年3月28日 15:52
そらまめ*さん、こんにちは。
こないだVicunaのスキンを作り直してしまったので、この記事での説明と、実際のファイル名等、食い違いが出てしまっています。ごめんなさい。
style-vega(スキン)フォルダの中に、styleTest.zipを解凍して出てくる preview フォルダを入れ、previewフォルダの中にあるindex.html等を見てみて下さい。以下のようなツリーになります。
[style-hoge]
import.css
core.css
layouts.css
[images]
[preview]
index.html- そらまめ* 2009年3月28日 21:11
ありがとうございます。
できました＾＾；これでカスタマイズの幅がぐ～～～～～～んと広がりそうです＾＾）
実は、スタイルシートを書き換えるのに、どこから入るの？って状態だったんですが、（スタイルシートのソースがどこ？状態）ようやく理解できそうです。
これからもよろしくお願いします＾＾；
- そらまめ* 2009年3月28日 21:35
何度もすみません。
ふと思いつき、
previewのindex.htmlを私のHPビルダー11で表示してみたのですが、ちゃんとｃｓｓが付属して編集ができます。
これでheader~footerまでの部分を編集してその部分のみを元データ（index.html)に埋め込めばうまくいくのかな？
と・・
ローカルで編集・調整する方法は私にはとってもお役立ちになりそうです。
ありがとうございましたｖ- wu 2009年3月28日 22:28
よかった
これでCSSファイルを編集して、好みの表示になったら、
編集したCSSファイルをサーバーにアップロードすれば反映されます。（htmlファイルは表示確認用なので、確認以外には使用しません）
Trackbacks:0
- TrackBack URL for this entry
- http://3ping.org/mt2/mt-tb.cgi/95
- Listed below are links to weblogs that reference
- Vicunaのスキンをローカルで編集・調整する方法 from 3ping.org
