This page, or parts of it, are still untranslated. Please translate it to the appropriate language (日本語).
この記事は、Fandom でのコードのインストールに関するガイドです。
Fandom でCSSページをインポートするには[]
Fandom では、CSS @import を使用することで、スタイルシートのコレクションを効率的にインポートして、以下のことが可能になります。
- スタイルシートを minify し、パフォーマンスを向上させる
- コードを整理して読みやすくする
- キャッシュの一貫性を向上させる
以下の例を参考にしてください。
@import の使用例[]
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("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css"); /* CSS */
- 一括インポート — 読みやすく、効率的です (推奨)
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
Note: That, however, would not work well for some stylesheets which import other stylesheets in their turn. Those "parent" stylesheets may break if combined with other stylesheets in the same @import statement.
Placement of CSS @import rules[]
CSSのインポート規則は、ページの先頭に記述する必要があります。他の内容より後に記述すると、外部スタイルシートが正しく読み込めません。以下に記述場所の例を示します。
- 悪い例
-
/* CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
- 良い例
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* 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ファイルが importScript、importScriptPage、または importArticles から始まる複数行のコードで構成されていた場合、コードをまとめて最適化することをおすすめします。複数のスクリプトを一括してインポートすることで、JavaScriptコードの読み込み速度が速くなり、コードも読みやすくなります。以下の例をご覧ください。左の例のようなコードを使っている場合は、右の例のようなコードへ書き換えを行ってください。
- 多重インポート — 読みづらく、非効率的です
-
importScriptPage('Script1.js', 'dev'); importScript('MediaWiki:Script2.js'); importArticle({ type: 'script', article: 'u:dev:Script3/code.js' }); importScriptPage('Page1.js', 'wiki'); importScriptPage('Page2.js', 'wiki');
- 一括インポート — 読みやすく、効率的です (推奨)
-
importArticles({ type: 'script', articles: [ 'u:dev:Script1.js', 'MediaWiki:Script2.js', 'u:dev:Script3/code.js', 'u:wiki:Page1.js', 'u:wiki:Page2.js' ] });
JavaScript をインポートする場合の注意点[]
コンマ等の位置にご注意ください。 プログラミングに詳しくない人は特に、（詳しい人でも、）コンマや引用符などの大事な記号を誤って削除したり、忘れたり、場所を間違えたりしがちです。importArticles を利用する際は、構文エラーを起こさないよう、コードの書き方に十分注意してください。
別の方法としては、MediaWiki:ImportJS を使用する方法があります。 しかし、importArticles には、これ以外にも様々な方法があります！
Fandom の HTML と wikitext のマークアップ[]
ソースモードに切り替えてコードを綺麗に整理する方法。
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:
- ビジュアルモードで
を見かけたら、そこはテンプレートか対応していないタグ、及び対応していないオプションを含んだタグです。ソースモードに切り替えると表示されます。
<u>や<s>といったサポートされているタグもあります。
- ビジュアルモードで
になっている箇所はコメントです。ソースモードでは<!-- -->がそれです。 - 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.
- テンプレートはソースモードでのみ編集できます。
関連情報