Osciroiの日記スタイルは、ウェブサイトのデザインにも用いられているHTML(Hyper Text Markup Language)とCSS(Cascading Style Sheets)を利用しています。 これらの使用経験がある方は、比較的容易にOsciroiのスタイルを作成することができます。
格好良いスタイルができたら、是非メールで作者まで送ってください。 現在、当ウェブサイトの「日記スタイル展示場」において公開しています。
格好良い日記をつけるために、デザインセンス溢れる皆様のお力をお貸しください。
...あ、公序良俗に反するものや、アキバ系だけは勘弁してくださいね。(^^;)
Osciroiのバージョンアップ時には、日記スタイルの形式に変更を加える場合もあります。このため、独自に作成されたスタイルが使用できなくなる場合がありますが、あらかじめご了承ください。
バージョン | 変更内容 |
---|---|
0.40 |
|
新たにスタイルを作成するには、スタイル用のフォルダを「(本体が置かれたフォルダ)\style\」に作成し、その中にスタイル用のファイルを配置します。
このファイルでは、スタイル選択時に表示される以下の情報を設定します。
スタイル選択時に表示されるプレビュー画像です。
150x100の大きさで、PNG形式の画像を用意してください。
表示画面は「本体部分」と「記事部分」で構成されています。記事が複数ある場合、記事部分が繰り返されます。
本文中の「@bgnitem」~「@enditem」で囲まれた部分が、記事部分です。
Osciroi本体との連携に必要なCSSファイルが、「(本体が置かれたフォルダ)\style\common\」に置かれています。スタイル用HTMLの<head>~</head>の中で、下記のように参照してください。
<link rel="stylesheet" type="text/css" href="../common/osciroi.css">
日記スタイルの基本はHTMLですが、Osciroi本体と連携を行うために、専用の「目印」を埋め込む必要があります。 目印は "@~" という文字列で表現されており、Osciroiが適宜その部分を置き換えて表示する仕組みです。
目印 | 概要 |
---|---|
@base |
基準となるアドレスです。 base要素のhref属性値に指定してください。 |
@js |
Osciroi本体と連携を取るためのJavaScriptがこの位置に挿入されます。 ※この印の前後にスペースやタブを入れないでください。 |
@bgnitem |
次の行から、記事部分を開始します。 ※この印の前後にスペースやタブを入れないでください。 |
@enditem |
この行で、記事部分を終了し、本体部分に戻ります。 ※この印の前後にスペースやタブを入れないでください。 |
@name |
日記名がこの位置に挿入されます。 ※この印の前後にスペースやタブを入れないでください。 |
@next |
次のページに移動するための印です。 アンカー要素のhref属性に指定してください。 |
@nextstr | 次のページに移動することを示す文字列 (例:"次の月を表示") が挿入されます。 |
@prev |
前のページに移動するための印です。 アンカー要素のhref属性に指定してください。 |
@prevstr | 前のページに移動することを示す文字列 (例:"前の月を表示") が挿入されます。 |
目印 | 概要 |
---|---|
@itemid |
記事を識別するIDです。 記事タイトル要素のid属性に指定すると、Osciroiでカレンダーの日付をクリックしたときに、記事の先頭にジャンプします。 |
@title | 記事のタイトルがこの位置に挿入されます。 |
@date | 記事の日付がこの位置に挿入されます。 |
@edit |
記事を編集するための印です。 アンカー要素のhref属性に指定してください。 |
@del |
記事を削除するための印です。 アンカー要素のhref属性に指定してください。 |
@content |
記事の本文がこの位置に挿入されます。 ※この印の前後にスペースやタブを入れないでください。 |
@category |
記事のカテゴリがこの位置に挿入されます。 ※記事にカテゴリが設定されていない場合、この印を含む行が省かれます。 |