ヘルプ:CSSとJavaScript/高度な情報

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

個別のWikiや自分のアカウントにのみ適用されるカスタムコードの作成をご希望ですか？このページでは、CSSとJavaScriptのカスタマイズについての基本的なヘルプページよりもさらに詳しい情報についてお知らせしています。

Before you get started, though, you'll want to check out which pages can be customised. If you're planning to write some JavaScript for your community, you'll need to ask for it to be turned on by contacting Fandom Support. Finally, you'll want to familiarize yourself with the JavaScript review process.

特定のページのみカスタマイズする[]

CSSを特定のページのみに適用する[]

CSSのクラスを使うと、CSSを特定のページにだけ適用できます。各ページの<body>要素には、ページ名に基づいた固有の識別子が付与されています。例えば、ご覧いただいているこのヘルプページのクラスは

page-ヘルプ_CSSとJavaScript/高度な情報

となります。基本的な書式は'page-[ページ名]'で、スペースやコロンなどの特殊な文字はアンダーバーに置き換えられます。

また、bodyタグには、特定の名前空間にのみCSSを適用させるのに使うことができるクラスも存在します。利用可能なクラスなどの詳細については、ブラウザの「（要素を）検証（調査）」や「ページのソースを表示」機能を使ってご確認ください。

JavaScriptを特定のページのみに適用する[]

特定のページにJavaScriptを適用するには、MediaWiki:Common.js内で以下のようなswitch文をお使いください。

switch (mw.config.get('wgPageName')) {
    case 'ページ1':
        // ここに記述されたJavaScriptは「ページ1」に適用されます
        break;
    case 'ページ2':
        // ここに記述されたJavaScriptは「ページ2」に適用されます
        break;
}

CSSやJavaScriptを特定のWikiのみに適用する[]

個人用CSSはできるだけ1か所 (global.css) にまとめておきたい、という場合には、bodyタグに付与されているクラスを利用することで、特定のWikiのみにCSSを適用できます。

付与されるクラス名はWikiのURLではなくデータベース名をもとにしています。両者はたいてい同じですが、異なる場合もあります。英語のWikiでの書式は

wiki-[データベース名]

です。日本語など、英語以外のWikiでの書式は

wiki-[言語コード][データベース名]

となります。

For instance, if you wanted to make part of the background of Wookieepedia appear red to you, add this to your global.css file:

.wiki-starwars #WikiaMainContent { background-color:red; }

JavaScriptの場合、wgDBnameでそれぞれのWikiを識別できます。

読み込みの順序[]

ファイル:FANDOM CSS Importing Best Practices.png

インポートの際の読み込みの順序

Fandomでの読み込みは一般的に、以下の順序で行われます。

同じレベル内での読み込みは、Common (共通コード)、Wikia (特定スキン用コード) の順で行われます。This means that if you've said .class { color: red } in Common.css, but .class { color: green} in Wikia.css, the .class will be green. And because personal CSS is last, whatever you put there always overrides the local wiki's choices.

It also critically means that if you're importing CSS or fonts — and your wiki has both Common.css and Wikia.css — those imports need to be at the very top of Common.css.

ファイル:FANDOM CSS Importing Best Practices.png

This chart will help you figure out the best way to merge Common.css into Wikia.css while observing proper load order.

If you want to simplify your wiki's CSS, you can graft the contents of Common.css onto Wikia.css. But you need to observe load order fundamentals when you do. Follow the nearby flowchart, and you'll be fine!

For JS, load order is especially important when considering how to best use MediaWiki:ImportJS. Because ImportJS loads last, you can put your customization of a Dev Wiki script in Common.js or Wikia.js, but have the import of the script itself in ImportJS. The full JS load order is:

Common.js
Wikia.js
Imported scripts through Common.js
Imported scripts through Wikia.js
ImportJS

Finally, remember the obvious: pages load from top to bottom. That means that declarations made at the top of a page can be overridden by ones at the bottom.

CSS内の!important[]

読み込み順との関係から、CSSコードを意図通りに適用させるために!importantの使用が必要な場合があります。特定のCSSセレクタを使用する場合は、!importantの適用は極力回避してください。

キャッシュの問題[]

インターネットからダウンロードされるファイルはすべてキャッシュされます。これは通常、お使いの端末とFandomのサーバー両方のトラフィックを減らすのに役立つものですが、新しく加えた変更がどのような見ばえになるのかを確認したいときに、反映されるまで時間がかかる場合があります。そのようなときは、以下のキャッシュをクリアする操作を行ってください。

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
Internet Explorer / Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください
Opera: Ctrl-F5を押してください

少し前に開いたばかりのページでは、変更内容を確認するために上記のような手動更新が必要になることがあります。

よく使用されるJavaScriptのスニペット[]

他のユーザーが書いたスクリプトから、参考になりそうなものを探したいときには、FandomオープンソースライブラリのJavaScript拡張の一覧をご覧ください。

JavaScriptの重複[]

多くのスクリプトは、同じページで何度も実行されると問題を引き起こします。コードを書く際には、コードの実行が一度だけとなるようご注意ください。同じJavaScriptを複数のファイルにコピーするのは、動作の衝突やエラーなどによる意図しない動作の原因となりますので、避けてください。

CSSおよびJavaScriptエディタによるエラーチェック[]

CSSおよびJavaScriptのエディタには、エラーチェック (lint) とシンタックスハイライトが備わっています。

入力しているコードは随時チェックされ、構文に問題がある場合はすぐに知らせてくれます。
必ずしもすべてのエラーを修正しなければならないということではありません。CSS（およびJavaScript）の技術は発展し続けており、すべてのブラウザが同じように動作するわけではありません。修正を必要としないものがエラーとして現れる場合もあります。

よくあるエラー表示[]

CSS issues
エラー	解説
`@import prevent parallel downloads, use <link> instead`	通常、CSSのインポートにはlinkタグを使用します。しかしMediaWikiでは、JavaScriptを使用しない限りlinkタグを追加することができないため、このエラーは通常無視しても問題ありません。@import を活用することをお勧めします。
`Expected X but found Y`	これは、プロパティに対して無効な値が入力された場合に表示されます。例えば、`color: abc;`のabcの部分が適切な色コードでなかった場合に、このエラーが表示されます。
`Use of !important`	`!important`コードは、CSSではできるだけ使用を避けるべきです。メンテナンスが容易でなくなるうえ、個人用CSSで設定を上書きすることが難しくなるためです。たいていの場合、適切なセレクターを使うことで、`!important`の使用は回避できます。
`Unknown property 'codename'`	CSSは規格やブラウザでの実装状況が頻繁に更新されるため、すべてのCSSコードをツールが認識できるわけでありません。そのため、このエラーが表示されたCSSコードであっても、条件を満たせば使用できる場合があります（例： `mix-blend-mode: color-dodge;`）

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

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