MediaWiki での CSS カスタマイズ

MediaWiki の デフォルトの文字の大きさがちょっと小さすぎるような気がしたので修正した。

MediaWikiのデフォルトのデザイン (Vectorスキン) のカスタマイズはCSSファイルを編集するのではなく MediaWiki の MediaWiki:Common.css とMediaWiki:Vector.css のページに追加のCSS記述を行う。

MediaWiki:Common.css と MediaWiki:Vector.css の使い分けははっきりしないが、スキンに依存するような修正は MediaWiki:Vector.css で行うのがよいのだろう。

Firefox の開発ツールを使うと、指定した要素にどんなCSSがどんなルールで適用されているのかがわかるのでそれを見ながら作業する。

MediaWiki:Common.css ではこんな感じ。デフォルトで h1, h2 要素が明朝体になってるのでゴシックに変更。

.mw-body h1, .mw-body h2 { font-family: sans-serif; }
.mw-body-content { font-size: inherit; }

MediaWiki:Vecor.css では左サイドバーの幅をちょっと大きめにして、本文フォントサイズをちょっと大きめに。

div#mw-panel { width: 14em; }
div#footer, #mw-head-base, div#content { margin-left: 14em; }
#left-navigation { margin-left: 14em; }

div#mw-panel div.portal h3 { font-size: inherit; }
div#mw-panel div.portal div.body ul li { font-size: 95%; }

で、これだけだとログインページヘは反映されない。安全のため、ログインページなどはデフォルトでカスタマイズCSSが反映されないようになってるとのこと。

変なCSSを注入されるおそれがない場合には LocalSettings.php で $wgAllowSiteCSSOnRestrictedPages を true に設定すると反映される。

$wgAllowSiteCSSOnRestrictedPages = true;