Osciroiの日記スタイル

Osciroiの日記スタイルは、ウェブサイトのデザインにも用いられているHTML(Hyper Text Markup Language)とCSS(Cascading Style Sheets)を利用しています。 これらの使用経験がある方は、比較的容易にOsciroiのスタイルを作成することができます。

格好良いスタイルができたら、是非メールで作者まで送ってください。 現在、当ウェブサイトの「日記スタイル展示場」において公開しています。

格好良い日記をつけるために、デザインセンス溢れる皆様のお力をお貸しください。

...あ、公序良俗に反するものや、アキバ系だけは勘弁してくださいね。(^^;)

注意ご注意

Osciroiのバージョンアップ時には、日記スタイルの形式に変更を加える場合もあります。このため、独自に作成されたスタイルが使用できなくなる場合がありますが、あらかじめご了承ください。

バージョン変更内容
0.40
  • スタイル用HTMLを1本化
  • 作者情報・プレビュー情報を追加

新たなスタイルを作ろう

はじめに

新たにスタイルを作成するには、スタイル用のフォルダを「(本体が置かれたフォルダ)\style\」に作成し、その中にスタイル用のファイルを配置します。

スタイル情報ファイル(style.ini)

このファイルでは、スタイル選択時に表示される以下の情報を設定します。

name
スタイルの名称です。
author
スタイルの作者名です。
overview
スタイルに関する簡単な説明です。
一行で記述してください。

プレビュー画像(preview.png)

スタイル選択時に表示されるプレビュー画像です。
150x100の大きさで、PNG形式の画像を用意してください。

プレビュー画像サンプル

スタイル用HTML(style.html)

表示画面は「本体部分」と「記事部分」で構成されています。記事が複数ある場合、記事部分が繰り返されます。

スタイル用HTMLの構造

本文中の「@bgnitem」~「@enditem」で囲まれた部分が、記事部分です。

参照が必要なファイル

Osciroi本体との連携に必要なCSSファイルが、「(本体が置かれたフォルダ)\style\common\」に置かれています。スタイル用HTMLの<head>~</head>の中で、下記のように参照してください。

<link rel="stylesheet" type="text/css" href="../common/osciroi.css">

Osciroi専用の「目印」

日記スタイルの基本は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 記事のカテゴリがこの位置に挿入されます。
※記事にカテゴリが設定されていない場合、この印を含む行が省かれます。

うまくいかないときは

テスト時と表示が異なる・レイアウトが崩れる
OsciroiのHTML表示エンジンはIE(Internet Explorer)と同じものを使用しています。 このため、他のブラウザと異なる表示をする場合があります。
Internet Explorerにて表示確認を行うと、間違いありません。