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

DokuWikiDokuWiki
この記事は約7分で読めます。

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

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

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

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

  • DokuWiki 2018-04-22a “Greebo”

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の順序は、以下の通りです。

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

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

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

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

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

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

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

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

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

表示モードは実際は5種類で、rtl(右から左へ記述する言語を使用時に適用)もありますが、非推奨のため除外しています。

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

テンプレートスタイルの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ディレクトリに適用させるモードによってファイル名を以下のように変更して、ユーザースタイルシートを保存するだけです。

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
フィード表示時に適用

こちらもstyle.iniと同様、DokuWikiのアップデート等で上書きされない仕組みになっています。

最後に

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

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

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

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

DokuWiki
\よかったらシェアしてね/
えふめん

大阪在住、30代。
業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。

えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました