Differences
This shows you the differences between two versions of the page.
| — |
jp:skinning [2008/02/08 19:49] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== CSS スキンのマニュアル ====== | ||
| + | |||
| + | POPFile 0.22 からのスキンは、CSS スキンと (ユーザの好きなように UI を) 変更することができる HTML [[:jp:Template | テンプレート]] の二つの部分から | ||
| + | 構成されるようになりました。テンプレートは任意であり、なくてもかまいません。<br> | ||
| + | それらは 'skins' ディレクトリの中のスキン名のディレクトリに格納されます。<br> | ||
| + | スキン名はそのディレクトリ名によって決まり、すべての CSS ファイルは style.css という名前で固定されています。 | ||
| + | スキンで使われる画像はすべてスキン名のディレクトリに置いてください。 | ||
| + | |||
| + | ===== クラスの一覧 ===== | ||
| + | |||
| + | 以下は POPFile インタフェースのスキン作成で使われるクラスの一覧です。 | ||
| + | それぞれのクラスは適用される要素に応じてまとめられています。 | ||
| + | どういうものを指定できるかという詳細は、W3Cオンラインリファレンス http://www.w3.org/TR/REC-CSS1 と http://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.shellTopLeft||td.shellTopCenter||td.shellTopRight||<- tr.shellTop (列全体) || | ||
| + | ||td.shellLeft|| td.naked<br>ヘッダ・メインテーブルの内容 ||td.shellRight|||| | ||
| + | ||td.shellBottomLeft||td.shellBottomCenter||td.shellBottomRight||<- tr.shellBottom (列全体) || | ||
| + | |||
| + | <code> | ||
| + | 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 | ||
| + | </code> | ||
| + | |||
| + | ===== ヘッダテーブル (Header Table) ===== | ||
| + | |||
| + | 見出しテーブルはプログラム名とシャットダウンへのリンクを含むページ上部の囲まれた領域です。 | ||
| + | td.head クラスは一番左のセルで、「POPFile コントロールセンター」というテキストを表示します。 | ||
| + | td.headShutdown クラスは右にあり、シャットダウンへのリンクを表示します。(「リンク」を参照)<code> | ||
| + | table.head | ||
| + | td.head | ||
| + | td.headShutdown | ||
| + | </code> | ||
| + | |||
| + | ===== スペーサー (Spacer) ===== | ||
| + | |||
| + | スペーサー・テーブルセルはヘッダテーブルとメニューを分離する役割を持ちます。 | ||
| + | あなたが空けたいと思う空白の大きさに合った em 値 (たとえば : 0.8em) を設定してください。<code> | ||
| + | td.logo2menuSpace | ||
| + | </code> | ||
| + | |||
| + | （訳注：スペーサーは現在使われていないようです） | ||
| + | |||
| + | ===== メニュー (Menu) ===== | ||
| + | |||
| + | メニューテーブルはコントロールセンターの各ページ間を移動するためのタブを表示します。 | ||
| + | "menuIndent" クラスはメニューの行の両端にある 2 つのセルで使われます。 | ||
| + | "menuSpacer" クラスはそれぞれのメニュー項目間の空白です。 | ||
| + | "menuSelected" は現在選択されているメニュー項目を明示するクラスです。 | ||
| + | "menuStandard" は他の選択されていないメニュー項目のためのものです。<code> | ||
| + | table.menu | ||
| + | td.menuIndent | ||
| + | td.menuStandard | ||
| + | td.menuSelected | ||
| + | td.menuSpacer | ||
| + | </code> | ||
| + | |||
| + | （訳注：それぞれのクラスは、下記の部分をあらわします） | ||
| + | |||
| + | table.menu (メニュー全体) | ||
| + | || td.menuIndent || td.menuSpacer || td.menuStandard<br>メニューの内容 || td.menuSpacer || ... || td.menuSpacer || td.menuIndent || | ||
| + | |||
| + | ===== フッタテーブル (Footer Table) ===== | ||
| + | |||
| + | フッタテーブルはページの最下部にあり、マニュアルやプロジェクトのホームページのような他のWebへの | ||
| + | リンク(「リンク」を参照)を置きます。 | ||
| + | ここは "footer" テーブルの中の "footerBody" という単一のセルで構成されています。<code> | ||
| + | table.footer | ||
| + | td.footerBody | ||
| + | </code> | ||
| + | |||
| + | ===== 見出し (Headers) ===== | ||
| + | |||
| + | 見出しはそれぞれのページで現在のセクションを明示するために使います。 | ||
| + | それぞれのページは、それぞれのスタイルの見出しを持つことができます。<code> | ||
| + | h2.configuration | ||
| + | h2.security | ||
| + | h2.advanced | ||
| + | h2.magnets | ||
| + | h2.buckets | ||
| + | h2.history | ||
| + | h2.password | ||
| + | h2.session | ||
| + | </code> | ||
| + | |||
| + | ===== メインテーブル (Main Tables) ===== | ||
| + | |||
| + | これらはそれぞれのページ (履歴タブ、バケツタブ、マグネットタブ) で使われる、ページの大部分を占めるテーブルです。 | ||
| + | tr.rowEven/tr.rowOdd クラスを使うことにより、偶数行/奇数行とに分けた色付けができます。 | ||
| + | このクラスはセル周囲の境界線や余白に影響するなど、テーブルの全般的なスタイルを決めることができます。<code> | ||
| + | table.magnetsTable | ||
| + | table.bucketsTable | ||
| + | table.historyTable | ||
| + | </code> | ||
| + | |||
| + | ===== レイアウト (Layout) ===== | ||
| + | |||
| + | 以下のクラスはコントロールセンターのさまざまな部分を含むいろいろな要素の、位置や配置を操作するためのものです。 | ||
| + | "settingsTable" はメインテーブルが使われないすべてのページ (設定タブ、セキュリティタブ、詳細設定タブ) で使われる、ページの大部分を占めるテーブルであり、"settingsPanel" は "settingsTable" の中の個々の | ||
| + | セルに使われます。 | ||
| + | いくつかの div タグが、位置の調整が必要なテキストによる説明やフォームを囲みます。 | ||
| + | "historyWidgetsTop/Bottom" と "historyNavigatorTop/Bottom" クラスは「履歴」ページの要素の位置を決めます。（訳注：historyWidgetsTop/Bottom は現在使われていないようです） | ||
| + | "lookupResultsTable" は「バケツ」ページ下部の「検査」領域のテーブルです。 | ||
| + | "advancedAlphabet" と "advancedWords" 「詳細設定」の「無視する単語」の見出しとデータです。<code> | ||
| + | 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 | ||
| + | </code> | ||
| + | |||
| + | ===== メッセージ表示 (Message Viewing) ===== | ||
| + | |||
| + | 「履歴」ページからメッセージを開くときにこれらのクラスが使われます。 | ||
| + | "openMessageTable" はメッセージを囲むテーブル全体のクラスです。(ただし、右側の統計情報を除く) | ||
| + | "openMessageBody" はメッセージ自体を囲むセルに使われ、"openMessageCloser" | ||
| + | はメッセージの上下の「閉じる」リンクのあるセルに使われます。 | ||
| + | |||
| + | ===== リンク (Links) ===== | ||
| + | |||
| + | ページにあるそれぞれのリンクは、スタイルを特化するためにそれぞれのクラスを持ちます。 | ||
| + | "shutdownLink" はヘッダ部にあり、"bottomLink" クラスはフッタ部のすべてのリンクに使われます。 | ||
| + | "downloadLogLink" は「設定」ページの「現在のログファイル」リンクに使われます。 | ||
| + | "menuLink" クラスはメニュータブにあるリンクに使われます。 | ||
| + | "messageLink" クラスは「履歴」テーブルにある「件名」欄のリンクに使われます。このリンクは、メッセージ全体を見るためのものです。 | ||
| + | "wordListLink" クラスは「バケツ」タブのコーパスの詳細ページにあるそれぞれの単語の確率を表示するためのリンクに使われます。 | ||
| + | "colorChooserLink" は、色選択表に全般的なリンクのスタイルが影響してしまう場合に、色選択表の背景色を | ||
| + | オフにする手段を提供します。（訳注：colorChooserLink は現在使われていないようです）<code> | ||
| + | a.shutdownLink | ||
| + | a.bottomLink | ||
| + | a.downloadLogLink | ||
| + | a.menuLink | ||
| + | a.messageLink | ||
| + | a.wordListLink | ||
| + | a.colorChooserLink | ||
| + | </code> | ||
| + | |||
| + | ===== ボタン (Buttons) ===== | ||
| + | |||
| + | ボタン・クラスはスキンの中でボタンの外観をカスタマイズするために使われます。 | ||
| + | "toggleOn" と "toggleOff" は設定をオン/オフ(または yes/no を選択)するボタンのためのものです。 | ||
| + | "reclassifyButton"、 "deleteButton" および "undoButton" は「履歴」ページのそれぞれの動作（「再分類」「やり直し」ボタン）と | ||
| + | 「マグネット」ページでマグネットを削除するためのものです。 | ||
| + | "submit" クラスはほかのボタン全部に対するものです。 | ||
| + | "removeButton" クラス (「履歴」タブの履歴を削除するためのボタンに使われます) は任意で、"submit" クラスの後で定義するべきでしょう。なぜなら、これらのボタンは両方のクラスに | ||
| + | 属すからです（訳注：removeButton クラスのボタンは、すべて submit クラスに属すので、submit クラスのスタイルだけを定義すれば、これらのボタンのスタイルも指定されます。removeButton クラスを定義することにより、submit クラスとは違うスタイルに設定することができるということです）。<code> | ||
| + | input.submit | ||
| + | input.toggleOn | ||
| + | input.toggleOff | ||
| + | input.deleteButton | ||
| + | input.undoButton | ||
| + | input.reclassifyButton | ||
| + | input.removeButton | ||
| + | </code> | ||
| + | |||
| + | ===== ラベル (Labels) ===== | ||
| + | |||
| + | ラベル・クラスは第一にフォーム要素のラベル付けに使われます。テキストや選択入力項目には label タグが、 | ||
| + | ボタンのラベリングには span タグが使われます。 | ||
| + | このクラスはページの大部分を占めるテーブルの見出しでも使われます。 | ||
| + | たとえば、履歴テーブルではテーブル見出しと項目での並び替えをするためのリンクに適用されます。 | ||
| + | "historyLabelSort" は、現在の並びの基準となっている項目のクラスです。<code> | ||
| + | (label, span).configurationLabel | ||
| + | (label, span).securityLabel | ||
| + | (label).advancedLabel | ||
| + | (th, label).magnetsLabel | ||
| + | (th, label).bucketsLabel | ||
| + | (th, label, span, a).historyLabel | ||
| + | (em).historyLabelSort | ||
| + | (label).passwordLabel | ||
| + | </code> | ||
| + | |||
| + | ===== フォーム (Forms) ===== | ||
| + | |||
| + | フォームに使われるクラスは、ボタンのスタイルをページ単位にカスタマイズするためのものです。 | ||
| + | マグネットページには削除ボタンだけしかありませんが、他のページにはトグルスイッチ(反転スイッチ)として使われるものもあります。 | ||
| + | それぞれの項目に対応する span タグは、それぞれの設定についてスイッチの現在の状態を示すテキストのスタイルを決めるラベルのためのものです。（訳注：例えば、span.bucketsWidgetStateOn クラスは、バケツタブのなんらかの設定が "On" であるという状態をあらわすテキストに使われます） | ||
| + | 最後に、「履歴」ページでの checkbox はスタイルを変更したいとき、あるいは変更する必要があるときには、(input.checkbox クラスを使用して) 設定することができます。 | ||
| + | <code> | ||
| + | form.bucketsSwitch | ||
| + | span.bucketsWidgetStateOn | ||
| + | span.bucketsWidgetStateOff | ||
| + | form.magnetsDelete | ||
| + | form.configSwitch | ||
| + | span.configWidgetStateOn | ||
| + | span.configWidgetStateOff | ||
| + | form.securitySwitch | ||
| + | span.securityWidgetStateOn | ||
| + | span.securityWidgetStateOff | ||
| + | input.checkbox | ||
| + | </code> | ||
| + | |||
| + | ===== 行の色付け (Line Coloring) ===== | ||
| + | |||
| + | これらのクラスは、メインテーブルの奇数行／偶数行の行のスタイルを決めます。 | ||
| + | 同様に、「履歴」ページで現在ひらかれているメッセージがあれば、それに適用されます (訳注：メッセージが再分類された場合に、そのメッセージの下の行に tr.rowHighlighted が使われることをあらわしているのだと思われます)。 | ||
| + | RowBoundary は「履歴」ページのセッション区切り (POP3 セッション毎に履歴を分割する横線) で使用されますが、このクラスを使用するかどうかは任意です。 | ||
| + | <code> | ||
| + | tr.rowEven | ||
| + | tr.rowOdd | ||
| + | tr.rowBoundary | ||
| + | tr.rowHighlighted | ||
| + | </code> | ||
| + | |||
| + | ===== グラフィックス (Graphics) ===== | ||
| + | |||
| + | これらのクラスは、コントロールセンターのグラフの見た目に影響します。 | ||
| + | "graphFont" はグラフの下に置かれる (「100%」という) 凡例テキストを囲む span タグで使われます。 | ||
| + | <code> | ||
| + | table.barChart | ||
| + | span.graphFont | ||
| + | </code> | ||
| + | |||
| + | ===== UI メッセージ (UI Messages) ===== | ||
| + | |||
| + | error と help クラスは、UI が表示するメッセージのタイプにより異なったスタイルを使うことを可能にしています。 | ||
| + | <code> | ||
| + | div.error01 | ||
| + | div.error02 | ||
| + | div.helpMessage | ||
| + | </code> | ||
| + | |||
| + | ===== その他 (Other) ===== | ||
| + | |||
| + | bucketLetter クラスは、「バケツ詳細」ページの文字のスタイルを決めます。 | ||
| + | <code> | ||
| + | a.bucketLetter | ||
| + | span.bucketLetterSelected | ||
| + | </code> | ||
| + | |||
| + | ===== 削除された項目 (Removed) ===== | ||
| + | |||
| + | 下記のスタイルは POPFile 0.22 の ユーザーインターフェースの要素としては、使われませんし、 | ||
| + | もはやあなたのスキンで必要ともされません。 | ||
| + | <code> | ||
| + | table.colorChooserTable | ||
| + | img.colorChooserImg | ||
| + | ID: table#accuracyChart | ||
| + | |||
| + | td.accuracy0to49 | ||
| + | td.accuracy50to93 | ||
| + | td.accuracy94to100 | ||
| + | img.lineImg | ||
| + | </code> | ||
| + | |||
| + | ===== 補足 (Addendums) ===== | ||
| + | |||
| + | 上記のクラスに加えすべてのテキストとドロップダウン選択入力の要素はユニークな(重複しない) ID を持ちます。 | ||
| + | (ただし、メッセージの再分類に使われるものは除きます。これらは特定のラベルを持っています。) | ||
| + | これらは個別にスタイリングされないと考えられるので、ここにはリスト化されていません。 | ||
| + | 必要ならソースファイルを参照して調べてください。 | ||
| + | |||
| + | |||
| + | [[:Skinning | 原文]] | ||
| + | |||
| + | [[:jp:DevelopersCorner | 開発者向けコーナー]] | ||
| + | |||
| + | [[: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.
