CSS スキンのマニュアル

POPFile 0.22 からのスキンは、CSS スキンと (ユーザの好きなように UI を) 変更することができる HTML テンプレート の二つの部分から 構成されるようになりました。テンプレートは任意であり、なくてもかまいません。<br> それらは 'skins' ディレクトリの中のスキン名のディレクトリに格納されます。<br> スキン名はそのディレクトリ名によって決まり、すべての CSS ファイルは style.css という名前で固定されています。 スキンで使われる画像はすべてスキン名のディレクトリに置いてください。

クラスの一覧

以下は POPFile インタフェースのスキン作成で使われるクラスの一覧です。 それぞれのクラスは適用される要素に応じてまとめられています。 どういうものを指定できるかという詳細は、W3Cオンラインリファレンス http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS2/ を参照してください。(ともに英語)<br> 現時点では、POPFileで使えるスキンは CSS1 クラスのものに限定されていることに注意してください。 しかし、これは厳重な規則ではなく、一部に CSS2 を使ったスキンがあるかもしれません。 多くの最近のブラウザーできちんと表示できる範囲なら、ブラウザー独自のクラスや CSS2 クラスを使うことも可能です。

シェル (Shells : 外枠)

シェルはページ最上部のヘッダと、メインテーブル(メニューは含まない)の外枠のスタイルについてのレイアウト構造です。 “shell” クラスはメインテーブルの、”shellTop” クラスはヘッダテーブルの外枠です。 それぞれのシェルは二つの row (top (上)、bottom (下)) クラス、left (左) と right (右) の TD セル、そしてそれぞれの行にある個別の セル(left (左)、center (中央)、right (右))に分かれます。 さらに内容を保持するテーブルの中心に “naked” セルがあります。 これらのテーブルは色や境界線や画像で好きなように飾ることができます。

(訳注:それぞれのクラスは、下記の部分をあらわします)

table.shell / table.shellTop (ヘッダ、メインテーブル全体)

td.shellTopLefttd.shellTopCentertd.shellTopRight← tr.shellTop (列全体)
td.shellLeft td.naked<br>ヘッダ・メインテーブルの内容 td.shellRight
td.shellBottomLefttd.shellBottomCentertd.shellBottomRight← tr.shellBottom (列全体)
table.shell
table.shellTop
tr.shellTopRow
td.shellTopLeft
td.shellTopCenter
td.shellTopRight
td.shellLeft
td.naked
td.shellRight
tr.shellBottomRow
td.shellBottomLeft
td.shellBottomCenter
td.shellBottomRight

ヘッダテーブル (Header Table)

見出しテーブルはプログラム名とシャットダウンへのリンクを含むページ上部の囲まれた領域です。 td.head クラスは一番左のセルで、「POPFile コントロールセンター」というテキストを表示します。 td.headShutdown クラスは右にあり、シャットダウンへのリンクを表示します。(「リンク」を参照)

table.head
td.head
td.headShutdown

スペーサー (Spacer)

スペーサー・テーブルセルはヘッダテーブルとメニューを分離する役割を持ちます。 あなたが空けたいと思う空白の大きさに合った em 値 (たとえば : 0.8em) を設定してください。

td.logo2menuSpace

(訳注:スペーサーは現在使われていないようです)

メニュー (Menu)

メニューテーブルはコントロールセンターの各ページ間を移動するためのタブを表示します。 “menuIndent” クラスはメニューの行の両端にある 2 つのセルで使われます。 “menuSpacer” クラスはそれぞれのメニュー項目間の空白です。 “menuSelected” は現在選択されているメニュー項目を明示するクラスです。 “menuStandard” は他の選択されていないメニュー項目のためのものです。

table.menu
td.menuIndent
td.menuStandard
td.menuSelected
td.menuSpacer

(訳注:それぞれのクラスは、下記の部分をあらわします)

table.menu (メニュー全体)

td.menuIndent td.menuSpacer td.menuStandard<br>メニューの内容 td.menuSpacer td.menuSpacer td.menuIndent

フッタテーブル (Footer Table)

フッタテーブルはページの最下部にあり、マニュアルやプロジェクトのホームページのような他のWebへの リンク(「リンク」を参照)を置きます。 ここは “footer” テーブルの中の “footerBody” という単一のセルで構成されています。

table.footer
td.footerBody

見出し (Headers)

