アフィリサイトの基本は背景白！の理由とは？

今回は背景の設定です。

背景が変わるだけで、Webページの印象はがらりと変わります。

背景色の指定

・background-color:値

要素の背景色を設定します。

全体の背景色を設定したいときはbody、

段落や要素ごとに背景を指定したい場合は、それぞれ要素を指定することで背景色を変更できます。

値は「色コード」「色名」「transparent」で指定します。

「transparent」は透明にする場合に使います。

※色についての詳細はこちら！

背景イメージを指定する

・background-image:値

要素の背景にイメージ（画像）を設定します。

値は「イメージファイルのurl」を指定、同じサイト内の場合には相対パスで指定します。

※相対パスの詳細はこちら！

背景イメージの繰り返し

・background-repeat:値

背景イメージの繰り返しを指定します。

値	説明
repeat	イメージを全体に繰り返す
repeat-x	イメージを水平方向に繰り返す
repeat-y	イメージを垂直方向に繰り返す
no-repeat	イメージをひとつだけ配置する

背景イメージの位置を指定する

・background-position:水平方向の値 垂直方向の値

背景イメージの水平方向、垂直方向の位置を指定します。

水平方向の位置の指定

値	説明
left	左に配置
center	中央に配置
right	右に配置

垂直方向の位置の指定

値	説明
top	上に配置
center	中央に配置
bottom	下に配置

上記表の位置の名前ではなく、「数値＋単位」での配置もできます。

例）
body要素の背景イメージを繰り返さない
body要素の背景イメージを左から50px、上から30pxに配置する

・CSS

body{
background-image:http:www.～～～/;
background-repeat:no-repeat;
background-position:50px 30px;
}

・ブラウザの表示

配置を使ってテンプレートを作る！

以前div要素のところで説明をした、

テンプレートの作り方に、このイメージファイルの配置を利用できます！

例えば、

こんな感じのアイコンを、見出しに使いたい！

と思ったときは、

.ribon{
background-image:http:www.～～～/;
background-repeat:no-repeat;
background-position:10px 10px;
}

こんな感じで「ribon」というクラスを作っておけば、

要素に反映させるだけで、

こんな見出しがつくれちゃったりするのです！

数値は適当なので、調整をしなければなりませんが、

初めにイメージファイルの位置や下線、文字のフォント等を同時に指定しておけば、

要素にclassを指定するだけで一発で簡単に見出しを作成できます。

これは便利！ぜひ活用してください♪

背景白が基本！のお話

タイトルにもなっている、「思いを伝えるなら、背景は白！」のお話です。

アフィリエイトの基本として、背景は白、これは鉄則です。

なぜかって？

読みにくいからです(笑)

凝れば凝るほど、ホームページはカラフルになっていきます。

ホームページとしては「なんかすごい！」となりますが、

”肝心なことが伝えられない”ホームページになってしまうリスクがあります。

読みやすく、そして、”言いたいことを伝える”ホームページの基本は

「背景は白」に「黒、メインカラー、補色の3色の文字色」です。

黒文字は通常の文字、

メインカラーはサイトイメージに合わせた色、

補色は色相環でメインカラーのちょうど反対側に来る色です。

色相環といえば、美術で見たこともある方も多いのではないでしょうか？

これです！

メインカラーが赤の場合は緑、青の場合はオレンジ、

の様に、補色を使います。

そして、クリックしてほしいところに補色を使うことで、

クリック率も上がります！

例えばamazon様。

サイトのメインカラーは青ですよね。

購入ボタンはオレンジです。

人間には補色に目が行きやすいという習性があるそうで、

amazonもこれを利用しているわけです。

あなたのサイトにもぜひ取り入れてみてはいかがですか？？