WARNING
本記事は大変に古いので、以下の記事内容は過去記録のためのみに残してあります。 いつかまたTemplateを自前で頑張る時が来たら大幅に更新します。
DokuWikiにおいて、表示されるデザインを決めるのはテンプレートである。
Dokuwikiには、様々なテンプレートがっ準備されており、非常に便利になっている。最近では、標準のテンプレートにもサイドバーが入っていたりと、機能的にも標準でよい場合が多い。
しかし筆者は、長い間Arcticを利用してきたため、「いまさら」標準テンプレートに移行することは「面倒」である。 (いや、今のデザインは「ダサい」感じもあるので、少しはいじりたいと思わないでもないが、その時間も取れない)
というわけで、arcticテンプレートを修正して使うためのメモを記載しておく。
筆者が使い始めた当時のDokuwikiに標準で添付されていたテンプレートは、まだ初期でもあったため、あまり機能が無かった。 そのため、その頃DokuWikiサイトにあったほとんどのテンプレートを試した結果として、結局以下の3つに絞り込んだ。
当時(2009年初頭)の筆者の要件として、(今考えれば愚かな要求だが)
というものがあったため、サイドバーのカスタマイズがかなり細かく可能にみえたarcticを利用する事にしたのが、Arcticとの付き合いの始まりである。 なお、テンプレートは、DokuWiki Templateに大量に掲載されている。
some/where/dokuwiki-dir/lib/tpl
にコピーする。arcticは非常に色々な調整が出来るテンプレートなので、個人の好みに合うように調整することが非常に簡単だった。
基本的な事は、全てtemplate:arcticに書かれている。
しかし、日本語ではないので、ちょっとだけ敷居が高そうとも思うので、少しだけ設定を書いておく。
テンプレートは、頻度は低いがそれでも更新されることがある。その更新のたびに「デザイン変更」作業を行うのは明らかに馬鹿げている。 従って、そのような作業を行わなくてすむように以下の方法を利用する。
Dokuwikiにおいて、多くの(恐らく全ての)テンプレートは、以下の順でテンプレートのデザインを読み出すと考えられる。
従って、テンプレートが更新されても全ての設定を「維持できる」/「最小限の設定変更ですませることが出来る」ようにするには、
に書けばよい事がわかる。
※注:但し、筆者はarcticでしか試していないので、各人で各人が利用しているテンプレートで試すこと。
個別デザイン変更に関しては、例えば、design.cssの変更を行いたいなら、design.local.cssというファイルを準備して、必要な設定を投入することにする。これによって、何を変更したかが判りやすくなることが期待できる。
ページデザイン(ページスタイル)の変更には、直接ファイルを変更する必要がある。
some/where/dokuwiki-dir/lib/tpl/arctic/style.ini
を修正すれば、色やページサイズの調整が可能である。
ちなみに本サイトでは、以下のような設定を行った。この設定は、基本的に背景をグリーンにし、文字が見やすいように調整をしただけとなっている。
; ; Dokuwiki Arctic style customization. ; [stylesheets] design.local.css = screen print.local.css = print arctic_design.local.css = screen userstyle.css = screen [replacements] __wiki_width__ = "98%" __body_margin__ = "1em" __font_size__ = "0.9em" __pagename_color__ = "#ffe0ff" __logo_color__ = "#ffe0ff" __headline_color__ = "#000" __body_background__ = "#c0ffc0" __header_background__ = "#002f00" __footer_background__ = "#002f00" __form_border__ = "#008000" __text__ = "#333" __background__ = "#efe" __text_alt__ = "#906090" __background_alt__ = "#e0d0e0" __text_neu__ = "#666" __background_neu__ = "#f0f0f0" __border__ = "#ccc" __text_other__ = "#ccc" __background_other__ = "#f0fff0" __extern__ = "#2828a0" __existing__ = "#5050e0" __missing__ = "#e05050" __visited__ = "#285060"
画面表示の調整だが、一般に英語はjustifyすることが望ましい場合が多い。 しかし、日本語ページが中心である場合、justifyされると見た目が汚くなってしまうことが多い。 そこで、以下のファイル中のjustify宣言があるブロックを抜きだし、justifyを取り除いて宣言する。
サイドバーのサイズを画面全体の横幅に対して15%に設定した。 これは、好みの問題もあるのであまりお勧めはしないが、やり方だけは書いておく。
div.dokuwiki div.left_sidebar { float: left; width: 15%; /* Original: 22% */ padding: 0.2em 0.5em 0 0; border-right: 1px solid __border__; } div.dokuwiki div.right_sidebar { float: right; width: 15%; /* Original: 22% */ padding: 0.2em 0em 0 0.5em; border-left: 1px solid __border__; } div.dokuwiki div.left_page, div.dokuwiki div.right_page { /* text-align: justify; */ /* これはjustifyを削除したため。 */ float: left; width: 80% !important; /* Original: 72% */ width: 78%; /* Original: 69% */ padding: 2%; } div.dokuwiki div.center_page { /* text-align: justify; */ float: left; width: 64% !important; /* Original: 49% */ width: 62%; /* Original: 47% */ padding: 2% !important; padding: 1%; }
これで、サイドバーのサイズは15%に変更される。
sidebarの大きさを変えたので、検索フィールドが不格好になってしまった。
sidebarから検索フィールドを切り離せばいいのかもしれないが、それよりはサイズを変更する方が簡単だったので、そちらで対応。
some/where/dokuwiki-dir/conf/userstyle.css
を作成div.dokuwiki #qsearch__in { width: 65%; }
幾つかのページで、Codeブロックに取り込んでいるcodeが長く、画面を大幅に食ってしまった。 これが非常に気に入らなかったので、Designを修正して対応する。
div.dokuwiki pre.code
をコピーし、以下の2行を加える max-height: 25em; overflow: auto;
div.dokuwiki pre.file
をコピーし、以下の2行を加える max-height: 25em; overflow: auto;
sidebarは役割によって作成される名前空間が異なる。
これだけ判っていれば恐らく大丈夫だと思われる。
本ページの昔のサイドバーは以下のような設定をしていた。(現在は、このような設定はしていない)
====== Site Contents Index ====== ~~NOCACHE~~ * [[:Diary|日記]] * [[:diaryidx|日記の目次]] {{indexmenu>os#1|js#bj-tango.png navbar nocookie id#random tsort msort}} {{indexmenu>serverapp#1|js#bj-tango.png navbar nocookie id#random tsort msort}} * [[:Tips|Tips]] * [[http://www.dokuwiki.org/%3Aja%3Asyntax|Wiki構文]] {{indexmenu>wiki|js#bj-tango.png navbar nocookie id#random tsort msort}}