ヘルプ:追加のJavaScriptとCSSをインクルードする

このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。

原文 : w:Help:Including additional CSS and JS。

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

ImportJS

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

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

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については、以下のヘルプページもお読みください。

• ヘルプ:CSS
• ヘルプ:CSSとJavaScriptに関する高度な情報
• ヘルプ:チャット向けのカスタムCSSとJavaScript

@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のコードは/* コメント */以外削除します。
• 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月以降このファイルは削除できなくなりました。(/* コメント　*/といった) コメント以外の内容を全て消去して保存することで対応してください。

関連情報

• ヘルプ:追加のJavaScriptとCSSをインクルードする/技術情報
• ヘルプ:CSSとJavaScript
• ヘルプ:CSSとJavaScriptのカスタマイゼーション
• ヘルプ:CSSとJavaScript/高度な情報
• w:c:dev:Installation

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

• ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
• 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
• この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
• このヘルプはコミュニティセントラル内にて管理されています。