AFFINGER6で背景画像を変更する方法｜初心者でも迷わず設定できる完全ガイド

AFFINGER6（アフィンガー6）では、サイト全体や特定エリアの 背景画像を自由に変更 することができます。

しかし初心者の方の中には、

• 背景画像はどこで変更するの？
• 画像を設定したのに反映されない
• おしゃれに見せるコツが分からない

と悩んでいる方も多いのではないでしょうか。

この記事では、AFFINGER6初心者でも迷わずできるように、背景画像の変更方法・おすすめ設定・注意点までを分かりやすく解説します。

AFFINGER6で背景画像を変更できる場所

AFFINGER6では背景画像をエリアごとに細かく設定することが可能です。

背景画像に関する設定は「外観」→「カスタマイズ」→「背景」で行うことができます。

背景は４つのパターンで設定が可能です。

①　背景画像	背景に写真などの画像を設定できます。
②　背景色	背景色やパターンを変更できます。
③　headerエリア	headerエリアの背景を設定できます。
④　header以下のエリア	header以下のエリアの背景を設定できます。

背景画像を設定する基本手順

①　背景に写真などの画像を設定する

画像を設定するには「カスタマイズ」→「背景」→「背景画像」で設定します。

使用したい画像をアップロードするだけで背景画像として設定できます。

背景に空の画像を設定するとこんな感じです。

画像を斜めに切り取ってオシャレに変更することもできます。

設定の「斜め背景画像（上部）」の項目で画像をアップロードするだけです。

斜め背景は上部と下部で設定可能です。

斜め背景画像（上部）に画像を設定するとこんな感じです。

斜め背景画像（下部）に画像を設定するとこんな感じです。

②　背景色やパターンを変更する

単純に背景色やパターンを変更したい場合は「カスタマイズ」→「背景」→「背景色」で設定します。

色とスタイルを自由に変更することが可能です。

パターン「水玉」だとこんな感じです。

パターン「ボーダー（斜）」だとこんな感じです。

③　特定エリアに背景画像を設定する

• 「カスタマイズ」→「背景」→「headerエリア」
• 「カスタマイズ」→「背景」→「header以下のエリア」

の設定項目で特定エリアに背景画像を設定することができます。

「headerエリア」の設定項目では「サムネイルスライドショーエリア」・「ヘッダーバナーエリア」の背景を設定可能です。

サムネイルスライドショーエリアの背景を設定するとこんな感じです。

ヘッダーバナーエリアの背景を設定するとこんな感じです。

「header以下のエリア」の設定ではheader以下のエリアで背景を変更可能です。

背景画像におすすめのサイズと注意点

おすすめ画像サイズ

初心者の方は、以下を目安にすると失敗しにくいです。

• 形式：JPEG または PNG
• 横幅：2000〜2200px
• 高さ：1200px前後

画像サイズで注意するポイント

• 画像が小さいと荒く表示される
• 画像が大きすぎると表示速度が遅くなる

「高画質・軽量」 を意識しましょう。

スマホ表示で失敗しないためのポイント

背景画像は PCでは良く見えても、スマホで崩れる ことがあります。

以下を必ずチェックしてください。

• スマホ表示で文字と被っていないか
• 重要な被写体が中央に来ているか
• 縦長すぎないか

AFFINGER6はレスポンシブ対応ですが、スマホ表示の確認は必須 です。

背景画像が反映されないときのチェックポイント

背景画像が表示されない場合、次を確認してください。

• 「公開」ボタンを押しているか
• キャッシュが残っていないか
• 他の背景設定と競合していないか
• スマホ・PC表示の切り替えを確認したか

AFFINGER6はカスタマイズ性能が高く、設定項目が多く他の背景設定と競合する場合が結構あります。

まとめ｜AFFINGER6の背景画像変更でサイトの印象は大きく変わる

AFFINGER6の背景画像変更に関してまとめると

• 背景画像はカスタマイザーから簡単に変更できる
• 初心者は背景色の変更やパターンの変更から設定するのがおすすめ
• 画像サイズとスマホ表示を必ず確認する
• シンプルなデザインが失敗しにくい

背景画像を上手に使うことで、サイトの第一印象・信頼感・滞在時間 を大きく向上させることができます。

まずはシンプルな背景画像から試してみてください。

AFFINGER6に興味のある方は公式サイトをチェックしてみてください。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。