はじめに
MDwikiはmarkdownで書かれたテキストをお手軽にwebページ化することができる、お手軽なCMSである。
基本的にMdwikiは必要最小限のコンテンツを最小限の手間で公開にもっていくためのインスタントなシステムである。内輪向けのウェブサーバで、随時更新されていくマニュアルやレポートを共有するといった使い方に向いている。Markdownを加筆修正するだけなので、日々の更新作業にかかる手間と時間を大いに軽減できて便利だ。半面、複雑に凝ったサイト作成には向かない。
とはいえ、ある程度使い込んでくると、ページ全体の色調とかフォントとか、少しは自分好みに変更したいと思うのが人情だろう。そこで、この記事ではMdwikiページの「見栄え」を自由にカスタマイズするためのクイックハックを提示する。
mdwiki-debug.htmlの改造
MDwikiのパッケージにはいくつかのhtmlファイルが含まれている。普通はmdwiki.htmlを公開用に利用するだろうが、ここでは中身がminifyされていないmdwiki-debug.htmlを弄ってみる。
theme
MDwikiでは、レイアウトを「theme」を選択することで決定する。themeとはMDWiki用に調整されたCSSファイルである。公式サイトには13種類のthemeファイルが用意されている。このthemeを弄ることでMDwiki下の各ページの見栄えを変えることができる。
そこでレイアウト変更の手順は次のようになる。
- 適当なテーマ用ファイルをダウンロードしてくる。
- ダウンロードしてきたtheme内のCSSの記述を適当に改変する。
- 出来たCSSファイルを適当な名前に変え、適当な場所にアップロードして、インターネット上で自由にアクセスできるようにする。
- mdwiki-debug.htmlに加筆して、上記のオリジナルthemeをthemeとして認識できるようにする。
mdwiki-debug.htmlを見ると、次のようにこのthemeを列挙している箇所がある。
var themes = [
{ name: 'bootstrap', url: 'netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' },
{ name: 'amelia', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css' },
{ name: 'cerulean', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/cerulean/bootstrap.min.css' },
{ name: 'cosmo', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/cosmo/bootstrap.min.css' },
{ name: 'cyborg', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/cyborg/bootstrap.min.css' },
{ name: 'flatly', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/flatly/bootstrap.min.css' },
{ name: 'journal', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/journal/bootstrap.min.css' },
{ name: 'readable', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/readable/bootstrap.min.css' },
{ name: 'simplex', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/simplex/bootstrap.min.css' },
{ name: 'slate', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/slate/bootstrap.min.css' },
{ name: 'spacelab', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/spacelab/bootstrap.min.css' },
{ name: 'united', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css' },
{ name: 'yeti', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.2/yeti/bootstrap.min.css' }
このコードを頼りに、適当なCSSファイルをダウンロードしてくる。例えばwgetを利用するなら下のような感じになる。
ここではmytheme.cssという名前で保存することにしよう。
wget -O mytheme.css http://netdna.bootstrapcdn.com/bootswatch/3.0.2/yeti/bootstrap.min.css
cssの書き換え
このmytheme.cssをエディタで開いて編集する。
次のような記述をファイルの末尾に書き加え、後述するとおりに各ファイルを更新した後、ブラウザで当該ページを再読み込みしてみよう。該当箇所の色が変わっていることが確認できるだろう。
/* メニューバー全体 */
/* .navbar-inverse .navbar-brand{
color: yellow;
} */
/* メニューバー中のサイトタイトル */
navbar-header a.navbar-brand{
color: magenta;
}
.navbar-inverse .navbar-nav > li > a { /* メニューバー中のプルダウンメニュー */
color: orange;
}
/* 本文タイトル */
.page-header h1{
color: green;
}
/* 本文 */
#md-content{
background-color: #666;
}
JavaScriptの書き換え
前掲したthemesの定義部分を書き換えて、このmytheme.cssをthemeとして認識させる。
{name: 'mytheme', url: 'example.com/mdwiki/mytheme.css'}
書法は、こんな感じになる。URLについては、先頭のhttps:は除き、しかしサイト名は省略なく書かなくてはならないようだ。これをvar themes = [のところに追記する。
navigation.mdの書き換え
どのthemeを使うかはnavigation.mdの中で設定することになっている。これを上記の変更を反映するように書き換える必要がある。
具体的にはgimmickパラメータを適切に設定する。
[gimmick:Theme (inverse: true)](mytheme)
おわりに
このように、オリジナルCSSファイルをMDwikiの各ページに適用させることができる。ブラウザの検証ツールを活用して作りこんでいけば、相当に印象を変えることができるだろう。