DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


サイドバー

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

DokuWiki について知る

開発

法人利用

我々のコミュニティ


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

ja:devel:css

CSS スタイルシート

DokuWiki の見栄えのほとんどは CSS スタイルシートで制御されます。 DokuWiki 本体は最小限のスタイル定義しかカバーしていません。 CSS 定義の残りは、使用されているテンプレートプラグインに由来します。

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

スタイルシートのモード

5種類のスタイルシートのモードがあります:

  • screen:Web ブラウザにページを表示する際に使われます
  • print:ここでの定義が印刷用のページで使用されます
  • all:すべての表示モードで適用されます
  • rtl:右から左に書く言語が使用されている際に rtl ファイル内の定義が追加ロードされます :!: 非推奨RTL Styles を参照
  • feed:フィードの表示時に適用されます

RTL styles

Release 2012-10-13 “Adora Belle” 以降、RTL mode は非推奨で、もはや使用すべきではありません。 右から左に記述する言語のスタイルを記述する新しい・より良い方法は、他のモードのスタイル内の各 CSS セレクタの前に [dir=rtl] を使用することです。 例えば:

.someClass {
    float: left;
    background-color: __background__;
}
[dir=rtl] .someClass {
    float: right;
}

DokuWiki スタイルシート

DokuWiki は4つのソースからスタイルシートをロードします。 ロードする順序は以下のとおりです:

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

これらのスタイルシートは /lib/styles に配置されています。 これらは、エラーメッセージの見た目のような基本的なスタイルを定義します。

2. プラグインスタイル

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

モード CSS ファイル
screen style.css 又は screen.css
print print.css
all all.css
rtl rtl.css :!: 非推奨・RTL Styles を参照
feed feed.css

スタイルファイルは、拡張子 .less 付きスタイルファイルも対応しています。 しかし、*.css*.less の両方の中で LESS 書式を使用できます。

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

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

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

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

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

  • wiki 管理者による style.ini の変更は conf/tpl/<tpl>/style.iniに格納する必要があります。[ja:plugin:styling|スタイル設定プラグイン]]を使って変更した場合、このファイルを自動的に作成します。
  • テンプレート開発も参照してください。

4. ユーザスタイル

wiki 管理者は、wikiの設定フォルダ(デフォルト設定の場合 conf/)に以下の CSS ファイルを作成して、使用しているテンプレートとは独立に付加的なスタイルを定義することができます:

CSS ファイル 適用時
conf/userstyle.css
conf/userstyle.less
ブラウザ画面で表示する際に適用
conf/userprint.css
conf/userprint.less
ページが印刷される際に適用
conf/userrtl.css
Angua 以降非奨励
右から左に書く言語が使用されている際に適用 :!: 非推奨・RTL Styles を参照
conf/userfeed.css
conf/userfeed.less
フィードを表示する際に適用
conf/userall.css
conf/userall.less
すべての表示モードで適用

(注:2015-08-10 “Detritus” 以降、.less が使用可能です。)

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

ID の使用

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

プラグインの中では <pluginname>__<id> を使用します。 例: 'searchindexplugin__buttonfield'

画像とインポートスタイルの使用

DokuWiki の CSS ディスパッチャは、独自のスタイルシート内の画像(url(…))とインポートスタイルシート(@import …)への相対リンクをテンプレートのルートディレクトリに対して相対処理することで自動的に確定します。 

例:プラグインで、style.css から images サブディレクトリの画像を使用したい場合、簡単に以下の CSS を記述できます:

.someclass {
   background-image: url(images/icon.gif);
}

DokuWiki は自動的に URL を変更するので、画像はテンプレートディレクトリと相対化されたプラグインディレクトリにあります。

ブラウザ(Internet Explorer)固有の CSS

Browser (Internet Explorer) Specific CSS を参照して下さい。

ja/devel/css.txt · 最終更新: 2016-07-24 05:36 by sawachan