iPad/iPhoneでMediaWikiのロゴが英語版ウィキペディアになってしまう問題

最終更新:2016/09/06

ある時から、自分のウィキをiPadやiPhoneで表示しようとすると、MediaWikiのロゴがオリジナルのものから英語版ウィキペディアのものに変わってしまって、不思議に思っていた。PCで表示する分にはどのブラウザでも正常に表示される。しかも、iOSに標準でインストールされているSafariだけではなく、Chromeでも同じ問題が起こる。PC版のブラウザと違って要素解析ができないので、しばらく原因がわからず問題を放置していた。ところが、MediaWikiのサポートデスクの該当スレッドを注意深く読んでみると、最後のほうに#p-logoというidセレクタをもう一度確認してみよう、という一文があった。

当初は「iOSのバージョンが古いんじゃない?」とか「単純にキャッシュの問題じゃないの?」といった回答が多かったので、そういうものなんだろうかと思って最後まで読んでなかった。

原因は、ウィキペディア風の外観にするためのMediaWiki:Common.cssをコピーして移設したことにあった。最後のほうに、モバイル端末向けの表示用に次のようなCSSが記述されている。確かに、英語版ウィキペディアのロゴ・ファイルをダイレクトで呼び出しているので、iPadやiPhoneでロゴが変わってしまうのは当然だった。

/* [[MediaZilla:35337]] */
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
        #p-logo a {
                background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/204px-Wikipedia-logo-v2-en.svg.png") !important;
                background-size: 136px auto;
        }
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        #p-logo a {
                background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/270px-Wikipedia-logo-v2-en.svg.png") !important;
                background-size: 135px auto;
        }
}

ウィキペディアのロゴはウィキメディア財団が著作権を持っているので、まったく無名のウィキだけど、このまま放置しておくのは賢明ではない。これを、次のように書き換える。

/* [[MediaZilla:35337]] */
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
        #p-logo a {
                background-image: url("//[domain]/[wiki-directory]/images/b/bc/Wiki.png") !important;
                background-size: 136px auto;
        }
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        #p-logo a {
                background-image: url("//[domain]/[wiki-directory]/images/b/bc/Wiki.png") !important;
                background-size: 135px auto;
        }
}

~/images/b/bc/ というディレクトリは、ウィキにファイルをアップロードするとMediaWikiが自動的に生成するもので、画像などの格納に使うもの。各自の環境によって異なるので、目的の画像を自分のウィキで表示させた上で右クリックしてURLを確認する。管理者権限を有するユーザーが削除しない限り、新しいバージョンのファイルをアップロードしても過去のバージョンは残るため、URLが一意に定まることを利用する。

このように指定しておけば、ロゴを変更したくなった時は、FTP転送ではなく、ウィキからHTTP経由でアップロードしてデータベースを書き換えてやることで簡単に対応できるし、将来MediaWikiがバージョンアップした際にアップグレードした場合でもロゴのファイルを上書きされなくて済む。MediaWiki:Common.cssはそもそもデータベース上に存在するものなので、MediaWikiのソフトウェアのアップグレードには直接影響を受けない。