DokuWiki.biz

オープンソースのウィキソフトウェア「DokuWiki」の設定、テンプレートカスタマイズ、プラグイン開発などのメモ書き。

ユーザ用ツール

サイト用ツール


template:css

DokuWikiのCSS(スタイルシート)カスタマイズ

このページでは、DokuWikiのCSS(スタイルシート)の仕組みを解説して、カスタマイズする方法を紹介する。

DokuWikiには、DokuWiki本体やテンプレートなどのスタイルを直接編集することなく、ユーザーがスタイルを追加することができる仕組みがある。この仕組みを利用すれば、デザインのカスタマイズは比較的容易である。

DokuWikiのCSSの仕組み

DokuWiki本体のCSS(ベーススタイル)はlib/stylesディレクトリ内にあり、DokuWiki本体としては最低限のスタイルしか記述されていない。そのため、スタイルの多くはテンプレートで定義されたものと、インストール済みのプラグインで定義されたものが反映されることになる。そのテンプレートやプラグインなどのCSSは、ディスパッチャーのlib/exe/css.phpによって集約される。これは、tpl_metaheaders()関数によって呼び出されるので、テンプレートのheadタグ内には以下のように必ず記述されている。

<?php tpl_metaheaders() ?>

ロードされるCSSの順序は、以下の通りである。CSSは、同じプロパティに異なる値が指定されてスタイルが競合する場合、後から読み込まれたスタイルが優先されてプロパティの値が上書きされるので、優先されるスタイルは下から順となる。

  1. ベーススタイル:lib/styles/*.css
  2. プラグインスタイル:lib/plugins/<プラグイン名>/*.css
  3. テンプレートスタイル:lib/tpl/<テンプレート名>/style.iniで定義
  4. ユーザースタイル:conf/user*.css

CSSをカスタマイズしてスタイルを追加したい場合は、基本的にユーザースタイル(conf/user*.css)に追加することになる。

スタイルシートのモード

DokuWikiには、4種類1)のスタイルシートの表示モードがあり、スタイルが適用される場面を変更することができる。特に場面で切り替える必要がなければ、allを指定すればよい。

  • screen:ブラウザ上での表示時に適用
  • print:印刷ページ表示時に適用
  • all:全ての表示モードで適用
  • feed:フィード表示時に適用

このモードは、後述のテンプレートで使用するCSSファイルを定義するstyle.ini内で、CSSファイルロード時に指定する。プラグインで使用するCSSについては、ファイル名をscreen.cssのように適用するモード名にする。

テンプレートスタイル

style.iniファイル

DokuWikiのテンプレートのCSSは、テンプレートディレクトリ直下にあるstyle.iniによってロードされるファイルが定義されている。

また、style.iniを使用してテンプレートのCSSを編集することなく、管理画面から色や幅などのスタイルを変更することができる。デフォルトのDokuWikiテンプレートの場合、管理メニューのテンプレートのスタイル設定を開けば、文字色・背景色・画面幅などを変更できる。変更を行った場合、conf/tpl/<テンプレート名>/style.iniにユーザー設定ファイルとして保存され、DokuWikiのアップデート等で上書きされない仕組みになっている。

CSSファイルとLESSファイル

DokuWikiは、通常のスタイルシートのCSSファイル(.css)とCSSにコンパイルする動的なスタイルシートのLESSファイル(.less)にも対応している。

LESSファイルを使用すると、LESS変数を使用できるので、style.iniで設定されている画面幅などの設定値を使用することができる。LESS変数の使い方は、設定値の項目名に対して@ini_を前につけて__を削除するので、__tablet_width__の場合は@ini_tablet_widthとなる。このLESS変数を使用すれば、設定値を使用してレスポンシブデザインのメディアクエリーなどを以下のように記述できる。

/* タブレット */
@media only screen and (max-width: @ini_tablet_width) {
}
/* スマートフォン */
@media only screen and (max-width: @ini_phone_width) {
}

ユーザースタイル

DokuWikiは、テンプレートのCSSを直接編集することなく、ユーザーがスタイルを追加することができる。conf/ディレクトリに、適用させるモードによってファイル名を以下のようにして保存する。こちらもstyle.iniと同様、DokuWikiのアップデート等で上書きされない仕組みになっている。

CSS 概要
conf/userstyle.css
conf/userstyle.less
ブラウザ上での表示時に適用
conf/userprint.css
conf/userprint.less
印刷ページ表示時に適用
conf/userall.css
conf/userall.less
全ての表示モードで適用
conf/userfeed.css
conf/userfeed.less
フィード表示時に適用

参考ページ

1)
実際は5種類で、rtl(右から左へ記述する言語を使用時に適用)もあるが、非推奨のため除外。
template/css.txt · 最終更新: 2018/08/31 13:18:01 by admin