見出しはそれぞれのページで現在のセクションを明示するために使います。 それぞれのページは、それぞれのスタイルの見出しを持つことができます。

h2.configuration
h2.security
h2.advanced
h2.magnets
h2.buckets
h2.history
h2.password
h2.session

メインテーブル (Main Tables)

これらはそれぞれのページ (履歴タブ、バケツタブ、マグネットタブ) で使われる、ページの大部分を占めるテーブルです。 tr.rowEven/tr.rowOdd クラスを使うことにより、偶数行/奇数行とに分けた色付けができます。 このクラスはセル周囲の境界線や余白に影響するなど、テーブルの全般的なスタイルを決めることができます。

table.magnetsTable
table.bucketsTable
table.historyTable

レイアウト (Layout)

以下のクラスはコントロールセンターのさまざまな部分を含むいろいろな要素の、位置や配置を操作するためのものです。 “settingsTable” はメインテーブルが使われないすべてのページ (設定タブ、セキュリティタブ、詳細設定タブ) で使われる、ページの大部分を占めるテーブルであり、”settingsPanel” は “settingsTable” の中の個々の セルに使われます。 いくつかの div タグが、位置の調整が必要なテキストによる説明やフォームを囲みます。 “historyWidgetsTop/Bottom” と “historyNavigatorTop/Bottom” クラスは「履歴」ページの要素の位置を決めます。(訳注:historyWidgetsTop/Bottom は現在使われていないようです) “lookupResultsTable” は「バケツ」ページ下部の「検査」領域のテーブルです。 “advancedAlphabet” と “advancedWords” 「詳細設定」の「無視する単語」の見出しとデータです。

table.settingsTable
td.settingsPanel
div.securityPassWidget
div.securityExplanation
div.securityAuthWidgets
div.advancedWidgets
div.magnetsNewWidget
div.bucketsMaintenanceWidget
div.bucketsLookupWidget
table.historyWidgetsTop
table.historyWidgetsBottom
td.historyNavigatorTop
td.historyNavigatorBottom
table.lookupResultsTable
th.advancedAlphabet
td.advancedWords

メッセージ表示 (Message Viewing)

「履歴」ページからメッセージを開くときにこれらのクラスが使われます。 “openMessageTable” はメッセージを囲むテーブル全体のクラスです。(ただし、右側の統計情報を除く) “openMessageBody” はメッセージ自体を囲むセルに使われ、”openMessageCloser” はメッセージの上下の「閉じる」リンクのあるセルに使われます。

リンク (Links)

ページにあるそれぞれのリンクは、スタイルを特化するためにそれぞれのクラスを持ちます。 “shutdownLink” はヘッダ部にあり、”bottomLink” クラスはフッタ部のすべてのリンクに使われます。 “downloadLogLink” は「設定」ページの「現在のログファイル」リンクに使われます。 “menuLink” クラスはメニュータブにあるリンクに使われます。 “messageLink” クラスは「履歴」テーブルにある「件名」欄のリンクに使われます。このリンクは、メッセージ全体を見るためのものです。 “wordListLink” クラスは「バケツ」タブのコーパスの詳細ページにあるそれぞれの単語の確率を表示するためのリンクに使われます。 “colorChooserLink” は、色選択表に全般的なリンクのスタイルが影響してしまう場合に、色選択表の背景色を オフにする手段を提供します。(訳注:colorChooserLink は現在使われていないようです)

a.shutdownLink
a.bottomLink
a.downloadLogLink
a.menuLink
a.messageLink
a.wordListLink
a.colorChooserLink

ボタン (Buttons)

ボタン・クラスはスキンの中でボタンの外観をカスタマイズするために使われます。 “toggleOn” と “toggleOff” は設定をオン/オフ(または yes/no を選択)するボタンのためのものです。 “reclassifyButton”、 “deleteButton” および “undoButton” は「履歴」ページのそれぞれの動作(「再分類」「やり直し」ボタン)と 「マグネット」ページでマグネットを削除するためのものです。 “submit” クラスはほかのボタン全部に対するものです。 “removeButton” クラス (「履歴」タブの履歴を削除するためのボタンに使われます) は任意で、”submit” クラスの後で定義するべきでしょう。なぜなら、これらのボタンは両方のクラスに 属すからです(訳注:removeButton クラスのボタンは、すべて submit クラスに属すので、submit クラスのスタイルだけを定義すれば、これらのボタンのスタイルも指定されます。removeButton クラスを定義することにより、submit クラスとは違うスタイルに設定することができるということです)。

