DokuWiki.biz

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

ユーザ用ツール

サイト用ツール


template:dokuwiki

DokuWikiデフォルトテンプレートのカスタマイズ

このページでは、DokuWikiのデフォルトテンプレートのカスタマイズを紹介する。

DokuWikiデフォルトテンプレートはシンプルだが、それゆえ少し見にくい点もある。それらをCSSを使用してカスタマイズし、調整してみる。DokuWikiのテンプレートカスタマイズのポイントも参考に。

サイト全体スタイルの変更

DokuWikiデフォルトテンプレートのベースとなるフォントに関するスタイルは、lib/tpl/dokuwiki/css/basic.less内で、以下のように記述されている。

body {
    font: normal 87.5%/1.4 Arial, sans-serif;
    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
    -webkit-text-size-adjust: 100%;
}

ブラウザのデフォルトフォントサイズが16pxなので、それに対して87.5%に縮小した14pxがフォントサイズ。また、行の高さ(line-height)は1.4となっている。

サイト全体幅とサイドバーの幅は、管理画面のテンプレートのスタイル設定でstyle.iniファイルを使用して設定できるが、デフォルトはそれぞれ75em16emとなっている。emはフォントサイズが元となるので、それぞれピクセル(px)にすると、1050px224pxのようだ。

サイドバーの幅はこのままでもいいが、サイト全体幅は最近のワイドモニターのサイズを考えると、少し狭い。モニターの解像度のシェア率は、1920px×1080px、1366px×768pxの2つが圧倒的に高いので、1366pxである程度画面幅いっぱいになるように、サイト全体幅を90em1260px)とした。

項目 デフォルト 変更後
フォントサイズ 87.5%
14px
サイト全体幅 75em
1050px
90em
1260px
サイドバー幅 16em
224px

ページ内スタイルの変更

ユーザースタイルに記載の通り、ユーザースタイルのCSSファイル(conf/userall.css)を追加して、テンプレートのスタイルを調整する。

行間の調整

まずは、行間の幅を少し広げて文章を読みやすくする。

/* ページ内段落行の高さ */
.dokuwiki .page p {line-height:1.5em;}

見出しのスタイルの調整

続いて、見出しにスタイルを設定して、セクションの区切りをわかりやすくする。

DokuWikiデフォルトテンプレートの見出し(h1h6)は、文字の大きさしか変わらないので、読みにくい。タイトルとなるh1とほとんど使用しないh5以降を除き、以下のように設定した。

/* ページ内見出し */
.dokuwiki .page h2 {border-left:3px solid #000; padding-left:5px;}
.dokuwiki .page h3 {border-bottom:3px solid #e7e7e7;}
.dokuwiki .page h4 {border-bottom:3px double #eee;}
template/dokuwiki.txt · 最終更新: 2018/09/03 10:44:32 by admin