- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : w:Help:Including additional CSS and JS。
このページでは各コミュニティへのCSSやJavaScriptを組み込むお勧めの方法をご紹介します。
ImportJS[]
この新しい方式によりMediaWikiページにMediaWiki:ImportJSが追加され、コミュニティ上で記事のスクリプトを、各ウィキおよびDev Wikiから呼び出すことができるようになりました。
この機能は、よそのコミュニティから記事をインポート(取り込むこと)ができる(ときには複数の記事をまとめて圧縮しひとつにする)、既存のimportArticles
に似ています。これによりファイルのサイズとウェブ・トラフィック両方を軽減でき、追加ファイルを素早く読み込めるコミュニティになります。ImportJSはCommon.jsと同じくどんなスキンにも影響します。
使い方[]
MediaWiki:ImportJSはJavaScriptフォームからロードする空白のページを提供します。ローカルのファイルはMediaWiki名前空間に入れる必要があります。Dev WikiからのインポートもMediaWiki名前空間にして使ってください。インポートするファイルについて書くときはMediaWiki名前空間は必要ありません。例:
Cat.js //local JS file
dev:AjaxRC.js // Dev Wiki script
ロードの順番[]
ImportJSを使うときは、ページ内部が最後にロードされます。ロードの順番は以下の通りです。
- Common.js
- Wikia.js
- Common.jsを通じてImported scripts
- Wikia.jsを通じてImported scripts
- ImportJS
CSSインポート[]
importArticles[]
上記の方法の代わりに、CSSインポートに関してimportArticlesの情報をお伝えします。JSインポートについてはこのページをご覧ください。
CSSのスタイルをインポートするためにはまだimportArticlesを使用できます。しかし、JavaScriptを通じて行うことからJSの審査を受けることになります。
例[]
importArticlesを通じてローカルのCSSファイルをインポートする方法:
importArticles({
type: "style",
article: "MediaWiki:Local.css"
});
@importメソッド[]
@import
から始まる複数行のコードで構成されていた場合、コードをまとめて最適化することをおすすめします。複数のスクリプトを一括してインポートすることで、CSSの読み込み速度が速くなり、コードも読みやすくなります。以下の例をご覧ください。左の例は、従来の @import
規則を用いた多重インポート、右の例は、一括インポートを用いています。左の例のようなコードを使っている場合は、パフォーマンスの向上のため、1つのコマンドにコードをまとめ、右の例のように書き換えてください。従来の多重インポート | 一括インポート (推奨) |
---|---|
@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
@import url("http://dev.wikia.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
|
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css")
|
注:CSSのインポート規則は、ページの先頭に記述する必要があります。他の内容より後に記述すると、外部スタイルシートが正しく読み込めません。以下に記述場所の例を示します。
悪い例 | 良い例 |
---|---|
/* BEGINNING OF THE PAGE */
/** other styles **/
.example {
styling
}
/** imports **/
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
|
/* BEGINNING OF THE PAGE */
/** imports **/
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/** other styles **/
.example {
styling
}
|
@import
をつかうことで、Fandomまたは他のウェブサイト(URLが.cssで終わり、ファイルにOasisスキンの要素を含む)に運営されたCSSファイルのスタイルをインポートできます。シンタックスは以下の通りです。
@import "path_to_file_to_import.css"
上記の例につき、Local.cssをWikia.cssにインポートするには、Wikia.cssファイルの一番上に下記を追加してください:
@import "/load.php?articles=MediaWiki:Local.css&only=styles&mode=articles";
他の方法としては、Firefoxによる"Web Developer"の"Network"タブを利用すれば、ロードされたファイルを見つけるのが簡単になります:
@import url("/MediaWiki:Local.css?ctype=text/css&action=raw");
このやり方についてはこちらで詳しく解説されています。
CSSインポートのベストプラクティス[]
- 1. MediaWiki:Common.cssにコードの記述はありませんか。
- ある場合、全てのコードをMediaWiki:Wikia.cssの上部 (@importメソッドを使っている場合はその下) に移動します。混乱を避けるため、MediaWiki:Common.cssのコードは
/* コメント */
以外削除します。
- ある場合、全てのコードをMediaWiki:Wikia.cssの上部 (@importメソッドを使っている場合はその下) に移動します。混乱を避けるため、MediaWiki:Common.cssのコードは
- 2. @importの行はMediaWiki:Wikia.cssの一番上の行に書かれていますか。
- 最上部にある場合のみ、Webブラウザによって読み込まれます。そのため、他のコードが上に書かれている場合は、@importを最上部に移動します。
- 3. CSSを読み込むために、MediaWiki:Common.jsでのJavascript/ImportArticlesを使っていませんか。
- CSSページからインポートをしなかった場合、ページが読み込まれてからCSSが読み込まれることになります。CSSページでの@importによるインポートに変更してください。
- よくある質問
- MediaWikiページのCSSをインポートするのにおすすめのURL指定方法はどれですか?
- load.php構文によるURL指定を使うと、キャッシュ作成と縮小化を行えます。
- 複数のCSSをインポートするにはどうしたら良いですか?
@import "/load.php?mode=articles&articles=MediaWiki:<ファイル1>.css|MesiaWiki:<ファイル2>.css&only=styles";
のように、パイプ「|」で区切り、1行にまとめて記述します。
- MediaWiki:Wikia.css以外ではCSSをインポートすべきではないということですか?
- ポータブル・インフォボックスのテーマやセレクタはMediaWiki:Themes.cssでインポートした方が良いでしょう。適切なファイルでインポートするのが望ましいです。
- MediaWiki:Common.cssが削除できません。
- 英語ウィキでは、2017年8月以降このファイルは削除できなくなりました。(
/* コメント */
といった) コメント以外の内容を全て消去して保存することで対応してください。
- 英語ウィキでは、2017年8月以降このファイルは削除できなくなりました。(
関連情報[]
- ヘルプ:追加のJavaScriptとCSSをインクルードする/技術情報
- ヘルプ:CSSとJavaScript
- ヘルプ:CSSとJavaScriptのカスタマイゼーション
- ヘルプ:CSSとJavaScript/高度な情報
- w:c:dev:Installation
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。