よみもの:MediaWikiサイトの外見をカスタマイズするには

	よみものページ
	この「よみもの」は、Kankitsuが作成したものです。他ユーザーの編集も歓迎いたします。

本項では、MediaWikiサイトの見た目をカスタマイズする方法について説明します。

フォントの変更[編集]

MacやiOSのヒラギノ角ゴ、AndroidのNoto Sans、WindowsのMSゴシック・メイリオ・Yu Gothic UIなど、OS標準搭載のフォントに飽きていませんか。もしくは、自身のウィキサイトの見た目を統一したいと思ったことはありませんか。

「すでにお気に入りのフォントが自身の端末に入っている」という方、朗報です。やり方は簡単。Common.css（利用者ページでもMediaWiki:Common.cssでもよい）に、フォントを指定する旨の記述を入れ込めば完了です。例として、以下にIBM Plex Sansを用いてページを表示させる記述を示します。

/* 「IBM Plex Sans JP」を使用するためのcssコード。 */
h5 I ,p, ul,ul I, ol, ol I,center,center I,span,span I,div,div I {
font-family: 'IBM Plex Sans JP', sans-serif; font-weight: 500;	
}
bold, b, mw-changeslist-title, strong {
font-family: 'IBM Plex Sans JP', sans-serif; font-weight: 700;	
}

では、「フォントをインストールすることは面倒」とか「サイトごとに見た目を変えたい」とか「ウィキサイトの管理者だけど、デザインが見る人によってバラバラなのはイヤだ」という方、安心してください。ある記述を先頭に付け加えることでフォントを変更できます。

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@500;700&display=swap');

これは、@importを用い、Google Fontsからフォントのファイルをインポートして表示させるという旨の記述です。

これらを組み合わせると、以下のようになります。

/* 「IBM Plex Sans JP」を使用するためのcssコード。 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@500;700&display=swap');
h5 I ,p, ul,ul I, ol, ol I,center,center I,span,span I,div,div I {
font-family: 'IBM Plex Sans JP', sans-serif; font-weight: 500;	
}
bold, b, mw-changeslist-title, strong {
font-family: 'IBM Plex Sans JP', sans-serif; font-weight: 700;	
}

フォントを変更したい場合は、インポート元のURLと、font-familyを変更してください。Google Fontsにあるフォントであれば、サイトから簡単にURLを取得できます。必要に応じてfont-weightでフォントのウェイトも変更できます。

ちなみにこれらを適用することで、エンペディアでもガジェットの適用なしに斜体（イタリック体）の正常な表示が可能となります。

よみもの:MediaWikiサイトの外見をカスタマイズするには

フォントの変更[編集]

ナビゲーション メニュー

検索

ナビゲーションメニュー