black}Windows・Linuxを中心に書き留めるIT技術系の備忘録。2020.02.12この記事は約7分で読めます。DokuWikiのCSS(スタイルシート)カスタマイズ方法について解説します。DokuWikiには、DokuWiki本体やテンプレートなどのCSSを直接編集することなく、ユーザーがスタイルを追加することができる仕組みがあります。この仕組みを利用すれば、デザインのカスタマイズは比較的簡単に行うことができます。今回のバージョンは以下の通りです。最後にDokuWikiのCSSの仕組みDokuWiki本体のCSS(ベーススタイル)は、lib/stylesのディレクトリ内にあり、DokuWiki本体としては最低限のスタイルしか記述されていません。そのため、スタイルの多くはテンプレートで定義されたものと、インストール済みのプラグインで定義されたものが反映されることになります。そのテンプレートやプラグインなどのCSSは、ディスパッチャーのlib/exe/css.phpによって集約されます。これは、tpl_metaheaders関数によって呼び出されるので、テンプレートのheadタグ内には以下のように必ず記述されています。?>CSSは以下のようにまとめて外部ファイルとして読み込まれます。href="/lib/exe/css.php?t=dokuwiki&...">ロードされるCSSの順序は、以下の通りです。conf/user*.cssCSSは同じプロパティに異なる値が指定されてスタイルが競合する場合、後から読み込まれたスタイルが優先されてプロパティの値が上書きされるので、優先されるスタイルは下から順となります。CSSをカスタマイズしてスタイルを追加したい場合は、基本的にユーザースタイル(conf/user*.css)に追加することになります。スタイルシートの表示モードDokuWikiには、4種類のスタイルシートの表示モードがあり、スタイルが適用される場面を変更することができます。場面で切り替える必要がなければ、allを指定すればOKです。フィード表示時に適用この表示モードは、後述のテンプレートで使用するCSSファイルを定義するstyle.ini内で、CSSファイルロード時に指定します。プラグインで使用するCSSについては、ファイル名をscreen.cssのように適用するモード名にします。表示モードは実際は5種類で、rtl(右から左へ記述する言語を使用時に適用)もありますが、非推奨のため除外しています。テンプレートスタイルの仕組みテンプレートスタイルのCSSとstyle.iniの仕組みについて。style.iniファイルDokuWikiのテンプレートのCSSは、テンプレートディレクトリ直下にあるstyle.iniによってロードされるファイルが定義されています。printまた、style.iniを使用してテンプレートのCSSを編集することなく、管理画面から色や幅などのスタイルを変更することができます。変更を行った場合、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変数を使用すれば、設定値を使用してレスポンシブデザインのメディアクエリーなどを以下のように記述できます。{}ユーザースタイルの追加DokuWikiは、テンプレートのCSSを直接編集することなく、ユーザースタイルを追加することができます。その方法は、confディレクトリに適用させるモードによってファイル名を以下のように変更して、ユーザースタイルシートを保存するだけです。フィード表示時に適用こちらもstyle.iniと同様、DokuWikiのアップデート等で上書きされない仕組みになっています。最後に今回は、DokuWikiのCSS(スタイルシート)カスタマイズ方法について解説しました。DokuWikiは、本体・テンプレートのCSSを直接編集することなくユーザーがスタイルを追加することができるので、デザインのカスタマイズは比較的簡単です。DokuWikiのおすすめテンプレートとカスタマイズ方法については、こちらの記事にまとめています。DokuWikiの人気でおすすめのテンプレートとカスタマイズ方法についてまとめました。itlogs.net2020.02.14DokuWikiの使い方については、こちらの記事にまとめています。DokuWiki(ドクウィキ)の使い方をまとめました。同じPHPベースのMediaWiki・PukiWikiとの比較もしました。itlogs.net2020.02.01DokuWikiCSS\よかったらシェアしてね/Twitter0Facebook0はてブ1Pocket0LINEコピーえふめん大阪在住、30代。業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。最新情報をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。ホームDokuWikiえふめん大阪在住、30代。業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。プロフィールプライバシーポリシーお問い合わせサイトマップ検索タイトルとURLをコピーしました。