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

楽天モーションウィジェットがモバイル表示で小さくなる問題とSWELL広告コードのパソコン・スマホ(PC・SP)使い分けについて
  • URLをコピーしました!
こんな疑問やお悩みにお応えします!
  • 楽天モーションウィジェットがスマホで小さく表示されてしまう・・・もっと大きく表示させたい
  • WordPressテーマSWELLで楽天モーションウィジェットをパソコンとスマホでサイズ別に使いわけたい
Himです♪
@himlog_com
スマホで見た表示
記事の内容

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

スマホで見た表示

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

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

ちなみに、ブログ初心者さんでまだアフィリエイト登録していない方は、もしもアフィリエイトの会員登録もしておいた方がいいですよ♪

もしもアフィリエイト公式サイト

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

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

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

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

楽天会員になったら、楽天アフィリエイトがすぐに出来る♪

楽天アフィリエイト公式サイト

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

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

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

Him

以下の通りにするとこのブログと同じ設定になるよ♪

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

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

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

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

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

Him

当ブログではWordPressテーマSWELL出会ってから使い続けています!
その理由についてはこちらをご参照ください♪

  • ブロックエディタ完全対応
  • 他テーマからの移行も簡単
  • 初心者でも安心のフォーラムあり
当ブログはSWELLのブロックエディタで作成しています。

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

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

Him

記事下に貼る方法を、初心者さん向けに解説します!

ただし、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です!

Him

このバグに関しては、SWELL開発者の了さんには伝えてあるので、次回のアップデートで修正していただけるかもしれません。(20.10.28時点で解決済み)

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

  • ブロックエディタ完全対応
  • 他テーマからの移行も簡単
  • 初心者でも安心のフォーラムあり
当ブログはSWELLのブロックエディタで作成しています。

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品をご紹介、適格販売により収入を得ています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
記事の内容