ヘルプ:背景画像

このページでは、あなたのコミュニティに最適な背景 (background) スキンを作成するためのおすすめの方法について提案しています。 背景画像はテーマデザイナーからアップロードします。

情報

以下は、レイアウトに関する詳細の説明です。

• 小さい画面（幅1024ピクセルのiPadなど）の場合、レイアウトによって自動的に背景スキンがコンテンツエリアによって完全に覆われるため、背景画像または背景色は見えなくなります。
• 大きい画面の場合、コンテンツエリアが幅1066ピクセル以上であれば両側で背景が見えるようになります。
• コンテンツエリアは、最大幅1240ピクセルに達すると、それ以上展開しなくなります。

それでは、背景画像のファイルを1つしかアップロードしていないのに、さまざまなサイズの画面に同じ背景画像を表示できるのはどのような仕組みなのでしょうか？ 画像は半分に分割され、中央のスペース（ほとんどはコンテンツエリアによって覆われる箇所）はテーマデザイナーで選択した無地の色になります。 画面が非常に大きい場合には、この無地の色が背景画像の下端と両端にも表示されます。

注意 ： 背景画像を分割したくない場合には、幅2000ピクセル以上の画像をアップロードする必要があります。こうすると、テーマデザイナーの「分割なし」(no split) のオプションを選択して、コンテンツエリアのサイズが変わっても背景スキンが分割されないようにできます。

どのサイズの画面で適合する背景スキンを作成するのは、難しい課題のように見えるかもしれませんが、 以下のヒントを参考にしていただければ、大丈夫です。

背景スキンの作成

最も良く機能するスキンを作成するには、Photoshop 、GIMP、Paintなどの画像編集プログラムを使うと便利です。

こちらの画像は、コミュニティ・セントラルのデザインで使用されている背景テンプレートです。

この画像について、5つご説明します。

• 背景スキン：背景画像が、独創的な表情を作り出しています
• ブレンド：スキンの下端と両端はブレンドされているため（画像編集プログラムのブレンドツールまたはグラデーションツールを使用）、背景色が背景画像にスムーズにブレンドされています
• マージン (余白)：コンテンツエリアの両端の赤いエリア。この赤い長方形は、ほとんどのケースで通常表示されるスキンの一部が何であるかを示しています
• コンテンツエリア：テンプレートの中央の半透明の長方形に、コミュニティのページコンテンツが表示されます。 デフォルトでは、背景はこのエリアに隠れていてまったく見えませんが、テーマデザイナーで透明度をもたらすことができます
• 分割線：スクリーンショットの中央にある黄色の線は、コンテンツエリアのサイズを調整するためにスキンが半分に分割される箇所です。 この中央の余白の背景色はテーマデザイナーで設定することができます

あなた独自の独創的な背景スキンをデザインするために背景テンプレートを利用すると役立つかもしれません！ よろしければ、下記のリンクからPhotoshopかGIMPで使用できる背景テンプレートをPSDファイルとしてダウンロードできます。

File:Background_template.psd (背景作成用テンプレート)

テーマデザイナーに関するアドバイス

• テーマデザイナーにアップロードできる画像ファイルのサイズは、300KBまでです。 このサイズにするには、ファイルの保存時に画質を下げる必要がある場合もあります
• スキンの色のブレンド／グラデーションが広ければ広いほど、背景色への移り変わりがスムーズになります。背景画像のグラデーションを作成する方法についての詳細は、ヘルプ:テーマデザイナー/グラディエントをご覧ください
• コンテンツエリアの透明度はあまり高くしないことをおすすめします。透明度が高すぎるとコンテンツが読みにくくなってしまう恐れがあります
• スキンを作成する際は、さまざまな画面解像度があることを常に考慮しましょう。異なる画面解像度に適応可能なスキンであれば、たくさんのコミュニティ・メンバーに気に入ってもらえるはずです
• コミュニティのトピックに合いそうな壁紙や画像を見つけて、オリジナルのスキンを作るヒントにしてみましょう
• 背景画像のアップロードやコミュニティのデザインには、必ずテーマデザイナーをご使用ください。 カスタムCSS経由で追加した背景は、Fandomのシステム・アップデートの影響を予期せず受ける場合があるほか、ページの読み込み時間が長くなってしまう可能性もあります
• 画面の上部ではなく下部に背景を固定したい場合は、あなたのコミュニティのMediaWiki:Wikia.cssに以下を追加してください

/* 下部固定の背景画像 */
body.background-dynamic:after,
body.background-dynamic:before {
bottom: 0 !important;
top: inherit !important;
}

関連情報

• テーマデザイナーの使い方についての詳細
• コミュニティのデザインでの色の使い方についての詳細
• ナビゲーションメニューの編集方法についての詳細

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

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