前記事（【Google AdSense】クソ広告はブロックだ！！）で述べたように、アドセンス広告にクソ広告が目立つようになってきたので、怪しい広告は地道にブロックしつつ、アドセンスへの依存を減らしていく方向を模索することにしました。そこでまずは楽天アフィリエイトを導入することに決めました。


楽天アフィリエイトの難点

Googleアドセンスと比べた時、楽天アフィリエイトのデザイン上の難点はレスポンシブ対応ではないことです。


楽天アフィリエイトの広告は、ソースコードを生成する際にサイズを選択するので、そのサイズで固定されてしまいます。つまり300×160サイズの広告はPC画面であろうとスマホ画面であろうと同じ300×160サイズで表示されるのです。これは困った問題です。PC画面に合わせてサイズを決めると、スマホ画面では大きすぎて広告が画面からはみ出して一部しか見えなくなってしまいますし、スマホ画面に合わせてサイズを決めたら逆にPC画面では小さすぎて見にくくなってしまいます。広告として致命的です。


そこで自力でなんとか対策を考えてみたので、備忘録を兼ね、以下に紹介します。ただし、動作や効果を保証するものではありませんし、この対策を推奨するものでもありません。実施の際はすべて自己責任でお願いします。


バナー広告の場合は簡単

楽天アフィリエイトの広告にはいくつか種類がありますが、バナータイプは比較的単純でバナー画像にアフィリエイトリンクが埋め込まれているだけです。画像サイズが固定されているため、たとえば468×60の横長サイズを選択すると、PC画面にはやや小さく、スマホ画面では大きすぎてはみ出してしまいます。まさに帯に短し襷に長し。

PC画面の468×60バナー

スマホ画面の468×60バナー

これを解決するには、画面サイズに合わせて画像を拡大縮小すればいいわけです。幸い、バナー広告の場合は単純な画像なので、僕の乏しいjavascriptの知識でもなんとかなります。


バナータイプの楽天アフィリエイトのソースコードは以下のようになっています。

<a href="https://hb.afl.rakuten.co.jp/hsc/・・・・・・・" 
target="_blank" 
rel="nofollow sponsored noopener" 
style="word-wrap:break-word;">
<img src="https://hbb.afl.rakuten.co.jp/hsb/・・・・・" 
border="0" 
style="margin:2px" 
alt="" title="">
</a>

基礎的なHTMLの知識だけでわかる内容です。imgタグがあるので、width属性を100%、hight属性をautoに指定すれば、バナー画像の横幅は画面（より正確には親要素）の横幅と同じ大きさになります。少し小さくしたければ90%にしてもよいでしょう。imgタグの中を以下のように変えればよいのです。

<img src="https://hbb.afl.rakuten.co.jp/hsb/・・・・・" 
width="100%"
height="auto"
border="0" 
style="margin:2px" 
alt="" title="">

こうすればPC画面ではPC画面の横幅に、スマホ画面ではスマホ画面の横幅に合わせたサイズでバナーが表示されます。

PC画面の幅に調整されたバナー

スマホ画面の幅に調整されたバナー

モーションウィジェットの場合は条件分岐で

モーションウィジェットは、そのサイトや閲覧者に応じた複数の商品画像が自動的に回転表示されるタイプの広告です。ソースコードにimgタグもないので、バナー画像のサイズを調整するように簡単にはいきません。


また、なぜなのかはわかりませんが、モーションウィジェットをスマホで表示する場合は、300×160サイズでなければ自動回転表示が機能しません。そういう仕様なのかもしれませんが、楽天アフィリエイトのサイトにも特に説明はありません。


ともかく、スマホでは300×160サイズにするしかないのですから、PCの場合とスマホの場合で条件分岐するしかないでしょう。


モーションウィジェットのソースコードは以下のようになっています（300×160サイズの場合）。

<script type="text/javascript">
rakuten_design="slide";
rakuten_affiliateId="・・・・・・";
rakuten_items="ctsmatch";
rakuten_genreId="0";
rakuten_size="300x160";
rakuten_target="_blank";
rakuten_theme="gray";
rakuten_border="off";
rakuten_auto_mode="on";
rakuten_genre_title="off";
rakuten_recommend="on";
rakuten_ts="・・・・・・・";
</script>
<script type="text/javascript" src="https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js?20230106">
</script>

上のソースコードのうち、rakuten_designからrakuten_tsまでが発行の際の設定によって変わる部分です。なので、この部分を、PCかスマホかによって条件分岐すればよいということです。


サイズ728×200で発行したソースコードのrakuten_designからrakuten_tsまでをA、サイズ300×160で発行したソースコードのrakuten_designからrakuten_tsまでをBで表すことにすると、以下のように条件分岐できます。


<script type="text/javascript">
var windowWidth = $(window).width();
if (windowWidth > 728) {
A
}
else {
B
}
</script>
<script type="text/javascript" src="https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js?20230106">
</script>

var windowWidth = $(window).width();によってwindowWidthに画面の幅の値を代入し、windowWidthの値によって条件分岐します。画面の幅が728より大きい場合はサイズ728×200のモーションウィジェットの設定が、画面の幅が728以下の場合はスマホを想定して、サイズ300×160のモーションウィジェットの設定が読みこまれるわけです。


こうすることによって、PC画面では728×200のモーションウィジェットが、スマホ画面では300×160のモーションウィジェットが表示されモーションもきちんと機能します。

条件分岐でPC画面に表示したモーションウィジェット

条件分岐でスマホ画面に表示したモーションウィジェット


以上、あまり洗練されたやり方ではないと思いますが、楽天アフィリエイトのサイズを曲りなりにもレスポンシブにする方法の紹介です。