わんくまブログはMovableTypeやWordPressと違って、スキン（テンプレート）の数が限られており（さらに.Textが配布されていない現状で新しく作ることは実質的に不可能）、グラフィカルに選択したりすることもできないのでカスタマイズが面倒です。
しかし、各種テクニックを駆使することでそれなりのカスタマイズはできるようになっています。
カスタマイズの肝はニュース欄とカスタムCSS
全てのカスタマイズはAdmin→オプション→設定の画面から行います。
特に、「スキン」と「カスタムCSS」と「ニュース/アナウンス」の欄が重要です。
カスタマイズしやすいスキンを選択する
カスタマイズを行う場合、スキンの見た目は一切無視してカスタマイズしやすさのみに重点を置きます。
主に以下の条件を満たしたスキンがカスタマイズしやすいスキンです。
- CSSのclassを多用していない
- 画像を多用していない
- サイドバーをfloatでなくposition:absoluteで実装している。
こうして絞り込んでいくと、初期設定で使用されているmarvin系のスキンがいちばん弄りやすいので、この記事ではmarvin2をベースとして解説します。
ただしサーバー側でカレンダーを生成したい場合はLuxInterior系をベースにすることになります。
ニュース欄はh3、ul、liを使って記述する
marvin系スキンでのニュース欄の構造は、
<h3>ニュース</h3>
ニュース欄の内容
<h3>書庫</h3>
<ul>
<li>0000年01月</li>
<li>0000年02月</li>
</ul>
<h3>カテゴリ</h3>
<ul>
<li>カテゴリ1</li>
<li>カテゴリ2</li>
</ul>
のようになっているので、ニュース欄の内容も同じ形式で書く必要があります。
ただし、アクセス解析のようなスクリプトやニュース欄以外の場所に配置する広告はulの外に配置した方がよいでしょう。
CSSは外部ファイルに分離する
カスタムCSSの入力欄はお世辞にも使いやすくはなく、幸いなことにCSSには@import規則という外部のCSSを読み込む手段があるのでこれを使用します。
@import規則はIE6のような古いブラウザにも対応しているので安心して使用できます。
書式は、
@import url(読み込むCSSのURL);
で、これをセレクタやコメントより前に置きます。
セレクタやコメントより後に置くと読み込まれません。
外部のCSSは使い込んだエディタやVisual Web Devlopper、DreamWeaver、ホームページビルダーなどで編集するとよいでしょう。
Firefox使いはWebDevelopperを入れろ
Firefoxを使っているのであれば、WebDevelopperという拡張機能でリロードなしでCSSの編集、確認ができます。
わんくまのサーバにも優しいのでぜひ導入しましょう。
で、結局どんなセレクタを書けばいいの？
marvin2のHTMLは以下のようになっています（若干簡略化してあります）。
○body
○div#top
└○h1
└○a
└○p#tagline
○div#leftmenu
└○h3
└○ul
└○li
○div#main
└○p.date
└○a
└○div.post
└○h2
└○a
└○本文
└○p.postfoot
○p#footer
特に設定すべきものは、
- body、div#top、div#mainのcolor、background
- div#top、div#mainのborder
- a:link、a:visited、a:hover、a:activeのcolor、text-decoration
- div#leftmenu ul、div#leftmenu ul liのborder、padding
です。
まとめ
これだけ知っておけば最低限のカスタマイズはできます。
CSSに関しては以下のリンク集を参考にしてください。
また他にも参考になるサイトは山ほどあります。
あと質問はコメント欄で受け付けておりますのでご自由にどうぞ。