アフィリエイト 余白　バナー

＜＞系のタグは繁栄されるのでカットしています。
前回お伝えした内容はこちらでしたね！

 

a href="リンク先"　img src="画像のURL"
alt="画像の説明" width="画像の幅" height="画像の高さ"/a

 

これがバナーを表示させるコードでした！

 

これにリンク先や画像のURLなどをちゃんと入れて貼り付ければ
バナーが表示されます。

 

表示されることは間違いないのですが、ひとつ問題があります。

 

それは、何もスタイルが適用されていないので、
前後にテキストや画像があるとバナーに
ぴったりくっついてしまうという点です。

 

バナーやテキスト同士が詰まって表示されていたら、見た目がとても窮屈ですよね。
そこで、今回はこのバナーの周りに対して、余白を設ける方法をお話させて頂きます！

 

余白のことを英語では「margin（マージン）」といいますが、
余白を設けるときに使う記号も「margin」です。

 

実際のコードを見てみましょう。style="margin:◯px;"
こんな感じで記入します。

 

「margin:◯px;」の部分が、「余白が◯ピクセル」という意味になります。
これでバナーの四方に、どのくらいの余白を入れるかが設定できます＾＾
ここで新しい記号が出てきたことに気が付かれたと思います。

 

「style="◯◯"」ですね。これは、「style」という文字の通り
スタイルを記述するための記号です。

 

スタイルとは何かといいますと、画像であれば、余白や枠のライン、
表示させる位置など、デザインに関する設定のことです。

 

これを活用できるようになると、画像に影を入れたり、画像を斜めに傾けたり、
半透明にしたり、カーソルを合わせた時に、変化させる事も可能になります。
いろいろできるようになると、これが面白いんですよね～

 

ちょっと話が脱線してしまいましたが、
実際に余白を設定したバナーのコードを見てみましょう。

 

a href=""　　img src="" style="margin:◯px;"　/a

 

こんな感じでimgタグの中に画像のスタイルを記入していきます。
さて今設定した「margin:◯px;」は、バナーの四方の余白を設定する方法でした。

 

でも、実際には「上の余白だけもっと大きくしたい」
「四方じゃなくて右側だけ余白を入れたい」
「上下は要らないから左右の余白だけいれたい」

 

などいろんな状況があると思います。

 

そういう場合のために、マージンには個別の設定もできるようになっています。
ひとつずつ見ていきましょう。

 

margin-top:◯px;　→　上だけ余白を入れる
margin-right:◯px;　→　右側だけ余白を入れる
margin-left:◯px;　→　左側だけ余白を入れる
margin-bottom:◯px;　→　下だけ余白を入れる

 

「top」「right」「left」「bottom」など、どれも英単語が少し分かる方であれば
直感的に理解できるコードだと思います。

 

例えば、右と左だけに余白を入れる時は、こんな感じになります。

 

a href="ＵＲＬ"　img src="" style="margin-right:◯px; margin-left:◯px;"　/a

 

このように「style="◯◯"」の中に、半角スペースを入れて２つとも入れてしまえば大丈夫です。
では、四方の余白をバラバラに設定したいときはどうしたら良いでしょうか？

 

a href=""　img src="" style="margin-top:◯px; margin-right:◯px; margin-bottom:◯px; margin-left:◯px;"　/a

 

これでも設定できますが、長くなってしまって美しさに欠けてしまいます・・

 

こういうときは、margin:◯px ◯px ◯px ◯px;という風にスペースを空けて
４つ値を入れることで「上 右 下 左」の順番で、余白の設定ができるようになっています。
１２時の位置から時計回りになっていると、覚えるといいですね。

 

例えば、margin:10px 15px 5px 20px;とした場合は、
margin:[上] [右] [下] [左];なので、

 

上が10ピクセル、右が15ピクセル、下が5ピクセル、左が20ピクセルという形になります＾＾
ここまで大丈夫でしょうか？このように状況に合わせた書き方は他にも存在します。

 

上下と左右をそれぞれ同じ値にしたい場合
margin:◯px ◯px;　→　margin:[上下] [左右];

 

左右は同じでいいけど上下は違う値にしたい場合
margin:◯px ◯px ◯px;　→　margin:[上] [左右] [下];　こんな感じですね。

 

一度に覚えるのはちょっと大変かもしれませんが、
書き方を便利に省略できる方法があるということだけでも
頭に入れておくといつか実際に使う日が来ると思いますよ。