MediaWikiの見出しをサンセリフ・フォントに戻す

最終更新:2016/09/06

最近のトピックではないんだけど、2014年4月頃にリリースされたMediaWiki 1.22.5以降からCSSが見直され、記事見出し(見出しレベル1)と見出しレベル2のフォントがサンセリフ・フォント(ゴシック体)からセリフ・フォント(明朝体)に一律に変更された。

MediaWiki公式サイトではTypography refreshという記事でどういった経緯や理由でフォントを変更することになったのか説明されている。元に戻す方策を示してくれているわけではないので、無理して全部読む必要はまったくなく、要は「とにかく見出しをセリフ・フォントに変えたよ」ということを伝える記事に過ぎない。

ラテン文字を主に使用する英語圏の人にとってはある程度説得力のある話なんだろうけど、日本語のように全角文字と半角文字を混ぜて書くことがある言語では問題になることがある。また、元は海外製のInternet Explorerをはじめとするブラウザに潜在的な不具合があって、日本語では通常使われない文字が表示されたりする問題などがウィキペディア日本語版のプロジェクトで指摘された。ラテン文字を主流とする他言語の人から見たら判別不能な『漢字』という特殊な文字を使っている日本語と韓国語(朝鮮語)と中国語がごっちゃになってしまっていることが原因のようだ。詳しいことは当該議事録を参照(長文)。

色々な修正方法が検討されたんだけど、もっともシンプルな解決方法は次のようなCSSをMediaWiki:Vector.cssに追加する。Vectorスキンを標準の外装にしていない場合は、更に上位のMediaWiki:Common.cssか対応するスキンのCSSを適宜変更する。

div#content h1, div#content h2, div#content #firstHeading {
 font-family: sans-serif;
}
html, body {
 font-family: sans-serif;
}
div#content .mw-editsection {
 font-family: sans-serif;
}

ひとまず、これで標準記事名前空間と付随する名前空間の見出しはサンセリフ・フォントに戻せる。

ただ、この方法でもログインや個人設定のページといった特別ページの一部はセリフ・フォントのままになってしまう。ブラウザの要素解析機能を使ってセレクタやクラスを丹念に調べれば対処可能なんだろうけど、もっとも重要な標準記事名前空間の記事名に問題が出なければよしとして、これ以上深入りはしないことにした。


[2016年3月12日追記]

深入りしないことには決めたが、やはり気にはなるので、要素解析をやってみた。標準記事名前空間(付随する名前空間含む)と個人設定の特別ページの見出しのクラスとセレクタは同じだった。

div#content.mw-body h1#firstHeading.firstHeading

同じならばMediaWiki:Vector.cssに記述したCSSが反映されてもよさそうなものだけど、個人設定の特別ページのレベル1(h1)とレベル2(h2)の見出しに最後に適用されているスタイルは次のようなもの。これが問題になっている。

.mw-body h1,.mw-body h2 {
	font-family:"Linux Libertine",Georgia,Times,serif;
	line-height:1.3;
	margin-bottom:0.25em;
	padding:0
}

確かに、これなら見出しがセリフ・フォントになってしまう。実際、ブラウザの要素解析機能を使って font-family のプロパティを一時的に解除してみるとサンセリフ・フォントに戻る。

標準記事名前空間の見出しでも同様のスタイルが設定されているんだけど、MediaWiki:Vector.cssにサンセリフ・フォントに戻すプロパティを設定してあるので、それが読み込まれて強制的に上書きされている。ところが、個人設定の特別ページではユーザー設定のMediaWiki:Vector.cssをStyleSheetとして読み込んでいるコードが見当たらない。どのスタイルシートを呼び出して適用するか決定しているのはMediaWiki本体だから、いくらMediaWiki:Vector.cssを変更しても画面の表示に反映されないのは当たり前ということになる。

どうも、問題のスタイルはどこかのファイルにまとめて記述してあるものではなく、MediaWikiがその都度「load.php」という名前のスクリプトに引数を渡してリソース・ローダー(ResourceLoader)と呼ばれるモジュールが自動的に生成するものらしい。PHPやJavaScriptのソースコードもひととおり検索してみたけど、該当する箇所が見つからなかった。リソース・ローダーの説明もざっと読んでみたけど、確かに凄い機能を持ったモジュールなのはわかる。凄いけど、高度すぎてまったく手に負える感じがしない。仮に、どこかを改変して問題を解決できたとしても、MediaWikiがアップグレードされた時に上書きされてしまうので書き戻す手間が発生するし、最悪、誤動作して本当に手に負えなくなってしまう可能性さえある。よっぽどのことがない限りMediaWikiの本体には手を着けたくないので、個人設定の特別ページの見出しについては諦める他にない。

ウェブフォント

最終更新:2017/01/13

ものすごく今更な感じもするけど、ウェブフォントを導入してみた。

Google Fontsを利用すると非常に簡単に導入できる。

GoogleFont

実装するには、CSSを記述したファイルに次の一行を追加するだけ。今回は、AudiowideとOxygenというフォントを実装してみることにした。

@import url(http://fonts.googleapis.com/css?family=Audiowide|Oxygen);

有名なサイトのようだけど、Font Squirrelというところで、使用フリーライセンス(パブリック・ドメインと異なり、著作権は放棄していないのでライセンス条項をよく読もう)のフォントが大量に得られる。選ぶのが大変なくらい大量にある。本当に(笑)。

FontSquirrel

ただ、こちらの場合は、TrueTypeやOpenTypeのフォントファイルをダウンロードした後にウェブブラウザに合わせてEOT形式(IE9より前のIE用)やWOFF形式(比較的最近のブラウザ用)への変換をする必要がある。それらをアップロードしたうえで、CSSへブラウザごとの記述が必要になるので、Google Fontsに使いたいフォントがない場合は本気で取り組む必要がある。


[追記]
たまたま、IE8を使える機会があったので表示を試してみたら、Google FontsはIE8以前のブラウザには対応していないようだった。ウェブフォントに対応していないというよりも、CSS3に対応していない。IEを最新にアップデートしていない人は、FireFoxやChromeやSafariを使っていると思うので、それほど問題ではないんだけど。

ちなみに、WordPressではWP Google Fontsというプラグインをインストールすれば、簡単に導入できる。