10分で楽天アフィリエイトをレスポンシブ対応する方法

楽天のモーションウィジェットがデフォルトでレスポンシブに対応しておらず、スマホで見たときに枠からはみ出してしまっていたため、レスポンシブ対応できるようにしました。

その他のバナー広告などにも基本的には対応できるため、参考になったら嬉しいです。

どのように実装したかについては下記の詳細を記載しますのでよろしければ一読ください。

楽天アフィリエイトのレスポンシブ対応方法

1. 楽天アフィリエイトのモーションウィジェットの作成方法
2. wordpressへの組み込み方法
3. レスポンシブ対応方法

楽天アフィリエイトのモーションウィジェットの作成方法

まずは下記のURLから楽天アフィリエイトの登録をおこなってください。

Rakutenアフィリエイト

簡単なキャプチャを添付します。

トップページから「楽天会員に新規登録」を新規登録をおこないます。

そのあとは必要事項を入力していただき、規約に「同意して次へ」を押します。

これで会員登録は完了となります。その後サイトにログインをしていただき下記から自身のサイトURLを登録するため、「サイト情報の登録」をクリックします。

その後、サイトの扱う商品であったり、サイトの掲載内容についてを設定し、完了します。サイトは複数設定可能でサイトごとに登録できます。　 ※下記の画像は私の設定内容です。

次に楽天のモーションウィジェットを作成してきます。下記キャプチャのリンクをクリックしてください。　

あとは枠の部分を自分の好きなバナーに設定していただければ左のプレビューでどのように表示されるかが確認することができます。　

そうするとサイトの下部にリアルタイムで設定修正した内容のバナーが勝手に生成されます。

wordpressへの組み込み方法

ここからはwordpressを例に実際にバナーを表示する設定の説明をします。wordpressの場合「カスタムHTML」という機能があり、簡単に貼り付けることが可能です。

キャプチャで外観　→　ウィジェットの順進んでください。

ウィジェット画面へ遷移したら枠にカスタムHTMLが表示されているため、「サイドバー」などにドラック&ドロップをしてください。

また先程楽天アフィリエイトでコピーしてきたバナーを「内容」の中に貼り付けて保存すれば完了です。

実際にサイトを確認いただけますと本記事の右サイドや記事の下部にあるような広告を表示させることができます。

これで表示までの説明は終わりです。

レスポンシブ対応方法

それではレスポンシブ対応するため、方法を説明してきます。簡単に説明しますとCSSでブラウザの幅を見て、表示するバナーを出し分ける方法をとります。

なんでバナー側でレスポンシブ対応していないのかですが、多分GDN、YDNなどで国際標準規格としていろいろ定義されてて面倒くさいんだと思われます。※詳細の事実は知らずあくまで個人の見解で適当な戯言などで流してください

以下がYahoo、Googleのヘルプになるのでよかったら見てみてください。

Yahoo!広告ヘルプ(YDN)

Google広告ヘルプ(GDN)

余談はさておきレスポンシブ対応の方法を記載します。またwordpressを例とって説明をします。

まずはメニューの「外観」→「テーマエディター」を開いてください。

その後、ここいじるとwordpressがぶっ壊れるかもしれんから気をつけろ(意訳)という警告がでてきますが了承いただき、枠の「スタイルシート(style.css)」をクリックします。※もちろんぶっ壊れても一切の責任は負いませんので自己責任でお願いします。

クリックしたら現在のwordpressのデザインを司っているファイルになるため、膨大な量のCSSコードの記述がありますが、一旦このページすべてをコピペし、バックアップを取得しておいてください。

バックアップが完了しましたらCSSの最下部に下記のCSSを書き加えてください

コメントアウトでも記載しておりますが、数値部分を変更していただければバナーの大きさに応じて表示したい内容と変更することができます。

ここまでできましたら今度は先程設定したカスタムHTMLをいじっていきます。「外観」→「ウィジェット」まで画面遷移を進めてください。

可変に表示したいバナー分カスタムHTMLをキャプチャのようにドラックアンドドロップしてください。実際に埋め込むHTMLは下記に記載します。

1番目

2番目

3番目

それぞれ楽天アフィリエイトのモーションバナー部分は作成して、貼り直してください。これでブラウザの大きさにより表示されるバナーがある一定で変わって表示がされるようになります。

サンプルは本記事の下バナーをブラウザの大きさを変えてみてみてください。