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

製作 プログラム

最終更新日:2019/10/07

ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる

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

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

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

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

  1. スマホ時にヘッダーが崩れる
  2. 長いURLがはみ出す
  3. cssが反映されない
  4. まとめ

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

まずは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に入れた修正がきちんと反映されるようになります。

まとめ

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

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

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

【どどん!】ラムネグではただいまアプリを絶賛提供中!さあ、選べる3つの無料アプリ!あなたはどれにする?

【わたガチャ】

あなただけのガチャを作ろう♪

すたーと!

【みんガチャ】

みんなで一つのガチャを作りあげよう♪

すたーと!

【litty-リティ】

秘密のメッセージをフォロワーさんに送っちゃおう!

すたーと!