Manual:CSS
Cascading style sheet（CSS）はMediaWikiの外装のほとんどを設定できます。例えば、文字のサイズ、色、間隔、ロゴや背景の画像、サイトのコンテンツの表示/非表示などです。
MediaWikiの画面表示の外装（見た目）を変更したい場合、MediaWiki:Common.cssにCSSを書くことができます。
このファイルはお使いのウィキに存在するファイルであり、index.php や load.php などのファイルとは所在が異なるためサーバのディレクトリ構造を調べても見つけられませんし、初期設定ではメインページにも他のページにもリンクもしていません。
当該のページは基本的に1行のみのコメントで構成されます。
検出するにはお使いのウィキのメインページで検索窓に MediaWiki:Common.css と記入します。
表示は https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css などのアドレスを備えたファイルとなります。
（編集するには "interface administrator" の権限が必要です。）
MediaWiki:Common.css に追加されたコードがすぐに有効にならない場合は、ハードリフレッシュする必要があるかもしれません。ページの印刷の際の外装を変更するためには、WikiのMediaWiki:Print.cssにCSSを記述してください。
CSS は固有のウィキのたとえば背景色を変えるなど全体のスタイルを変更するために使ったり、インラインの CSS ならお使いのウィキの個別の文字列のみ書式変更することができます。
例えば文字を緑にしたい場合は<span style="color:green">green text</span>を指定します。
全てのテキストを大きくしたい場合、MediaWiki:Common.cssにbody { font-size: larger; }を追加してください。
モバイル版はMediaWiki:Mobile.cssを使用してください。
$wgAllowUserCss をウィキで有効にすると、個別の利用者は Special:MyPage/<外装名>.css として自分専用にカスタム化したスタイルシートを書くことができます（例えばベクター外装を使う場合ならSpecial:MyPage/vector.css。） Special:MyPage/common.cssにCSSを書いた場合、すべての外装に個人用スタイルシートを適用できます。
MediaWiki 用のカスタム外装を作成することもできます。
ヘルプ
CSSは構文・属性・値が正しくなければ正常に動作しません。 World Wide Web 協議会 （W3C）は CSS を直接、基本要件に基づいて書き上げる場合の優秀な参照先です。
- https://www.w3.org/TR/CSS21/propidx.html – CSS 2.1プロパティのインデックス '← 参考
- http://www.w3.org/TR/CSS21/indexlist.html – CSS 2.1 総索引
- http://www.w3.org/TR/CSS21/cover.html#minitoc – CSS 2.1 目次
ウィキペディアに、CSS の概要が載っています。
CSS 機能の操作説明と同時に誰でも使える参考情報を提供する場合は、MDN CSS リファレンスで「常に更新してある」 ガイドを提供、構文やさまざまな要素の基本的な使い方を提供できます。
注意
意味不明なマークアップをしないでください。 意味を表現するのにスタイル設定に頼るのは悪習です。（検索エンジンや文字音声化のスクリーンリーダーや文字ブラウザなど、機械可読性を求めるものに非対応だからです）
必要に応じて、カスタムスタイルシートはURLのparameterに safemode=1 を用いることで、一時的に無効にすることができます。
規準 CSS
今日の CSS の中には、ブラウザが変わっても同じ動作をするように、「リセット」または「規準化」CSS に依拠するものが大多数です。
現状、MediaWiki にはリセット機能がないとは言え、ビルトインのスタイルシートには common/commonElements.css、common/commonContent.css、common/commonInterface.css、MediaWiki:Common.css などがあります。
CSSをコピーした場合は、それが他の CSS に依存していないかチェックしてください。
一例として、jsFiddle には「規準 CSS 」チェックボックスがあります。
これは margins を 0 にセットし、要求したリストの数をリセットします。
規準 CSS は MediaWiki サイトでまったく実行されないため、 MediaWiki 関連のコードのテストには使用禁止です。
jsfiddleにはCSSをインポートする機能があります。 英語版ウィキペディアで Vector （ベクター外装）をテストする場合は、以下の順序を守ってプライマリシートを書きます。
他の WMF ウィキに対しては、URL アドレス内のドメイン名を変えてください。 これらをインポートすると WMF のウィキ群で自作の CSS が既定の CSS とどのように影響し合うか少しは理解できるはずです。
Special:利用者ログイン、Special:個人設定でスタイル設定が無効？
サイト CSS のカスタム化（MediaWiki:Common.css）は既定では ログイン手順と個人設定のページで無効にしてあります。 これはログイン手続きでセキュリティを保つ措置であり、利用者が煩雑だと感じるカスタム要素を除去できるようにします。 セキュリティのリスクを心配する必要がないときは、カスタムの CSS をこれらのページで有効にするには、$wgAllowSiteCSSOnRestrictedPages 設定を使う選択肢があります。
関数 url() を使用する
プライバシー保護のため、ウィキメディアのサイトはCSS関数 url() を使った外部サーバーからのリソースの読み込みを拒否するように設定されています。これはデータURLでエンコードしたリソースも含みます。
ただし、ウィキメディアのサーバーにホストされているリソースの場合は読み込めます。 例えば、ウィキメディア・コモンズから画像を読み込み、 CSS を介して背景画像として使用できます。
.my-class {
background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}
ウィキメディアの拡張機能Universal Language Selectorによって提供されるカスタマイズされたフォントファミリーを使うこともできます（詳細はウィキメディアのウィキで利用可能なフォント一覧をご覧ください）。
例えば、CSSでフォント Gochi Hand を読み込むと、以下のようになります。
@font-face {
font-family: 'GochiHand';
src: local("Gochi Hand"),
url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}
カスタムのフォントを使いたい場合は、利用者個人のシステムにインストールしてください。
関連項目
- Manual:インターフェイス/JavaScript
- Manual:インターフェイス/スタイルシート
- Extension:CSS
- Extension:TemplateStyles
- Manual:コーディング規約/CSS
$wgUseSiteCss$wgAllowUserCss- カテゴリ:ユーザーインターフェイスの拡張機能
- カテゴリ:外装の拡張機能
- Category:Snippets with CSS