MediaWiki‐ノート:Common.css
From Wikipedia, the free encyclopedia
| このインターフェース・メッセージ、あるいは、外装(スキン)にはマニュアルがあります。 MediaWikiインターフェースは、保護された状態です。修正の必要がある場合には、適切な告知を伴う提案の後、管理者伝言板に申請してください。 |
| Common.cssは、全ての外装(スキン)向けの一般的なCSSを記述したページです。スタブ、曖昧さ回避、メッセージボックスなどのスタイルを整えるために使われます。 変更させる前に、任意の場所で提案してください。以下のスキンで呼び出されます:
|
このページでは SpBot による過去ログ化が行われています。解決済みの節に {{Section resolved|1=--~~~~}} というテンプレートを設置して過去ログ化を提案すると、その節は 7 日後に過去ログ化されます。 |
特定テンプレート用のCSSをTemplateStylesに移行する提案(1回目)
TemplateStyles拡張機能は2018年8月に導入されました。これにより、特定テンプレート用のCSSはそのテンプレートの/styles.cssサブページで保存し、Common.cssに置く必要がなくなりました。したがって、特定テンプレート用のCSSをTemplateStylesに移行したいと思います。移行の利点としては、「特定のテンプレートでしか使われないCSSをすべてのページで読み込まなくてもよい」「インターフェース管理者でなくても修正できる(影響が特に大きいテンプレートを除く)」が挙げられます。一気に移行してもいいですが、移行できるCSSがとても多いので今回は3クラスのみ提案します。
- globegrisクラスは2013年1月に導入され、{{メインページ/ようこそ}}で使われていたクラスですが、2020年7月の改定以降はメインページで使われていません。{{メインページ/ようこそ}}以外での使用は想定されていないので、Common.cssに置く必要はなくなったと考えます。
- Unicodeクラスは{{Unicode}}での使用が想定されています。一部
<span class="Unicode">Ⓐ</span>のようにHTMLで直接指定している例もありますが、ウィキテキストの読みやすさとメンテナンスしやすさを考えるとテンプレート使用に移行したほうがよさそうです。 - SAMPAクラスは{{SAMPA}}(と関連テンプレート)での使用が想定されています。こちらもUnicodeクラスと同じく、HTMLで直接指定している例があります。
--ネイ(会話) 2021年4月13日 (火) 13:52 (UTC)
- globegrisクラスについては
賛成 globegrisクラスは一部の利用者名前空間のページで使われているほかはTemplate:メインページ/ようこそでしか使用されておらず、かつメインページ本体の過去版ではソース中でglobegrisクラスを直接使用していないことを確認しましたので、テンプレートスタイルへの移行に賛成します。なお、MediaWiki:Common.cssのほかにMediaWiki:Gadget-Blackskin.cssにもglobegrisクラスのスタイル宣言があります。--本日晴天(会話) 2021年4月14日 (水) 11:08 (UTC) - UnicodeクラスとSAMPAクラスについては
反対 UnicodeクラスとSAMPAクラスについては以下に示す理由により、テンプレートスタイルへ移行する弊害が利点を上回ると考えるので、反対します。なお、この2つのクラスおよびスタイル宣言を引き続き使用することの是非については判断しません。
- スタイル宣言をMediaWiki:Common.cssから除去した場合、例えば記事中に
<span class="Unicode">があるが{{Unicode}}が一度も使われていないケースではスタイルが適用されません。仮にHTMLタグによる直接指定を全部テンプレート化できたとしても、過去版を閲覧した際は問題が残ります。 - MediaWiki:Common.cssでの宣言によればUnicodeクラスやSAMPAクラスを使用していれば如何なる要素でもスタイルが適用されることになっており、実際に蛇の目ではUnicodeクラス付きのdiv要素があったり、X-SAMPAではウィキテーブルのセルにSAMPAクラスを使用しているといった例があります。ところが{{Unicode}}や{{SAMPA}}は常にspan要素を生成するため、現在の仕様では先の例をテンプレートの呼び出しに置き換えることができません。結果として1つもテンプレートへ置き換えられなかったページでは上で述べたような問題が発生します。テンプレートに要素名を指定する引数を新設するとか、記事の冒頭にtemplatestylesタグを追加するという解決策も考えられますが、簡潔さおよび柔軟性では現状のMediaWiki:Common.cssによる手段に劣るでしょう。
- テンプレートスタイルを使用したテンプレートを参照読み込みした場合、1回目はスタイル宣言を含むstyle要素が追加され、2回目以降はlink要素が追加されるため、その分HTMLのサイズが大きくなります。展開後読み込み量のカウンタについては、特別:差分/82985782のコードで試したところ、1回だけの読み込みで42バイト消費、計2回の読み込みで84バイト消費していました。テンプレートスタイルへの移行がテンプレートの制限に引っかかる直接的な原因にはなりにくいですが、{{Unicode}}や{{SAMPA}}はいわゆるインラインテンプレートであり記事中で複数回使用されることもままあることから、MediaWiki:Common.cssによる手段よりは不利であると言えそうです。
- スタイル宣言をMediaWiki:Common.cssから除去した場合、例えば記事中に
- --本日晴天(会話) 2021年4月14日 (水) 11:08 (UTC)
返信 まず、どちらのクラスも廃止提案の用意がありますが、本議論中に提起することは混乱の元になりかねないので、結論が出るまで一旦は置いておきます。下記は本日晴天さんが挙げた理由に対する返信です。
- X-SAMPAはASCII文字のみで構成され、{{Unicode}}も(英語版の削除依頼によれば)Windows XP対応のためのテンプレートです。したがって、クラスをCommon.cssから除去しても内容が消えるわけではなく、過去版の閲覧を問題にする必要はないと考えます。
- 表組みでの使用はセルごとの指定に置換できます(例:フランス語#母音)。蛇の目についてはTemplate:記号文字と指定が重複しているので、divタグを除去しました。記号文字テンプレートでの指定はTemplateStylesで対応できるでしょう。
- クラスを使用するページでの読み込み量は、若干増えるかもしれません。しかし、Common.cssに置くことは「クラスを使用しないページでも読み込まなければならない」ことを意味します。たとえば、Help:テンプレートの制限のページではUnicodeやSAMPAクラスを使用していませんが、どちらのクラスも読み込まれています。class=Unicodeを指定するページ+Template:Unicodeの使用数が約6,400件、class=SAMPAを指定するページ+Template:SAMPAの使用数が約50件(どちらも大まかな計算です)なので、読み込み量の節約という面では全体的に見て割に合いません。
- --ネイ(会話) 2021年4月16日 (金) 13:18 (UTC)
messageboxの廃止提案
2006年よりCommon.cssに含まれているmessageboxクラスの廃止を提案します。
.messagebox: 「メッセージボックス」という名前がmboxと被っており、使い分けが不明瞭であるうえ、信玄公旗掛松事件などで(ただの装飾として)不適切に使用されている。メッセージボックスならばmboxを使えばよく、そうでなければほかのクラスを使うべきである。
済 .messagebox.merge: {{統合提案}}の過去版で使用されたが、現在では使用されていない。
済 .messagebox.cleanup: 古いノートページで2、3件使われている程度であり、Common.cssに置く理由が見だせません。色は違うものの{{tmbox}}で代用できるとみられます。
済 .messagebox.standard-talk: テンプレート約50件で使われていますが、その多くが解説文への誘導であり、{{Documentation}}を利用すればよい。
廃止とする合意が成立した場合、表示が崩れないようほかのテンプレートやCSSクラスに置換した後、Common.cssから除去します。--ネイ(会話) 2023年3月8日 (水) 18:16 (UTC)
.IPAからヒラギノを除外
.IPAに'Hiragino Kaku Gothic Pro'が含まれています。しかし、ヒラギノは、合成可能な補助記号に対応していないようで、[e̞]や[ɪ̈]などの表記で補助符号がずれて表示されます。MacOS上のChromeやFirefoxなどのブラウザで規定のフォント設定では、(規定がヒラギノであるため)Template:母音などの記号が正しく表示されないことを確認しています。
このほか、'Matrix Unicode'が含まれていますが、この名前のフォントは調べた限りでは見つかりませんでした。
'Charis SIL', 'Doulos SIL', 'DejaVu Sans', 'Code2000', 'Tahoma', 'Microsoft Sans Serif'の各フォントについては、合成文字が正しく表示されることを確認しました。
.IPAから'Hiragino Kaku Gothic Pro'を取り除くべきだと思います。'Matrix Unicode'も取り除いたほうが良いかも知れません。--数矢(会話) 2024年9月20日 (金) 06:18 (UTC)
hatnoteクラスを使用するがHatnote/styles.cssを読み込まないテンプレート
MediaWiki‐ノート:Common.css/過去ログ/2021年#特定テンプレート用のCSSをTemplateStylesに移行する提案(6回目)により、dablinkクラスへの指定が以下のテンプレートはhatnoteクラスを使用しますがTemplate:Hatnote/styles.cssを読み込みません。ほかにもあるかもしれません。
これらは同じページで{{otheruses}}等をつかっているか否かで表示が変わります。特別:固定リンク/104308640と特別:固定リンク/104308643を比較してください。上記の内、上3つは主にカテゴリで使われるTemplateであり、修正もhatnoteクラスを使わないようにするか、Template:Hatnote/styles.cssを読み込むようにすれば良いです。しかし英語版ではhatnoteクラスが広く使われており、今後あらたに移入されることがありえます。例えばエラーメッセージで使われており、上で挙げませんでしたが、Module:Check for unknown parametersはプレビュー時にエラーをhatnoteクラス付きで出力します。Template‐ノート:See alsoではhatnoteクラスの挙動の変化に戸惑いました。私としては、{{hatnote}}を直接使用しているページがそれほど多くないことも踏まえて、TemplateStyleで指定するのはdablinkクラスでもいいのではないかと思っています。--FlatLanguage(会話 / 投稿) 2025年3月30日 (日) 13:20 (UTC)
テンプレート用背景色を標準化する案
Wikipedia:井戸端/subj/ダークモード互換は私が提起して以降も対応が滞ってしまっていますが、background-colorをハードコードしているテンプレートはjawiki上にまだ大量にあります。それらをダークモードに対応させることを考えた際、現状だと「そのテンプレートごとに独自の色指定をする」といったことが普通にありえ、サイト全体の「定型色」が必要だと思います。利用者:Dragoniez/scripts/darkmode.cssに試作しましたが、こちらをCommon.cssとMobile.cssに追加し、HTMLのクラス属性基準でテンプレート間の背景色を標準化することを提案します。以下、色の実例です(ほぼほぼCodexから持ってきています)。
jawiki-bg-transparent
jawiki-bg-neutral
jawiki-bg-blue
jawiki-bg-yellow
jawiki-bg-red
jawiki-bg-green
色々考えたのですが、今回の場合<templatestyles />で対応するよりも、サイトCSSで対応した方が良かろうという考えに至りました。というのも:
- {{Vfd top}}など、
background-colorをハードコードしてるsubst展開型のテンプレートが多いこと。- ⇒ 何らかの拍子に
<templatestyles />が除去されたら、背景色が消えます。 - ⇒ WP:RFD/Rをはじめ、
<div />要素を基準に過去ログ化などを行っているボットがあり、<templatestyles />方式だとプログラムに障害が出うること。
- ⇒ 何らかの拍子に
- サイトCSSで読み込んでしまっても、大した負荷ではないこと。
このあたりを加味してでの提案です。よろしくお願いします。 --Dragoniez (talk) 2025年5月26日 (月) 15:40 (UTC)
コメント コメント依頼も出したうえで約2週間経過しましたが、特段反対意見等も出ていませんので、このまま問題なさそうであれば私が時間が取れる時にCSSを追加のうえ、順次テンプレートに反映させていければと考えています。 --Dragoniez (talk) 2025年6月7日 (土) 16:28 (UTC)- たとえば、jawiki-bg-blueはダークモードでは暗めの青色、そうでないときは明るめの青色にする(という設定をMediaWiki:Common.cssに追加する)、ということでしょうか?リンク先のCodexのcolor-progressiveのように意味的な名前のほうがいいような気もしますが、そうはいかないのでしょうか?--whym(会話) 2025年6月8日 (日) 06:50 (UTC)
- 明るめ暗めは特段関係ないです。ダークモードで背景色を変える場合、明るくしすぎると根本的に文字が読めないため、この問題を生じさせずに色がついていることが分かるようにする、という以上のことはありません。クラス名は何でもいいですが、Codexにない色を今後追加しようと仮になった際、固有名詞のようなものを標準にすると、クラス名を選ぶための無駄な労力が生じます。クラス名を色で区別するのに何か不都合があるのでしょうか。 --Dragoniez (talk) 2025年6月9日 (月) 08:13 (UTC)
- Templateの色は赤色がエラー、黄色が警告……というように使い分けられているわけではないので、クラス名は色名で良いと思います。{{Welcome}}のように見出しのあるTemplateもありますが、見出し用の背景色とか枠なしの背景色などは用意しないのでしょうか。--FlatLanguage(会話 / 投稿) 2025年6月14日 (土) 17:18 (UTC)
- 明るめ暗めは特段関係ないです。ダークモードで背景色を変える場合、明るくしすぎると根本的に文字が読めないため、この問題を生じさせずに色がついていることが分かるようにする、という以上のことはありません。クラス名は何でもいいですが、Codexにない色を今後追加しようと仮になった際、固有名詞のようなものを標準にすると、クラス名を選ぶための無駄な労力が生じます。クラス名を色で区別するのに何か不都合があるのでしょうか。 --Dragoniez (talk) 2025年6月9日 (月) 08:13 (UTC)
せっかくならHelp:暗い背景ガジェットでも機能するようにできないかと思って以下を書いてみましたが、あまりきれいなコードになりませんでした。やるとしたらMediaWiki:Gadget-dark-mode.cssに追加する形の方がきれいになるかもしれません。
暗い背景ガジェット用 |
|---|
html.client-dark-mode .jawiki-bg-transparent {
background-color: #e9fdf1; /* 101418 */
border: 1px solid #858a90; /* 72777d */
}
html.client-dark-mode .jawiki-bg-neutral {
background-color: #dedfe0; /* 202122 */
border: 1px solid #858a90; /* 72777d */
}
html.client-dark-mode .jawiki-bg-blue {
background-color: #d6ddf8; /* 1b223d */
border: 1px solid #5d7eca; /* 6485d1 */
}
html.client-dark-mode .jawiki-bg-yellow {
background-color: #e6dbcb; /* 2d2212 */
border: 1px solid #a67a25; /* ab7f2a */
}
html.client-dark-mode .jawiki-bg-red {
background-color: #fad8d1; /* 3c1a13 */
border: 1px solid #bb7070; /* bb7070 */
}
html.client-dark-mode .jawiki-bg-green {
background-color: #cce1da; /* 132821 */
border: 1px solid #13ac8c; /* 099979 */
}
|
反転した時に本来の色に近くなるようにしています。--FlatLanguage(会話 / 投稿) 2025年6月15日 (日) 10:01 (UTC)
hlist関連とplainlist関連
hlist関連とplainlist関連の指定がcommon.cssとmobile.cssの両方にありますが、それぞれTemplate:Hlist/styles.css・Template:Div col/styles.cssに同様のしていがあり、しかも少し違ってしていされているので、除去を目指すべきではないかと思います。--FlatLanguage(会話 / 投稿) 2025年6月15日 (日) 11:21 (UTC)
- Template:Div col/styles.cssからplainlist関連を除去しました(そもそもこのスタイルシート自体使われていないですが)。hlistについてはスタイルシートへの一本化の提案を準備しています。--FlatLanguage(会話 / 投稿) 2025年8月14日 (木) 13:59 (UTC)
出典ジャンプ先強調について
現在、{{harv}}や{{sfn}}をクリックしたときの出典の背景に#eaf3ffが指定されていますが、ダークモードだと全く読めません。また、MediaWiki:mobile.cssでは指定されていないため、モバイル版では背景が付きません。さらに、Module:Citation/CS1/styles.css・Template:Citation/styles.cssではrgba(0, 127, 255, 0.133)と指定されています。Module:Citation/CS1/styles.cssはCS1テンプレートのほか{{Catalog lookup link}}でも呼び出されているので、次のようになります。
- CS1テンプレートか、識別子テンプレート(従来型のテンプレートに識別子を指定した場合も)を1つ以上使用しているページ
- デスクトップでもモバイルでも
rgba(0, 127, 255, 0.133)
- デスクトップでもモバイルでも
- そうでないページ
- デスクトップでは
#eaf3ff、モバイルでは背景色なし
- デスクトップでは
これの改善を図ります。現在の#eaf3ffの指定はMediaWikiの(<ref>の)脚注ジャンプ先の背景に合わせたものですが、ext.cite.styles.lessを見るとこれは現在--background-color-progressive-subtleになっています。そこで、次のようにすることを提案します。
- MediaWiki:common.css・MediaWiki:mobile.css
/* 出典ジャンプ先強調 */
.citation:target {
background-color: #f1f4fd; /* fallback */
background-color: var(--background-color-progressive-subtle, rgb(0 127 255 / 0.133));
}
- Module:Citation/CS1/styles.css・Template:Citation/styles.css
.citation:targetの指定をコメントアウト
コメント部分が「脚注ジャンプ先強調」となっていますが、脚注は<ref>によるものと考えて、出典に背景色を付けるものなので「出典ジャンプ先強調」と改めます。また各種styles.cssに指定を残すと二重管理になって食い違いの元なので、コメントアウトします。
ライトモードでのイメージ
#def #eaf3ff rgb(0 127 255 / 0.133) --background-color-progressive-subtle
ダークモードでのイメージ
#def #eaf3ff rgb(0 127 255 / 0.133) --background-color-progressive-subtle
--FlatLanguage(会話 / 投稿) 2025年6月15日 (日) 13:46 (UTC)--(fallback先を--background-color-progressive-subtleのライトモードでの色にする)FlatLanguage(会話 / 投稿) 2025年6月16日 (月) 11:44 (UTC)
- styles.cssではなくMediaWiki:common.css・MediaWiki:mobile.cssなのは、日本語版ではまだモジュール化されていない出典テンプレートが多くあるためです。--FlatLanguage(会話 / 投稿) 2025年6月15日 (日) 14:09 (UTC)
コメント {{Citation/core}}などを更新し、モジュール化されていない出典テンプレートについてもstyle属性によるスタイル指定からテンプレートスタイルに移行してもいいかもしれません({{Cite news/sandbox}}での例)。--本日晴天(会話) 2025年6月15日 (日) 16:40 (UTC)
- その方法の場合、{{cite archive}}は英語版から更新すれば良いとして、{{cite jis}}・{{cite 判例検索システム}}といったテンプレートもTemplate:Citation/styles.cssを読み込むように修正する必要があります。全容は把握していません。--FlatLanguage(会話 / 投稿) 2025年6月15日 (日) 17:07 (UTC)
- テンプレートについてはこちらの検索結果にあるものがテンプレートスタイルへの移行対象となりそうです。あとは特定の出典テンプレートでのみ使用されているモジュールも当てはまるかもしれません。とはいえ新しい出典テンプレートが作られる可能性を考慮するとFlatLanguageさんの提案通りMediaWiki名前空間のCSSでいくらか指定しておいた方が無難かもしれません。--本日晴天(会話) 2025年6月15日 (日) 18:03 (UTC)
- いずれはスタイルシート側にしてもいいのかもしれませんが、今すぐではないかなあと思います。出典テンプレートは多くのページで使われているので、全ページで読み込ませるのはそこまで無駄ではない、というのもあります。--FlatLanguage(会話 / 投稿) 2025年6月16日 (月) 11:44 (UTC)
- テンプレートについてはこちらの検索結果にあるものがテンプレートスタイルへの移行対象となりそうです。あとは特定の出典テンプレートでのみ使用されているモジュールも当てはまるかもしれません。とはいえ新しい出典テンプレートが作られる可能性を考慮するとFlatLanguageさんの提案通りMediaWiki名前空間のCSSでいくらか指定しておいた方が無難かもしれません。--本日晴天(会話) 2025年6月15日 (日) 18:03 (UTC)
- その方法の場合、{{cite archive}}は英語版から更新すれば良いとして、{{cite jis}}・{{cite 判例検索システム}}といったテンプレートもTemplate:Citation/styles.cssを読み込むように修正する必要があります。全容は把握していません。--FlatLanguage(会話 / 投稿) 2025年6月15日 (日) 17:07 (UTC)
WP:AN/PEへ依頼しました。Reference tooltipsも更新したいですが、そのうち……--FlatLanguage(会話 / 投稿) 2025年6月22日 (日) 17:24 (UTC)
- 4ページとも編集されました/しました。--FlatLanguage(会話 / 投稿) 2025年6月23日 (月) 02:56 (UTC)