DokuWikiのCSS（スタイルシート）カスタマイズ方法を解説

PHPベースのオープンソースのウィキソフトウェア DokuWikiのCSS（スタイルシート）カスタマイズ方法について解説します。

DokuWikiには、DokuWiki本体やテンプレートなどのCSSを直接編集することなく、ユーザーがスタイルを追加することができる仕組みがあります。

この仕組みを利用すれば、デザインのカスタマイズは比較的簡単に行うことができます。

なお、今回のバージョンは以下の通りです。

DokuWikiのCSSの仕組み

DokuWiki本体のCSS（ベーススタイル）は、

lib/styles

のディレクトリ内にあり、DokuWiki本体としては最低限のスタイルしか記述されていません。

そのため、スタイルの多くはテンプレートで定義されたものと、インストール済みのプラグインで定義されたものが反映されることになります。

そのテンプレートやプラグインなどのCSSは、ディスパッチャーの

lib/exe/css.php

によって集約されます。

これは、tpl_metaheaders関数によって呼び出されるので、テンプレートのheadタグ内には以下のように必ず記述されています。

<?php tpl_metaheaders() ?>

CSSは以下のようにまとめて外部ファイルとして読み込まれます。

<link rel="stylesheet" type="text/css" href="/lib/exe/css.php?t=dokuwiki&…">

ロードされるCSSの順序は、以下の通りです。

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

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

スタイルシートの表示モード

DokuWikiには、4種類のスタイルシートの表示モードがあり、スタイルが適用される場面を変更することができます。

特に場面で切り替える必要がなければ、allを指定すればOKです。

この表示モードは、後述のテンプレートで使用するCSSファイルを定義するstyle.ini内で、CSSファイルロード時に指定します。

プラグインで使用するCSSについては、ファイル名をscreen.cssのように適用するモード名にします。

テンプレートスタイルの仕組み

テンプレートスタイルのCSSとstyle.iniの仕組みについて。

style.iniファイル

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

[stylesheets]
css/basic.less            = screen
css/_imgdetail.css        = screen
css/_media_popup.css      = screen
css/_media_fullscreen.css = screen
css/_fileuploader.css     = screen
css/_tabs.css             = screen
css/_links.css            = screen
css/_toc.css              = screen
css/_footnotes.css        = screen
css/_search.less          = screen
css/_recent.css           = screen
css/_diff.css             = screen
css/_edit.css             = screen
css/_modal.css            = screen
css/_forms.css            = screen
css/_admin.less           = screen
css/structure.less        = screen
css/design.less           = screen
css/usertools.less        = screen
css/pagetools.less        = screen
css/content.less          = screen

css/mobile.less           = all
css/print.css             = print

また、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

//LESS変数
@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のアップデート等で上書きされない仕組みになっています。

最後に

今回は、DokuWikiのCSS（スタイルシート）カスタマイズ方法について解説しました。

DokuWikiは、本体・テンプレートのCSSを直接編集することなくユーザーがスタイルを追加することができるので、デザインのカスタマイズは比較的簡単です。

DokuWikiのおすすめテンプレートとカスタマイズ方法については、こちらの記事にまとめています。

DokuWikiのおすすめテンプレートとカスタマイズ方法まとめ

PHPベースのオープンソースのウィキソフトウェア DokuWikiの人気でおすすめのテンプレートとカスタマイズ方法についてまとめました。

itlogs.net

DokuWikiの使い方については、こちらの記事にまとめています。

DokuWikiの使い方まとめ PHPのオープンソースウィキの比較

PHPベースのオープンソースのウィキソフトウェア DokuWiki（ドクウィキ）の使い方をまとめました。また、同じPHPベースのMediaWiki・PukiWikiとの比較もしました。

itlogs.net