還暦前からのアフィリエイト日記

　アフィリエイト広告といえば、今はグーグルアドセンス(GoogleAdSense)を浮かべます。

　でも、実際の広告の大きさは、いろいろです。

　このブログの記事のバナーは、300×250ピクセルを横に並べて表示しています。

　確か、このブログの記事の横幅は、650ピクセルです。

　スタイルシート(CSS)には、　「width:650px; /*記事*/」と記述してあります。
　テキストを書ける幅は、「padding:10px 20px 0px 20px;」と記述、上、右、下、左の順で余白を指定しされています。
　よって、左右 20px の余白があります。

　結果的に、記事欄のバナーの有効幅は、610px(ピクセル)です。
　300ピクセル幅のバナーが、二つ並べられるんです。

　バナーの間に、空白が一字分入れると、改行してしまい、縦に並んでしまいます。

---

---

　ところが、これは、パソコンでの話です。

　それも、テキストは左寄せのスタイルですが、バナーは、中央表示のタグを追加しています。
　結果的に、記事の幅の真ん中に表示れています。

　仮に、幅600pxが確保できないときにも、300　と　250px幅　のバナーをセンターに表示させます。

　と、パソコンの記事が、スマホでも表示されます。

　スマホの画面表示幅は、320px　か　480px　です。

　でも、スマホ用のデザインのスタイルシートは、縦に表示されても、横に表示させてもデザインが崩れないように、幅に合わせて表示するようにプログラミングされているようです。

　よって、広告バナーの幅もスマホを考えれば、300px幅以下を選択しておいたほうがバナーの中の文字が読みやすいのかなと思います。

　さらに、スマホで見たときに、バナーに中央表示のタグを付け加えておけば、画面の中央に上の二つのバナーが縦に並んでずれもなく表示されます。



　ちなみに、バナーがくっついているので、一文字入れてしまえば、パソコンでは見やすいですが、スマホではバナーが見えない空白一文字でずれて表示されます。

　仮にスマホ画面を横にして、幅600px以上確保できた場合は、バナーが二つ横に並んで表示されます。


　次に、横長のバナーです。

　アフィリエイトを始めたころは、↓のような、468pxの幅のバナーをよく使っていましたが、他の記事で書いたように、今や半分以上がスマホからの成果です。

　スマホの記事の幅から、はみ出るような可能性のあるバナーはすべて貼りなおしました。
　(バナーやスマホプログラムで自動で幅に合わせて表示させている場合もあるようです。)

---

---

　成果とは直接的には関わらないと思いますが、パッと見綺麗なブログ、整然としたレイアウトのほうがすきなので、自分はそうしています。

　「もうこのブログには来たくない。」とネガティブなイメージよりも、「また来て見てみようか・・・。」のほうが断然いいですよね。

---