dokuwikiのテンプレート「bootstrap3」を使うときの修正ポイント

最近ふとウィキ作ってみよ！と思い立ち一番有名らしいdokuwikiをインストールして遊んでました。

dokuwikiにはテンプレートというデザインテーマがあってボタン一つでウィキのデザインをガラッと変えられるんです。ここらへんの感覚はワードプレスやbloggerとまったくおんなじです。

んでdokuwikiのテンプレートの中でも一番きれいだったbootstrap3っていうのを使ってたんですが、レスポンシブをうたっているのにところどころレスポンシブになっていない。日本語だから…？

まあ…てことでdokuwikiでbootstrap3テンプレートを使うときの修正ポイントをまとめておきました。

1. スマホ時にヘッダーが崩れる
2. 長いURLがはみ出す
3. cssが反映されない
4. セマンティックデータは無効に
5. まとめ

スマホ時にヘッダーが崩れる

まずはbootstrap3の一番気になるヘッダーの崩れを直していきます。

これはcssで対応するので以下のdokuwikiでオリジナルcssを有効にする方法を見てもらってまずは自分のcssファイルを設置しましょう。

dokuwikiにオリジナルcssを追加する方法

さて、cssが設置できたらその中に以下のコードをコピペ。

#dokuwiki__header .dw-container{
	margin-left: 0 !important;
	margin-right:0 !important;
}
#dw__navbar #dw__tagline{
	white-space: normal;
}
.navbar-brand{
	height: auto;
	margin-top: -40px;
}
#dw__logo.dw-logo-tagline{
	margin-bottom: 1em;
}

@media (min-width: 768px){
	.navbar-brand{
		margin-top: 0;
		height: 50px;
	}
	#dw__logo.dw-logo-tagline{
		margin-bottom: 0;
	}
}

とりあえずこれでbootstrap3テンプレート使用時、スマホでヘッダーが崩れる問題は修正できます。…あくまで見れるレベルにするだけでもっといじりようはあると思うので、時間がある方はさらに修正してみてください。

長いURLがはみ出す

これはdokuwikiの仕様なのかそれともbootstrap3だけの問題なのかわかりませんが、URLなどの長い文字が回り込まずにボディの壁をぶち破っちゃう問題の解決方法です。

以下のcssをさっきのオリジナルcssにコピペ。

body{
	word-break: break-all;
}

cssが反映されない

dokuwikiのせいではなく特にアンドロイド端末の場合、cssを本体内にキャッシュするのでサーバー側でcssを変えてもスマホに反映されません。

スマホ側の閲覧履歴を消すことでcssに入れた修正がきちんと反映されるようになります。

セマンティックデータは無効に

これはbootstrap3だけの問題なのかdokuwiki自体の問題なのかいまいちわかりませんが「サイト設定」のところに「セマンティックデータを有効にする」という項目があります。

セマンティックデータを有効にすると構造化データ（Schema.org）がHTMLに追加されてGoogleなどの検索エンジンにより明確に自分のサイトの内容を伝えられるようになるんです。

ただbootstrap3でここを有効にするとエラーがすごい出る。ということで無効にしておきましょう。

まとめ

ここではdokuwikiのテンプレート「bootstrap3」のレスポンシブ不具合の修正方法をまとめて紹介しました。

dokuwiki使ってみるとめちゃくちゃ簡単だしなによりデータベースを使わないっていうのが魅力的です。これ使えば例えばエックスサーバーとかスターサーバーとかでもらえる無料サーバーで十分本格的なCMSが持てちゃいます。

別にdokuwikiはwikiを作るだけじゃなくって普通にブログ用としても使えるので、手軽にブログを持つ際の魅力的な選択肢と思います。