This shows you the differences between two versions of the page.
— | jp:skinning [2008/02/08 19:49] (current) – created - external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== CSS スキンのマニュアル ====== | ||
+ | |||
+ | POPFile 0.22 からのスキンは、CSS スキンと (ユーザの好きなように UI を) 変更することができる HTML [[: | ||
+ | 構成されるようになりました。テンプレートは任意であり、なくてもかまいません。< | ||
+ | それらは ' | ||
+ | スキン名はそのディレクトリ名によって決まり、すべての CSS ファイルは style.css という名前で固定されています。 | ||
+ | スキンで使われる画像はすべてスキン名のディレクトリに置いてください。 | ||
+ | |||
+ | ===== クラスの一覧 ===== | ||
+ | |||
+ | 以下は POPFile インタフェースのスキン作成で使われるクラスの一覧です。 | ||
+ | それぞれのクラスは適用される要素に応じてまとめられています。 | ||
+ | どういうものを指定できるかという詳細は、W3Cオンラインリファレンス http:// | ||
+ | 現時点では、POPFileで使えるスキンは CSS1 クラスのものに限定されていることに注意してください。 | ||
+ | しかし、これは厳重な規則ではなく、一部に CSS2 を使ったスキンがあるかもしれません。 | ||
+ | 多くの最近のブラウザーできちんと表示できる範囲なら、ブラウザー独自のクラスや CSS2 クラスを使うことも可能です。 | ||
+ | |||
+ | ===== シェル (Shells : 外枠) ===== | ||
+ | シェルはページ最上部のヘッダと、メインテーブル(メニューは含まない)の外枠のスタイルについてのレイアウト構造です。 | ||
+ | " | ||
+ | それぞれのシェルは二つの row (top (上)、bottom (下)) クラス、left (左) と right (右) の TD セル、そしてそれぞれの行にある個別の | ||
+ | セル(left (左)、center (中央)、right (右))に分かれます。 | ||
+ | さらに内容を保持するテーブルの中心に " | ||
+ | これらのテーブルは色や境界線や画像で好きなように飾ることができます。 | ||
+ | |||
+ | (訳注:それぞれのクラスは、下記の部分をあらわします) | ||
+ | |||
+ | table.shell / table.shellTop (ヘッダ、メインテーブル全体) | ||
+ | ||td.shellTopLeft||td.shellTopCenter||td.shellTopRight||< | ||
+ | ||td.shellLeft|| td.naked< | ||
+ | ||td.shellBottomLeft||td.shellBottomCenter||td.shellBottomRight||< | ||
+ | |||
+ | < | ||
+ | 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) ===== | ||
+ | |||
+ | メニューテーブルはコントロールセンターの各ページ間を移動するためのタブを表示します。 | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | table.menu | ||
+ | td.menuIndent | ||
+ | td.menuStandard | ||
+ | td.menuSelected | ||
+ | td.menuSpacer | ||
+ | </ | ||
+ | |||
+ | (訳注:それぞれのクラスは、下記の部分をあらわします) | ||
+ | |||
+ | table.menu (メニュー全体) | ||
+ | || td.menuIndent || td.menuSpacer || td.menuStandard< | ||
+ | |||
+ | ===== フッタテーブル (Footer Table) ===== | ||
+ | |||
+ | フッタテーブルはページの最下部にあり、マニュアルやプロジェクトのホームページのような他のWebへの | ||
+ | リンク(「リンク」を参照)を置きます。 | ||
+ | ここは " | ||
+ | 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/ | ||
+ | このクラスはセル周囲の境界線や余白に影響するなど、テーブルの全般的なスタイルを決めることができます。< | ||
+ | table.magnetsTable | ||
+ | table.bucketsTable | ||
+ | table.historyTable | ||
+ | </ | ||
+ | |||
+ | ===== レイアウト (Layout) ===== | ||
+ | |||
+ | 以下のクラスはコントロールセンターのさまざまな部分を含むいろいろな要素の、位置や配置を操作するためのものです。 | ||
+ | " | ||
+ | セルに使われます。 | ||
+ | いくつかの div タグが、位置の調整が必要なテキストによる説明やフォームを囲みます。 | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | 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) ===== | ||
+ | |||
+ | 「履歴」ページからメッセージを開くときにこれらのクラスが使われます。 | ||
+ | " | ||
+ | " | ||
+ | はメッセージの上下の「閉じる」リンクのあるセルに使われます。 | ||
+ | |||
+ | ===== リンク (Links) ===== | ||
+ | |||
+ | ページにあるそれぞれのリンクは、スタイルを特化するためにそれぞれのクラスを持ちます。 | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | オフにする手段を提供します。(訳注:colorChooserLink は現在使われていないようです)< | ||
+ | a.shutdownLink | ||
+ | a.bottomLink | ||
+ | a.downloadLogLink | ||
+ | a.menuLink | ||
+ | a.messageLink | ||
+ | a.wordListLink | ||
+ | a.colorChooserLink | ||
+ | </ | ||
+ | |||
+ | ===== ボタン (Buttons) ===== | ||
+ | |||
+ | ボタン・クラスはスキンの中でボタンの外観をカスタマイズするために使われます。 | ||
+ | " | ||
+ | " | ||
+ | 「マグネット」ページでマグネットを削除するためのものです。 | ||
+ | " | ||
+ | " | ||
+ | 属すからです(訳注:removeButton クラスのボタンは、すべて submit クラスに属すので、submit クラスのスタイルだけを定義すれば、これらのボタンのスタイルも指定されます。removeButton クラスを定義することにより、submit クラスとは違うスタイルに設定することができるということです)。< | ||
+ | input.submit | ||
+ | input.toggleOn | ||
+ | input.toggleOff | ||
+ | input.deleteButton | ||
+ | input.undoButton | ||
+ | input.reclassifyButton | ||
+ | input.removeButton | ||
+ | </ | ||
+ | |||
+ | ===== ラベル (Labels) ===== | ||
+ | |||
+ | ラベル・クラスは第一にフォーム要素のラベル付けに使われます。テキストや選択入力項目には label タグが、 | ||
+ | ボタンのラベリングには span タグが使われます。 | ||
+ | このクラスはページの大部分を占めるテーブルの見出しでも使われます。 | ||
+ | たとえば、履歴テーブルではテーブル見出しと項目での並び替えをするためのリンクに適用されます。 | ||
+ | " | ||
+ | (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 クラスは、バケツタブのなんらかの設定が " | ||
+ | 最後に、「履歴」ページでの 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) ===== | ||
+ | |||
+ | これらのクラスは、コントロールセンターのグラフの見た目に影響します。 | ||
+ | " | ||
+ | < | ||
+ | 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# | ||
+ | |||
+ | td.accuracy0to49 | ||
+ | td.accuracy50to93 | ||
+ | td.accuracy94to100 | ||
+ | img.lineImg | ||
+ | </ | ||
+ | |||
+ | ===== 補足 (Addendums) ===== | ||
+ | |||
+ | 上記のクラスに加えすべてのテキストとドロップダウン選択入力の要素はユニークな(重複しない) ID を持ちます。 | ||
+ | (ただし、メッセージの再分類に使われるものは除きます。これらは特定のラベルを持っています。) | ||
+ | これらは個別にスタイリングされないと考えられるので、ここにはリスト化されていません。 | ||
+ | 必要ならソースファイルを参照して調べてください。 | ||
+ | |||
+ | |||
+ | [[:Skinning | 原文]] | ||
+ | |||
+ | [[: | ||
+ | |||
+ | [[:jp | POPFile ドキュメンテーションプロジェクト]] | ||
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.