Extension:CSS

This page is a translated version of the page Extension:CSS and the translation is 100% complete.
MediaWiki 拡張機能マニュアル
OOjs UI icon advanced-invert.svg
CSS
リリースの状態: 安定
実装 パーサー関数
説明 CSSファイル、記事、インラインルールをページに追加するためのパーサー機能を提供します
作者
最新バージョン 3.5.0
MediaWiki >= 1.31.0
ライセンス GNU 一般公衆利用許諾書 2.0 以降
ダウンロード
organicdesign.nz
  • $wgCSSPath
  • $wgCSSIdentifier
translatewiki.net で翻訳を利用できる場合は、CSS 拡張機能の翻訳にご協力ください

使用状況とバージョン マトリクスを確認してください。

問題点 未解決のタスク · バグを報告

CSS拡張機能は、特別な文章に対し、CSSスタイルシートによる表示を行えるようにするものです。CSSは、構文解析機能により、直接定義された法則、または他の記事やファイルともなりえます。

使用法

例えば、"MyFancyUserPage"という記事で使用するためのスタイルである"MyStyles.css"という CSS記事がある場合、後者に以下のパーサー関数構文を追加することになるでしょう。

{{#css:MyStyles.css}}

一方、"MyStyles.css"が/wiki/skinsディレクトリのファイルであった場合、以下のように含まれることになります。ファイルは、記事のタイトルと区別するために、スラッシュを先頭につけた絶対パスでなければならないことに注意してください。

{{#css:/skins/MyStyles.css}}

また、次の例のように、CSSルールをパーサー関数内に直接含めることもできます(inline)。

{{#css:
  body {
    background: yellow;
    font-size: 20pt;
    color: red;
  }
}}

インストール

設定

オプションで、外部ファイルのベースURLを設定することができます。

$wgCSSPath = false;  # 既定値、$wgScriptPathの相対パス
$wgCSSPath = '';  # サーバーのルートに相対
$wgCSSPath = 'https://example.org/stylesheets';  # 別サイトとの相対比較

PageCSSの代替として使用する

以前のExtension:PageCSS (現在はアーカイブされています)では、#css:パーサー関数の代わりに‎<css>‎</css>タグを使用していたものがあります。 この拡張機能は、それらの拡張機能が提供することのほとんどを行うことができますが、構文には互換性がありません。 古い‎<css>タグを使用している既存のページを壊さないようにする一つの方法は、このExtension:CSSExtension:NewPageCSS の両方を同じwikiで使用することです。

別の解決策 (この拡張モジュールだけを使用したいが、Extension:PageCSSを期待する既存のコンテンツがある場合) は、このスタブ関数を PHP ファイルとして保存し、LocalSettings.php からそれをインクルードして<css> を#cssにリマップすることです。

<?php

// <css></css> タグを {{#css:}} パーサ関数拡張に再マップするスタブ

// 既存のWikiでExtension:NewPageCSSを置き換えるためにhttps://www.mediawiki.org/wiki/Extension:CSSをインストールする際に使用します。

$wgHooks['ParserFirstCallInit'][] = 'wfCSSParserStubInit';
 
// コールバック関数をパーサーに追加する
function wfCSSParserStubInit( Parser $parser ) {

        // パーサーが<css>タグを見たとき、スタブwfCSSTagRender関数(下記)を実行し、{{#css:}}パーサーを呼び出します。
        $parser->setHook( 'css', 'wfCSSTagRender' );
        return true;
}
// <css>タグの実行
function wfCSSTagRender( $input, array $args, Parser $parser, PPFrame $frame ) {

        // スタブ関数、ユーザー提供の入力テキストをウィキテキストとして再パースするために {{#css:}} パーサー関数に盲目的にリダイレクトするだけです
        $output = $parser->recursiveTagParse('{{#css:' . $input . '}}', $frame);
        return $output;
}

この時点で、以前のPageCSS(またはNewPageCSS)拡張機能は設定から削除されます。<css>は#css:に移動し、(このCSS拡張機能がすでに稼働している場合)他のCSS拡張機能が常に持つように動作するようになります。

特定のページの色や背景を変更する際の問題点

パーサー機能を使用して他のページのCSSを使用しても、ページの色や背景を変更することはできませんが、1つのページ単体でパーサー機能を使用すると、背景を変更することが可能です。 この問題を解決するために、トランスクルージョンでCSSを読み込むことが可能であり、ページ背景への変更の読み込みに失敗する問題は発生しない。

バグ

トークページを参照してください。

関連項目