Fandom


ヘルプ
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文 : w:Help:Including additional CSS and JS

このページでは各コミュニティへのCSSやJavaScriptを組み込むお勧めの方法をご紹介します。

ImportJS 編集

この新しい方式によりMediaWikiページにMediaWiki:ImportJSが追加され、コミュニティ上で記事のスクリプトを、各ウィキおよびDev Wikiから呼び出すことができるようになりました。

この機能は、よそのコミュニティから記事をインポート(取り込むこと)ができる(ときには複数の記事をまとめて圧縮しひとつにする)、既存のimportArticlesに似ています。これによりファイルのサイズとウェブ・トラフィック両方を軽減でき、追加ファイルを素早く読み込めるコミュニティになります。ImportJSはCommon.jsと同じくどんなスキンにも影響します。

Bulb

JavaScriptの審査

ImportJSを使えばJavaScriptの審査は必要ありません。そのためコミュニティのJavaScriptインポートを即座に追加・削除できます!

使い方 編集

MediaWiki:ImportJSはJavaScriptフォームからロードする空白のページを提供します。ローカルのファイルはMediaWiki名前空間に入れる必要があります。Dev WikiからのインポートもMediaWiki名前空間にして使ってください。インポートするファイルについて書くときはMediaWiki名前空間は必要ありません。例:

Cat.js //local JS file
dev:AjaxRC.js // Dev Wiki script

ロードの順番 編集

ImportJSを使うときは、ページ内部が最後にロードされます。ロードの順番は以下の通りです。

  1. Common.js
  2. Wikia.js
  3. Common.jsを通じてImported scripts
  4. Wikia.jsを通じてImported scripts
  5. ImportJS

CSSインポート 編集

importArticles 編集

上記の方法の代わりに、CSSインポートに関してimportArticlesの情報をお伝えします。JSインポートについてはこのページをご覧ください。

CSSのスタイルをインポートするためにはまだimportArticlesを使用できます。しかし、JavaScriptを通じて行うことからJSの審査を受けることになります。

編集

importArticlesを通じてローカルのCSSファイルをインポートする方法:

importArticles({
    type: "style",
    article: "MediaWiki:Local.css"
});

@importメソッド 編集

Fandom でCSSページをインポートするには
CSSスクリプトをインポートする最善の方法を知っていますか。"表示"をクリックして、効率的な一括インポート構文によって、パフォーマンスを向上させ、コードをより簡潔に書く方法をご確認ください。
CSS のページが、@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
}
ここで紹介した方法の他にも、CSSをインポートする方法があります。importArticles を用いて、JavaScriptページからインポートすることもできます。JavaScriptやCSSのインポートの詳細については、技術情報をご覧ください。また、CSSについては、以下のヘルプページもお読みください。
@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");

このやり方についてはこちらで詳しく解説されています。

関連情報 編集

その他のヘルプとフィードバック 編集

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。