• このエントリーをはてなブックマークに追加

MediaWikiの直下にある、LocalSettings.phpを開き追記します。

場所は以下のコメントの上であればどこでも良さそう・・・?
# End of automatically generated settings.

LocalSettings.php

## Responsive
$wgVectorResponsive = true;

これだけでレスポンシブWebデザインに対応できます。・・・といっても編集用ナビゲーション(#mw-head)などのPCメニューが残ったままなので、消す必要があります(人によるのでしょうが・・・)。
これを消すためには、/skins/Vector/responsive.less内に

CSS

div#mw-head{
display:none;/* display:noneを記述して消しちゃうだけ・・・ */
}

と記述します。
max-width: 768pxの場合は#mw-headが消えてくれます。

さらに変な隙間があるのですよね。div#mw-page-base、div#mw-head-base。
PCには必要な隙間なのですが、消したい。

CSS

div#mw-page-base{
display:none;
}
div#mw-head-base{
display:none;
}

とまあ、必要のないものを消します。他にも必要のないものがあれば、このresponsive.lessに追記して消します。

さてさて、さらにロゴがなくて、さみしい。
なので、VectorTemplate.phpにHTMLを記述します。場所は、div#mw-head-baseの下にでも。

VectorTemplate.php

<div id="mobile-logo" class="noprint"><a href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ); ?>"><img src="/skins/common/images/logo.png" alt="☆ロゴ☆" /></a></div>

上記のような具合に。内容はなんでもいいですあなたのお好きに。

ざーっとまとめると、

  1. ナビゲーションがあるので消したいところ
  2. ロゴがないのでスマホなどの幅の狭いデバイスには表示させたい

というお話でした。

MediaWikiの文献が少ない。自己流なので、他に良さげなお作法があるのかもしれませんが、他に良い方法が見つからないうちはこんな感じで。

レスポンシブWebデザインとは?

Webブラウザや端末の幅に合わせてCSSで即時にレイアウトを適正化するデザインや方法、またはそのCSSの記述。
目的としては、出力されたHTMLを元に幅によってレイアウトをモバイル・PCやその他の解像度のWebブラウザでも適切に閲覧できるようにレイアウトを変化させること。

システムによっては、サーバー側でHTML・CSSをそれぞれの端末(デバイス)ごとに振り分けるケースもあるが、こちらは処理された結果のHTMLを元にしてCSS(JavaScriptも使うことも)のみでレイアウトを調整する。なので、組み方によっては無駄なHTMLソースコードが出力されるケースがある。