スキン
RingBlogでいうスキンとは、画面設定ファイル cssconf.txt、それを反映したスタイルシート design.css、
およびそこで使われる背景画像をセットにしたものです。
ブログの基本ディレクトリに skin ディレクトリがあり、その中にスキン名のディレクトリを作成し、 ファイルを置きます。ディレクトリ名がスキン名となるので、スキン名にはディレクトリ名に使うことができない 文字 ( / ? * 日本語 他) を使うことはできません。
設定画面では skin にある ccsconf.txt と design.css を含むディレクトリをスキンであると みなして表示します。
ブログの基本ディレクトリに skin ディレクトリがあり、その中にスキン名のディレクトリを作成し、 ファイルを置きます。ディレクトリ名がスキン名となるので、スキン名にはディレクトリ名に使うことができない 文字 ( / ? * 日本語 他) を使うことはできません。
設定画面では skin にある ccsconf.txt と design.css を含むディレクトリをスキンであると みなして表示します。
スキン変更後は「デザイン詳細設定」で「デザイン変更」を実行し、ブラウザで再読み込みをしないと表示に反映しないことがあります。
注意)
スキンディレクトリに置く画像は、cssconf.txt で設定する各画面領域の背景画像だけです。
タイトル画像は、基本ディレクトリの img ディレクトリに置きます。
管理画面の「画面設定」で設定を変更すると、内容をそのとき選ばれているスキンの ccsconf.txt に保存し、
設定内容と templateディレクトリにあるスタイルシート・テンプレートから design.css を
生成します。
画面関係の設定
画面の色、背景画像、題名、表示内容などは「管理画面」で設定できます。
題名や表示内容は config.cgi に保存されます。
管理画面の「デザイン詳細設定」の大部分は cssconf.txt に保存されます。
タイトル画像や背景画像を指定する場合は、それぞれ格納するディレクトリは決まっているのでURLではなくファイ名だけを記入してください。
「デザイン変更」を押すと、cssconf.txt にデータを保存し、templateディレクトリの design.css と csscof.txt から使用中のスキンの design.css が生成されます。(使用中のスキンの CSSファイルを一部変更するのではなく、新しく生成します)
このため、使用中のスキンの design.css を直接編集したとしても、「デザイン変更」をすると 編集した部分は捨てられます。
題名や表示内容は config.cgi に保存されます。
管理画面の「デザイン詳細設定」の大部分は cssconf.txt に保存されます。
タイトル画像や背景画像を指定する場合は、それぞれ格納するディレクトリは決まっているのでURLではなくファイ名だけを記入してください。
「デザイン変更」を押すと、cssconf.txt にデータを保存し、templateディレクトリの design.css と csscof.txt から使用中のスキンの design.css が生成されます。(使用中のスキンの CSSファイルを一部変更するのではなく、新しく生成します)
このため、使用中のスキンの design.css を直接編集したとしても、「デザイン変更」をすると 編集した部分は捨てられます。
スキンやデザインの変更後は、ブラウザで再読み込みをしないと表示に反映しないことがあります。
画面領域
RingBlog は画面領域を以下のように分けています。
グレー部分はブラウザの画面で、全体背景 (screen) です。
青で囲まれた部分が実際に RingBlog が使う領域で、ページ(page)と呼びます。
メインボックスはインデックス(新着情報や記事一覧)がテーブルの中に表示されます。
サイドバーにはメニューや補助情報がテーブルの中に表示されます。
|
トップボックス |
|
|
タイトルボックス title_box |
|
|
メッセージボックス |
|
|
メインボックス mainbox
テーブル
table
テーブル
table |
サイドバー sidebar
テーブル
table
ユーザー
ボックス
テーブル
table |
| フッター | |
グレー部分はブラウザの画面で、全体背景 (screen) です。
青で囲まれた部分が実際に RingBlog が使う領域で、ページ(page)と呼びます。
メインボックスはインデックス(新着情報や記事一覧)がテーブルの中に表示されます。
サイドバーにはメニューや補助情報がテーブルの中に表示されます。
各領域には背景色と背景画像を設定することができます。
テーブルには枠線をつけることができ、太さ(0〜5)や色の指定もできます。
テーブルの中の区切り線の色指定もできます。区切り線の太さは枠線の太さに応じて変わります。
テーブル以外の領域には枠線をつけることはできません。
トップボックス、メッセージボックス、フッターボックス、ユーザーボックスは、表示/非表示を設定できます。
タイトルボックス
タイトルボックスには、ブログ題名文字列と副題、あるいはタイトル画像を表示することができます。(両方表示することはできません)
この文字列またはタイトル画像をクリックすると、初期状態のトップページへ戻ります。
タイトルボックスを非表示にすることはできません。
タイトルボックスの幅は 760 です。高さはタイトル文字やタイトル画像によって自動的に決定されます。 高さを「デザイン設定」で指定することも可能ですが、通常は無指定(自動)にしてください。
タイトルボックスの背景画像はスキンに、表示するタイトル画像は img ディレクトリに置いてください。
ページにもメインボックス、サイドバーにも色や背景画像を置かない場合には全体幅が少し狭く見えるので、 合うように画像幅を調整してください。(InternetExplorerとMozillaでは幅について表示が異なることがあります)
この文字列またはタイトル画像をクリックすると、初期状態のトップページへ戻ります。
タイトルボックスを非表示にすることはできません。
タイトルボックスの幅は 760 です。高さはタイトル文字やタイトル画像によって自動的に決定されます。 高さを「デザイン設定」で指定することも可能ですが、通常は無指定(自動)にしてください。
タイトルボックスの背景画像はスキンに、表示するタイトル画像は img ディレクトリに置いてください。
ページにもメインボックス、サイドバーにも色や背景画像を置かない場合には全体幅が少し狭く見えるので、 合うように画像幅を調整してください。(InternetExplorerとMozillaでは幅について表示が異なることがあります)
インデックス
初期状態ではメインボックス上部で新着記事リストを表示します。
インデックスはメインボックス上部またはサイドバーに表示しますが、「サイドバーに表示」をオンにして サイドバーの表示項目でインデックスをオンにしていないと、どこにも表示されないことになるので注意してください。
インデックスはメインボックス上部またはサイドバーに表示しますが、「サイドバーに表示」をオンにして サイドバーの表示項目でインデックスをオンにしていないと、どこにも表示されないことになるので注意してください。
サイドバー
サイドバーは左右どちらに置くこともできます。
各項目を表示するかどうかを個別に設定できます。表示順の変更も可能です。
各項目を表示するかどうかを個別に設定できます。表示順の変更も可能です。
カレンダー
カレンダーはヘッダー部(タイトルボックスやメッセージボックスの下)かサイドバーに表示することができます。
カレンダーの各日付には、日曜、土曜、平日に分けて文字色、背景色を設定することができます。
その他にユーザー設定休日、記事がある日付にも曜日とは関係なく文字色、背景色が設定できます。
優先度は 記事(リンク)がある日付 > ユーザー設定休日 > 曜日別色設定 です。
ユーザー設定休日、記事がある日付に背景色が設定されていなければ、曜日別の背景色になります。文字色が設定 されていなければ、既定の色になります。
カレンダーの各日付には、日曜、土曜、平日に分けて文字色、背景色を設定することができます。
その他にユーザー設定休日、記事がある日付にも曜日とは関係なく文字色、背景色が設定できます。
優先度は 記事(リンク)がある日付 > ユーザー設定休日 > 曜日別色設定 です。
ユーザー設定休日、記事がある日付に背景色が設定されていなければ、曜日別の背景色になります。文字色が設定 されていなければ、既定の色になります。