FANDOM


翻訳が必要です

このページ(の一部)は、翻訳が必要です。 (日本語への)翻訳にご協力ください。

この記事は、Fandom でのコードのインストールに関するガイドです。

Fandom でCSSページをインポートするには

Fandom では、CSS @import を使用することで、スタイルシートのコレクションを効率的にインポートして、以下のことが可能になります。

  • スタイルシートを minify し、パフォーマンスを向上させる
  • コードを整理して読みやすくする
  • キャッシュの一貫性を向上させる

以下の例を参考にしてください。

@import の使用例

CSS のページが、@import から始まる複数行のコードで構成されていた場合、コードをまとめて最適化することをおすすめします。複数のスクリプトを一括してインポートすることで、CSSの読み込み速度が速くなり、コードも読みやすくなります。以下の例をご覧ください。左の例は、従来の @import 規則を用いた多重インポート、右の例は、一括インポートを用いています。左の例のようなコードを使っている場合は、パフォーマンスの向上のため、1つのコマンドにコードをまとめ、右の例のように書き換えてください。

多重インポート — 読みづらく、非効率的です

  1. @import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
  2. @import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
  3. @import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
  4. /* CSS */

一括インポート — 読みやすく、効率的です (推奨)

  1. @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
  2. /* CSS */

Placement of CSS @import rules

CSSのインポート規則は、ページの先頭に記述する必要があります。他の内容より後に記述すると、外部スタイルシートが正しく読み込めません。以下に記述場所の例を示します。

悪い例

  1. /* CSS */
  2. @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");

良い例

  1. @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
  2. /* CSS */

ここで紹介した方法の他にも、CSSをインポートする方法があります。importArticles を用いて、JavaScriptページからインポートすることもできます。

Fandom でJavascriptをインポートするには

The importArticles statement is designed to efficiently batch import scripts:

  • to speed up performance,
  • make your code look cleaner,
  • combine multiple HTTP requests into a single data transfer,
  • and allow multiple scripts to load and execute faster

If you've been installing several different scripts, your JavaScript file has probably accumulated unnecessary import statements.

importArticles の使用例

JavaScriptファイルが importScriptimportScriptPage、または importArticles から始まる複数行のコードで構成されていた場合、コードをまとめて最適化することをおすすめします。複数のスクリプトを一括してインポートすることで、JavaScriptコードの読み込み速度が速くなり、コードも読みやすくなります。以下の例をご覧ください。左の例のようなコードを使っている場合は、右の例のようなコードへ書き換えを行ってください。

多重インポート — 読みづらく、非効率的です

  1. importScriptPage('Script1.js', 'dev');
  2. importScript('MediaWiki:Script2.js');
  3. importArticle({
  4.   type: 'script',
  5.   article: 'u:dev:Script3/code.js'
  6. });
  7. importScriptPage('Page1.js', 'wiki');
  8. importScriptPage('Page2.js', 'wiki');

一括インポート — 読みやすく、効率的です (推奨)

  1. importArticles({
  2.     type: 'script',
  3.     articles: [
  4.         'u:dev:Script1.js',
  5.         'MediaWiki:Script2.js',
  6.         'u:dev:Script3/code.js',
  7.         'u:wiki:Page1.js',
  8.         'u:wiki:Page2.js'
  9.     ]
  10. });

JavaScript をインポートする場合の注意点

コンマ等の位置にご注意ください。 プログラミングに詳しくない人は特に、(詳しい人でも、)コンマや引用符などの大事な記号を誤って削除したり、忘れたり、場所を間違えたりしがちです。importArticles を利用する際は、構文エラーを起こさないよう、コードの書き方に十分注意してください。

別の方法としては、MediaWiki:ImportJS を使用する方法があります。 しかし、importArticles には、これ以外にも様々な方法があります!

Fandom の HTML と wikitext のマークアップ

Location Source

ソースモードに切り替えてコードを綺麗に整理する方法。

Source mode is designed to handle complex HTML codes on an article, allowing to reduce the amount of unwanted code that is sometimes automatically added. Source mode is the best way to edit if you are using templates, or HTML tags such as <span>, <p>, and <div>.

Here are some useful tips:

  • ビジュアルモードでDouble Brackets Iconを見かけたら、そこはテンプレートか対応していないタグ、及び対応していないオプションを含んだタグです。ソースモードに切り替えると表示されます。
    • <u><s>といったサポートされているタグもあります。
  • ビジュアルモードでComment Iconになっている箇所はコメントです。ソースモードでは<!-- -->がそれです。
  • MediaWiki has a special language called wikitext to make editing easier. This language is supported in visual mode and will not break as easily as HTML.
  • フォーラムメッセージウォールでソースモードにするには、編集枠の下にあるComment Source Modusをクリックします。
  • テンプレートはソースモードでのみ編集できます。

関連情報

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+