楽天モーションウィジェットがモバイル表示で小さくなる問題とSWELL広告コードのパソコン・スマホ(PC・SP)使い分けについて

楽天モーションウィジェットがスマホで小さく表示されてしまう場合、【もしもアフィリエイト】上で作成していませんか？

スマホ画面でこのサイズのウィジェットでは小さすぎますよね？

もしもアフィリエイトから楽天モーションウィジェットを作成している場合だと、サイズ指定が反映されずこのような表示になるようです。

【結論】楽天アフィリエイト公式サイトからモーションウィジェットを作成する

楽天市場会員登録(無料)→楽天アフィリエイト(無料)

楽天アフィリエイトは、楽天市場の会員(無料登録)であれば、すぐに始められます。

まだ楽天市場の会員になっていない場合は、こちらから楽天市場の会員登録をしておきましょう。

楽天アフィリエイトからモーションウィジェットを作成する

楽天モーションウィジェット作成ページはこちらのリンクから飛べます。

パソコンとスマホ、サイズは別々に作成します。

パソコンサイズでの作成方法

1. サービスを選択する→楽天市場
2. リンクタイプを選択する→ページマッチ
3. 表示タイプを選択する→画像とテキスト
4. サイズ 728×200 を選択
5. カスタマイズする→ユーザーに合わせた商品を表示、自動で商品を動かすにチェックを入れる
6. 出来上がったソースをコピーして掲載する

スマホサイズでの作成方法

1. サービスを選択する→楽天市場
2. リンクタイプを選択する→ページマッチ
3. 表示タイプを選択する→画像とテキスト
4. サイズ 300×160 を選択
5. カスタマイズする→ユーザーに合わせた商品を表示、自動で商品を動かすにチェックを入れる
6. 出来上がったソースをコピーして掲載する

SWELLで楽天モーションウィジェットをパソコンとスマホでサイズ別に表示させる方法

上記で出来上がったソースをそれぞれSWELLのどこに、どのように貼ればいいのか？

ちなみに私は記事下にこのウィジェットが表示されるように設定しています。

ただし、2020.10.25現在SWELL側にバグが発生しているので、最後までお読みください！ 解決済み！

[SWELL]広告コードを選択すると広告表示エリアが出てくるので記事下部を選択してウィジェットを追加ボタンをクリックします。

記事下部に[SWELL]広告コードの項目が入ります。

広告タグの欄に、先ほど作成してコピーした楽天モーションウィジェットのソースを貼ります。

なお、パソコンとスマホそれぞれ別に設定する必要があります。

パソコン用の楽天ウィジェットのソースを広告タグにコピペしたら、PCのみ表示にチェックを入れます。

スマホ用の楽天モーションウィジェットのソースを広告タグにコピペしたら、SPのみ表示するにチェックを入れます。

保存を押して完了を押せばOKです！

SWELL側バグのお知らせと対策 (2020.10.27 解決済み)

2020.10.25現在

SWELL側にバグが出ているようで、[SWELL]広告コードを使ってパソコン用のウィジェットソースをPCのみ表示するにチェックを入れると、スマホにもPC用の大きくて動かないモーションウィジェットが表示されてしまいます。

2020.10.28現在

バグは解決済みとなっているので、下記の対策は必要ありません。

現時点での対策としては

パソコン用の楽天モーションウィジェットのソースに関しては、[SWELL]広告コードにではなく、カスタムHTMLで代替えする必要があります。

なので、記事下の部分に入れたPCのみ表示するにチェックを入れたパソコン用の[SWELL]広告コードはいったん外します。

そして同じように、ダッシュボード→外観→ウィジェットと進みます。

今度はカスタムHTMLを選択し、記事下部を選択してウィジェットを追加ボタンをクリックします。

記事下部にカスタムHTMLの項目が入るので、内容のところに下記のコードを入力します。

<div class="c-widget widget_swell_ad_widget pc_">【ここに広告コード】</div>

【ここに広告コード】の部分に、楽天アフィリエイト公式サイトで作成したパソコン用モーションウィジェットのソースを入れます。

保存を押して完了すればOKです！

それまでの間は、この方法を試してみてくださいね♪