楽天モーションウィジェットがスマホ表示だと小さくて動かない！対処方法紹介します

こんにちは！みいちゃんです！！

今回の記事は

について紹介していきます。

楽天モーションウィジェットとは、このような感じで訪れたユーザーに合わせて商品を表示してくれるものです。

ブログを運営されている方にとっては、マストなアイテムになっていきますよね。

しかしこれがスマホなどのモバイルでは小さく表示されてしまいました・・・

そして自動で動く仕様にしたのに動かない・・・

この問題をある方法で試したら解決しました。皆さんもぜひ試してみてください。

問題①：モバイルのみ小さく表示されてしまう

PC

今回設定をしてみたところ、PCではきちんと表示されました。

モバイル

しかし、スマホなどのモバイルでは小さく表示されてしました。

小さすぎて何の商品が表示されているのかもわからない・・・

他のサイズを試してみましたが、どのサイズもモバイルはこの大きさになってしまいます。

原因：もしも版の楽天モーションウィジェットを利用した

出典：もしもアフェリエイト

今回私は「もしもアフェリエイト」の「楽天モーションウィジェット」を使用していました。

つまり、もしもアフェリエイトが提携している楽天モーションウィジェットということですね。

これがスマホのサイズに適応していなかったんです・・・

対処法：楽天アフェリエイトの楽天モーションウィジェットを利用する

楽天アフェリエイトから楽天モーションウィジェットを使うと解消されました！

楽天アフェリエイトとは

出典：楽天アフェリエイト

楽天が運営するアフェリエイトサイトです。

楽天会員であれば、住所や名前の登録不要ですぐに始めることができます。

楽天にまだ登録していない方はこちら

楽天モーションウィジェットの利用方法（PC用）

PC用とモバイル用で２つ設定してくださいね！

step
1楽天アフェリエイトサイトにアクセスする

出典：楽天アフェリエイト

楽天アフェリエイトサイトはこちらから飛ぶことができます。

楽天アフェリエイト

「楽天モーションウィジェット」をクリック

step
2PV用のソースを作成する

出典：楽天アフェリエイト

「サービスを選択する」「リンクタイプを選択する」「表示タイプを選択する」「サイズ」を選んでください。

ちなみにわたしは「728×200」にしました！

出典：楽天アフェリエイト

下にスクロールしていくと作成したソースをコピーできます。

step
3WordPressに貼り付ける

「外観」→「00_STINGERカスタムHTML」→「広告・Googleアドセンス用336px(A)」→「ウィジェットの追加」をクリック

このような画面が開くので、コピーしたソースを貼り付けて「タイトルを出力しない」にチェック、「Save」をクリックする。

step
4完成

PC用にきちんと登録されました！

楽天モーションウィジェットの利用方法（モバイル用）

step
1楽天アフェリエイトにアクセス

出典：楽天アフェリエイト

楽天アフェリエイトサイトはこちらから飛ぶことができます。

楽天アフェリエイト

「楽天モーションウィジェット」をクリック

step
2モバイル用のソースを作成する

出典：楽天アフェリエイト

「サービスを選択する」「リンクタイプを選択する」「表示タイプを選択する」「サイズ」を選択。

出典：楽天アフェリエイト

下にスクロールしてソースをコピーする。

step
3WordPressに貼り付ける

「外観」→「00_STINGERカスタムHTML」→「広告・スマホ用記事下のみ」→「ウィジェットの追加」をクリック

このような画面が出てくるので、先ほどコピーしたソースを貼り付ける。

「タイトルを出力しない」にチェック、「Save」をクリック。

step
4完成

モバイルもきちんとした大きさで登録されました！！

問題②：楽天モーションウィジェットが動かない

今度は見切れて動かないー！

対処法：モバイルのサイズは300×160で設定

見切れたり、動かない原因はサイズでした

モバイルで設定するときは300×160で設定するようにしてください。

他のサイズだと見切れたり、動かなくなってしまいました。

まとめ

いかがでしたか？

楽天モーションウィジェットは、Googleアドセンスが受かっていない人にとってはとても助かるツールです。

しっかりと設定していきましょうねー！

ポチッと応援おねがします♪

にほんブログ村