Bloggerでは普通に設定するとPC用とスマホ(モバイル)用ではかなり違ってきますが、アフリエイトは一般に広告主が指定した 『<iframe> ・・・・・ </iframe>』のHTML構文で挿入するためイメージと違うことが多々発生します。
手順は「広告主を選択」→「広告用バナーのサイズを選択」→「挿入するHTMLコードを作成しそのコードをコピー」→「BloggerのHTML画面で貼り付け」ですが、このサイズ選びが意外と苦労します。
以下、私が最初に失敗した例です。挿入するタグの幅サイズは一般的に
120/160/230/300/468/728/．．．．
等が用意されています。最近のスマホは画面の幅として600ピクセル以上はあるので、取り合えず最大の468ピクセルを選んで挿入しました。スマホ画面以内なので丁度いい大きさになっていると思ってたのですが、後日、実際に確認すると挿入したタグだけ画面をはみ出していました。フォントや画像は自動で最適な大きさになっていたのですが．．．．
ネットで調べてみるとスマホのブラウザの解像度は普通、320(240や360もあるらしいが)ピクセルで表示する仕様になっているらしく、iframe構文以外自動で縮小されるようですが「iframe」は無視されるようです。
CSS/HTMLでiframe構文制御も設定できますが、結構、幅と高さの比率を自動設定するのは簡単ではない。もともと、簡単に挿入して楽しみたいだけなので手をかけない方法はないかを考えました。それは小さいタブを2枚連続して挿入する方法です。そうすると、PCでは横1列に、スマホでは自動改行されて縦に2列に表示されはみでることはありません。
ブログのデザインにできるだけマッチしたアフリエイトタブを挿入したいための施策ですが、手をかけないで「まあまあ」のレイアウトになると思います。つまり、300ピクセル以下のタブを選んで連続で挿入すると余りレイアウトを気にしないでもスマホで表示されます。
単純にタブを挿入すると左側に寄ってしまいます。中央に配置するには色々方法はあるようですが、私はHTMLで
<center>
<iframe>
．．．．．．．．．
．．．．．．．．．
</iframe>
</center>
これで中央に配置されます。
想定通りにスマホで表示されてることを祈ります。
アフリエイトタブ用コードは時々、JavaScript形式でコード化されてます。しかし、本文にbloggerのテンプレートのHTMLの編集画面で挿入しても表示されません。調べてみると、まじないのコードで挟まないとスクリプト文が削除されてしまいます。
<script ．．．．>
//<![CDATA[
．．．．
//]]>
</script>
追記
上記のように以前は書きましたが、普段書く、作成画面のHTML編集ではそのままコピーして貼り付けても問題ありません。以下の構文のアフリエイトのバーナー(468サイズって書いてあったのを選択)をそのままコピーしてどうなるかの確認をしてみました。但し、この場合はページ毎に貼り付ける必要があります。
<script language="javascript" src="．．．．．"></script>
<noscript>．．．．． </noscript>
これをブラウザで表示してみました。表示されるときはすべてプログレッシブ対応で縮小されてました。
[PC]
Opera OK
Firefox OK
IE OK
Vivaldi OK
Vivaldiでいつもこのブログは書き込んでいますが、編集画面では表示されませんが、プレビュー画面では表示されました。
[Android]
Opera mini 圧縮モードOK、非圧縮モードはNG
Chrome OK
Operaは圧縮モードの時は一度、Operaのサーバーを経由するため、ちょっと違った挙動をするようです。また、広告排除ソフトのプラグインなどをブラウザにインストールしていると表示されなくなるので確認時は注意が必要です。
また、挿入しても直ぐには表示されない(反映されない)ので気をつけてください。
上記の色々なブラウザで確認した限りは、編集時を除いて問題ないかもしれませんね、最近のbloggerのブログは．．．
バリューコマーズのMyLinkで画像を作成して貼り付けると以下のコメントが出ることがあります。私場合はYahooでMyLinkを試したときに置きました。Bloggerが初期設定でhttps化したために起きたようです。
「このページには HTTP リソースが含まれているため、ブログを HTTPS 経由で閲覧すると、混在コンテンツによって安全性やユーザー エクスペリエンスが低下する恐れがあります。」
色々試しましたが、なかなか～～。警告で「表示しない」をクリックしると一応、表示されてます。Yahooも2016年3月までには「http⇒https」にすべて変更になるんぼでそれまでは我慢かな。アマゾンや楽天はすでにhttps化が終ってるのに遅れてますね。
色々な画像サイズを表示するとPCとスマホでどういう風に変わるか実験しました。こちらのページも参考にして下さい。アフリエイトの画像との関係も少し理解できるかもしれません。ただし、bloggerで用意されたレイアウトをそのまま利用する条件ですが、見るブラウザによってすこし変わるかもしれませんが．．．
アフリエイトタブはやはりブログの主役になってはいけないと思います。さりげなくブロク記事に馴染んで配置出来るように心掛けたいかも。