input.submit
input.toggleOn
input.toggleOff
input.deleteButton
input.undoButton
input.reclassifyButton
input.removeButton

ラベル (Labels)

ラベル・クラスは第一にフォーム要素のラベル付けに使われます。テキストや選択入力項目には label タグが、 ボタンのラベリングには span タグが使われます。 このクラスはページの大部分を占めるテーブルの見出しでも使われます。 たとえば、履歴テーブルではテーブル見出しと項目での並び替えをするためのリンクに適用されます。 “historyLabelSort” は、現在の並びの基準となっている項目のクラスです。

(label, span).configurationLabel
(label, span).securityLabel
(label).advancedLabel
(th, label).magnetsLabel
(th, label).bucketsLabel
(th, label, span, a).historyLabel
(em).historyLabelSort
(label).passwordLabel

フォーム (Forms)

フォームに使われるクラスは、ボタンのスタイルをページ単位にカスタマイズするためのものです。 マグネットページには削除ボタンだけしかありませんが、他のページにはトグルスイッチ(反転スイッチ)として使われるものもあります。 それぞれの項目に対応する span タグは、それぞれの設定についてスイッチの現在の状態を示すテキストのスタイルを決めるラベルのためのものです。(訳注:例えば、span.bucketsWidgetStateOn クラスは、バケツタブのなんらかの設定が “On” であるという状態をあらわすテキストに使われます) 最後に、「履歴」ページでの checkbox はスタイルを変更したいとき、あるいは変更する必要があるときには、(input.checkbox クラスを使用して) 設定することができます。

form.bucketsSwitch
span.bucketsWidgetStateOn
span.bucketsWidgetStateOff
form.magnetsDelete
form.configSwitch
span.configWidgetStateOn
span.configWidgetStateOff
form.securitySwitch
span.securityWidgetStateOn
span.securityWidgetStateOff
input.checkbox

行の色付け (Line Coloring)

これらのクラスは、メインテーブルの奇数行/偶数行の行のスタイルを決めます。 同様に、「履歴」ページで現在ひらかれているメッセージがあれば、それに適用されます (訳注:メッセージが再分類された場合に、そのメッセージの下の行に tr.rowHighlighted が使われることをあらわしているのだと思われます)。 RowBoundary は「履歴」ページのセッション区切り (POP3 セッション毎に履歴を分割する横線) で使用されますが、このクラスを使用するかどうかは任意です。

tr.rowEven
tr.rowOdd
tr.rowBoundary
tr.rowHighlighted

グラフィックス (Graphics)

これらのクラスは、コントロールセンターのグラフの見た目に影響します。 “graphFont” はグラフの下に置かれる (「100%」という) 凡例テキストを囲む span タグで使われます。

table.barChart
span.graphFont

UI メッセージ (UI Messages)

error と help クラスは、UI が表示するメッセージのタイプにより異なったスタイルを使うことを可能にしています。

div.error01
div.error02
div.helpMessage

その他 (Other)

bucketLetter クラスは、「バケツ詳細」ページの文字のスタイルを決めます。

a.bucketLetter
span.bucketLetterSelected

削除された項目 (Removed)

下記のスタイルは POPFile 0.22 の ユーザーインターフェースの要素としては、使われませんし、 もはやあなたのスキンで必要ともされません。

table.colorChooserTable
img.colorChooserImg
ID: table#accuracyChart

td.accuracy0to49
td.accuracy50to93
td.accuracy94to100
img.lineImg

補足 (Addendums)

上記のクラスに加えすべてのテキストとドロップダウン選択入力の要素はユニークな(重複しない) ID を持ちます。 (ただし、メッセージの再分類に使われるものは除きます。これらは特定のラベルを持っています。) これらは個別にスタイリングされないと考えられるので、ここにはリスト化されていません。 必要ならソースファイルを参照して調べてください。

原文

開発者向けコーナー

POPFile ドキュメンテーションプロジェクト

 
jp/skinning.txt · Last modified: 2008/02/08 19:49 (external edit)

Should you find anything in the documentation that is incomplete, unclear, outdated or just plain wrong, please let us know and leave a note in the Documentation Forum.

Recent changes RSS feed Donate Driven by DokuWiki
The content of this wiki is protected by the GNU Fee Documentation License