フレーバー †
フレーバー をカスタマイズ、もしくはスクラッチから作成するには、最低限 HTML を記述できる知識が必要です。また、より美しいフレーバーを作成するには CSS(Cascading Style Sheet) の知識もあった方がよいと思います。
フレーバーの種類 †
フレーバーの拡張子を html とすると、フレーバーは以下の五つのファイルから構成されます。
- content_type.html
- head.html
- date.html
- story.html
- foot.html
どのファイルも基本的に中身は HTML で記述されたファイルで、通常の html ファイルと違うのは、フレーバー を構成するファイルは、基本的に blosxom.cgi から読み込まれて、ひとつの html ファイルとして構成されてから送信されるため、ファイル中に perl の「変数」を記述することができ、これらが適宜、値に置き換えられるということを念頭において、記述する必要があります。
実際に値に置き換えられるグローバル変数は以下のようなものがあります。以下の表ですべて網羅しているわけではありませんし、別途プラグインを導入すると使用できる変数は増えることもあります。
| $blog_title | blog のタイトル |
| $url | blog の URL |
| $blog_description | blog のコメント |
content_type.html †
ドキュメントの種類と文字コードを指定する content-type HTTP ヘッダーを定義します。ページを生成する際、一度だけ使われます。
UTF-8 でコンテンツを記述する場合は、以下のようになります。
text/html; charset=UTF-8
head.html †
content_type.html のあとに一度だけ使われます。実際に生成されるページの最初の部分を定義します。
以下は最低限の記述例です。
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>$blog_title</title> </head> <body> <h1><a href="$url">$blog_title</a></h1> $blog_description
date.html †
本来は「エントリの日付が変わるごとに挿入されます」が、Ellinikonblue.com Weblog では head.html の後、一度だけ挿入され、その後エントリの日付が変わっても挿入されません。つまり、head.html の直後に一度だけ挿入されるという動作をします*1。
グローバル変数の他に次の変数が利用できます。
| $yr | 年（ 4 桁の西暦） |
| $mo | 月（ Jan, Feb など英語名で三文字） |
| $mo_num | 月（ 01 〜 12 までの2 桁の数字） |
| $da | 日（ 01 〜 31 までの 2 桁の数字） |
| $dw | 曜日（ Sun, Mon など英語名で三文字） |
| $hr | 24 時間表示の時（ 01 〜 24 までの 2 桁の数字） |
| $min | 分（ 01 〜 59 までの 2 桁の数字） |
| $hr12 | 12 時間表示の時（ 01 〜 12 までの 2 桁の数字） |
| $ampm | 午前・午後（ am もしくは pm ） |
| $ti | 24 時間表示の時と分（ $hr:$min と同じ） |
画面をどう構成するかにもよるのですが、必ず記述しなければならないこともありません。実際、Ellinikonblue.com では、先述したように、head.html 直後に一度だけしか挿入されないため、ブラウザで表示されるような記述はしていません。しかし、ファイルそのものがないと blosxom.cgi で勝手に日付が挿入されてしまうので、記述する必要がなくてもファイルだけは作っておいた方がよいでしょう。
story.html †
エントリーごとに繰り返し使用されます。グローバル変数、 date フレーバー用の変数に加えて、以下の変数が使用できます。
| $title | エントリーのタイトル |
| $body | エントリーの本文 |
| $path | エントリーへの固定パス |
| $fn | エントリーのファイル名 |
最低限の記述例を示します。
<h2>$title</h2> <p> $body </p> Posted at $mo $da, $yr <a href="$url$path/$fn.$default_flavour">$ti</a>
foot.html †
ページを生成する際、最後に一度だけ使用されます。
以下が最低限の記述例です。rss へのリンクだけ最後に表示しています。
<hr> <a href="$url/index.rss" type="application/rdf+xml">RSS Feed</a> </body> <html>
フレーバー 用のスタイルシートを作成する †
フレーバー を構成する各ファイルに、バックグラウンドやフォントなど「見栄え」に関する記述をゴリゴリ入れていけば、それなりに外観は整えられますが、これだと writeback プラグイン など、プラグイン個々にフレーバー が必要になった際、外観を統一するのが大変になってきます。
そこで、例えば先述のhead.html を、
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen,tv">
@import url(http://yourdomain.net/css/default.css);
</style>
</head>
<body>
<h1><a href="$url">$blog_title</a></h1>
$blog_description
などと変更して、スタイルシート *2 を読み込むようにしておきます。
こうしておけば プラグイン個々に フレーバー が必要になっても、 見栄えを統一することが比較的容易にできるようになります。
スタイルシートを作成する上での注意点 †
Ellinikonblue Weblog では、CSS の ID セレクタを使用して大まかに
- タイトル部分
- メニュー部分
- 本文（ストーリー）部分
- フッター部分
に分けて各々スタイルを定義しています。
ただし、ID セレクタだけを使って各部のスタイルを定義すると、Internet Explore と Mozilla 系ブラウザで見栄えが合わなくなってしまいます。 これに関して詳しい話は、 Alternative Design Project by Momomo の IE6 の width 解釈バグ対処法 をご参照ください。
Ellinikonblue Weblog では、この問題に対処するため、ID セレクタと CLASS セレクタを併用し、CLASS セレクタに対して padding 及び border を、その他の定義は ID セレクタに対して行っています。このように対処したスタイルシートを使用する HTML ファイルの構造を簡単に示すと以下のようになっています。
：（略）
<div id="headerBlock">
<div class="header">
：（ヘッダー部のコンテンツ本体）
</div>
</div>
<div id="menuBlock">
<div class="menu">
：（メニュー部のコンテンツ本体）
</div>
</div>
：（略）
また、各部ごとにスタイルシートの定義ファイルを分割し、メンテナンスについても考慮しています。詳しくは、blosxom のページで公開している Ellinikonblue.com オリジナル フレーバー を参考にしてください。
*1 これは現在導入しているプラグインの影響である可能性が多分にあります
*2 CSS の記述にあたっては、いつも K@tsukun's Page! の Cascading Style Sheets Reference を参照させていただいております。