DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


サイドバー

この翻訳は元のページよりも更新日が古く、内容が古い可能性があります。 変更点を参照して下さい。
このページの翻訳?:

DokuWiki について知る

開発

法人利用

我々のコミュニティ


FacebookTwitterや他のソーシャル・ネットワークからフォローしてください。

ja:devel:css

以前のリビジョンの文書です


CSS スタイルシート

DokuWiki の見栄えのほとんどは CSS スタイルシートを通じて制御することができます。DokuWiki はそれ自身では最小限のスタイルしか定義しません。CSS 定義の残りは、使用されているテンプレートプラグインに由来します。

すべての CSS ファイルは、lib/exe/css.php にある単一のディスパッチャを通じて取得されます。これは、キャッシュ、パターン置換、最適化についても扱います。スタイルシートなどのロードは、tpl_metaheaders() 関数を経由して行われるので、あなたのテンプレート内に入れ忘れないようにしてください。

DokuWiki スタイルシート

DokuWiki はスタイルシートを次の4箇所からこの順序でロードします(RTL スタイルシートは各ステップの最後に付加されます):

1. ベーススタイルシート

これらのスタイルシートは /lib/styles に配置されています。これらは、エラーメッセージの見た目のような基本的なスタイルを定義し、また、コンテンツを表示させない .no クラスのような便利なスタイルを定義します。

2. プラグインスタイル

プラグインはそれら自身のスタイルを以下のファイルを用いて定義することができます:

CSS ファイル いつ使用されるか
style.css すべての表示モードで適用
print.css ページが印刷されるときに適用
rtl.css 右から左に書くインターフェース言語が用いられるときに適用

任意のテンプレートの色使いにうまく適合させるため、プラグインの作者は保証色彩プレースホルダーを用いるべきです。

:!: プラグインからのスタイルシートはプラグインが用いられない場合であってもロードされます (ただし、プラグインが無効化されている場合はロードされません)。

:!: ここで定義されるスタイルは、競合に気をつけるべきです。ですので、プラグインを書く際は注意してください。可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。

3. テンプレートスタイル

テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。DokuWiki は、そのディレクトリにある style.ini を読み、このファイルで参照されているすべての CSS をロードします。ロードは、現在のモードに従って行われます。

さらに、この style.ini ファイルでは、パターン置換が定義されます。

4. ユーザスタイル

Wiki の管理者は、conf/ 内に以下の CSS ファイルを作成することによって、使用されているテンプレートとは独立に付加的なスタイルを定義することができます。

CSS ファイル いつ使用されるか
conf/userstyle.css すべての表示モードで適用
conf/printstyle.css ページが印刷されるときに適用
conf/rtlstyle.css 右から左に書くインターフェース言語が用いられるときに適用

これは、テンプレートやプラグインが後日更新された場合にも問題を起こすことなく、それらのスタイルの小さな部分を上書きするのに便利です。

スタイルシートのモード

DokuWiki はデフォルトでは 3 タイプのスタイルシートのモードを認識します:

  1. screen これがデフォルトのモードで、 Web ブラウザにページを表示する際に使われます
  2. print ここでの定義が印刷用のページで使用されます
  3. rtl 右から左に書く言語が使用されている際に rtl ファイル内の定義が追加ロードされます

ID の使用

スタイルを割り当てるためにテンプレート内でカスタム ID を使用する際、それが既存の ID と競合しないよう気をつけてください。特に、セクションの見出しに自動的に割り当てられる ID に気をつけてください。これを確実に行う最も簡単な方法は、ID に二つの連続アンダースコア (__) を使用することです。セクションの ID は常に有効なページ名なので、連続アンダースコアが含まれることは決してないからです。

Style.ini

style.iniini ファイルです。これにはセクションが二つあります:

[stylesheets]

この部分は、どの CSS ファイルがロードされるかを定義します。各行は次のように定義されます:

cssfile.css = mode

cssfile.css はあなたのファイル名で、mode は適用するモードです。

パターン置換

[replacements]

DokuWiki の CSS ディスパッチャーは、ロードされるスタイルシート内のプレースホルダーを、テンプレートの style.ini 内の [replacements] セクションで設定された値に置換することができます。これは、一度色使いを定義した後、すべてのファイルでそれらの値を再利用するのに特に便利です。後から色を調整するのは、単純に ini ファイルを変更するだけで済みます。

保証色彩プレースホルダー

以下のプレースホルダーはプラグインに用いても安全なもののみです。

プレースホルダー変数 意味 デフォルトテンプレートでの値 2006-08-05 以前の名前
__background__ 主たる背景色 #fff __white__
__background_alt__ 代替の背景色 #dee7ec __medium__
__background_neu__ 中間的な背景色 #f5f5f5 __darkgray__
__border__ ボーダー色 #8cacbb __dark__
__text__ 主たるテキスト色 #000 __black__
__text_alt__ 代替のテキスト色 #638c9c __darker__
__text_neu__ 中間的なテキスト色 #666 __lightgray__

2006-08-05 以降、意味的により正確になるように、これらの名称が変更されました。パターン置換を利用しているこれ以前のプラグインとテンプレートはこれらの変数をまだ用いていないかもしれませんが、用いるようにしてください。

デフォルトテンプレートで使用されるその他の色彩プレースホルダー

これらの付加的なプレースホルダーはデフォルトテンプレートで使用されます。他のテンプレートでも使用するかもしれませんが、その義務はありません。

プレースホルダー変数 意味 デフォルトテンプレートでの値 2006-08-05 以前の名前
__background_other__ その他の背景色 #f7f9fa __lighter__
__text_other__ その他のテキスト色 #ccc __mediumgray__
(なし。削除) - #eef3f8 __light__
__extern__ リンク色 #436976 (変更なし)
__existing__ 存在する内部リンクのリンク色 #090 (変更なし)
__missing__ 存在しない内部リンクのリンク色 #f30 (変更なし)
__highlight__ 検索断片のハイライト色 #ff9 (変更なし)
ja/devel/css.1227502946.txt.gz · 最終更新: 2014-05-07 15:56 (外部編集)