Googleなどで検索していると全体的におしゃれなサイトを見たことはありませんか？
訪問者がサイト訪れる際に最初に目につくのはヘッダーとデザインです。
このままでも問題ありませんが、全体が真っ白だとちょっと味気ないですね。
例えていうなら料理の味は同じだけど盛り付けが雑なのとキレイに盛り付けられているのとでは印象がぜんぜん違います。
サイトも同様でいくら投稿記事の内容が良くてもサイトのデザインが地味だと訪問者はすぐに帰ってしまいます。
そこでサイトのデザインを良くするための背景画像を設定してみましょう。
背景画像はカスタマイズで変更が可能
背景画像を設定しない状態だと以下のようになります。
（ヘッダー部分は特に気にしないでください）
初期状態だと背景が真っ白なので、地味な印象を受けてしまう…
このままでもサイトの機能として十分使えますが、やはりデザインにはこだわりたいので背景画像を設定したいと思います。
あらかじめ画像フリーのサイトでダウンロードした背景画像を使ってサイトを着飾って見ます。
画像は以下のものを使うことにしましょう。
サイトに背景を挿入するには【外観】→【カスタマイズ】→【背景画像】の順に選択、事前に用意した背景画像をアップロードして選択することで即座に背景画像に設定できます。
設定後のサイトは以下のようになりました。
背景が設定されてデザインがだいぶ良くなりました！
背景画像を挿入しただけでもだいぶ印象が変わります。
サイトのジャンルに合わせて適切な画像を使えば、注目度が上がりますのでぜひやってみましょう。
背景画像を設定すると新たに『プリセット』という設定項目が追加されますが、ここはデフォルトのままでも問題ないでしょう。
連続した模様ではなく、風景や写真画像を背景に設定する際にはデフォルトのままだと不自然になってしまいますので、画像に合わせて設定を変えてみてください。
プリセットの設定
デフォルト
最初に設定されている背景設定です。
画像のサイズに合わせサイトの上から下まで連続で表示されるので、模様以外で設定すると不自然になってしまいます。
このような見た目に境界線がない画像を使用する時に
定しておくといいでしょう。
フルスクリーン
サイト全体に選択した画像が表示したい場合に使います。
画面いっぱいに画像が表示されるので、用意する画像はある程度サイズの大きいものでないと、小さい画像でも拡大表示されて荒くなってしまいますので注意してください。
（縦横の比率が極端にバラツキがある画像でもキレイに収まらないこともあります）
スクロールをしても背景画像は固定されたままなので、風景や写真画像を背景にしたい場合に設定しておくとベストです。
画面に合わせる
モニターのサイズに合わせて画像を拡大/縮小してくれます。
サイトを閲覧している訪問者のモニターサイズに合わせて表示してくれるので、フルスクリーンを設定するのであればこちらの設定をしておいたほうがいいです。
繰り返し
画像を縦横に繰り返し表示します。
デフォルトと同じ表示方法なので、どちらを選んでも構いません。
背景画像を設定するのは難しい？そんなことはありません！
これまでサイトに背景画像を設定するのが難しいと思ってずっと真っ白な背景を使っている管理者様はたくさんいます。
本来であればこれらのデザインを変更するにはCSSをいじらないといけないんですが、初心者はCSSをカスタマイズするなんてとてもじゃないけど難しいです。
これからCSSの勉強をしていけばいつかはできますが、肝心の記事の作成を疎かにしてしまっては元も子もありません。
アフィンガー５ではユーザーがCSSをイジることがないので、手軽にサイトのデザインを変更することができ、オシャレなサイトが出来上がります。
フリーの背景画像をダウンロードできるサイト
今回使用した背景画像は写真ACというサイトを利用しています。
画像フリー素材が豊富に用意されているのが特徴です。
無料だと1日にダウンロードできる回数に制限がありますが、通常利用をする文に困ることはないので頻繁に利用している個人や会社の担当者が多いです。
有料のプレミアムプランに加入すると無料であったダウンロード制限がなくなり、すべての画像がダウンロードし放題の上に、姉妹サイトの『イラストAC』や『シルエットAC』の画像もダウンロードすることができますので、画像を頻繁に使っているサイトであればコストパフォーマンスに優れたサイトとも言えるでしょう。
写真AC
管理人も結構お世話になっており、背景画像以外にもたくさんの画像が用意されているので、いつもお世話になっています。
