こんにちは。とまりです。
今回は、楽天アフィリエイトが、
スマホで見たときにはみ出ないようにする
一番簡単で時間がかからない対処法
をお伝えしたいと思います。
その方法はずばり！
楽天アフィリエイトのカスタマイズで調整
です。
はみ出ないようにするには、
いくつか方法があって、私も試してみたのですが、
これが一番簡単で、時間がかからない！と感じました。
詳しくは記事読んで試してみてくださいね＾＾
楽天アフィリエイトがスマホ表示ではみ出ているとは？
ブログ記事を書き、楽天のアフィリエイトリンクを貼ると、
このような見え方になるかと思います。
しっかり収まっていますね。（既にボタンは見切れていますが・・）
では次に、この画面をスマホで見てみましょう。
肝心のアフィリエイトリンクが見切れてしまっているのが、
分かりますでしょうか。
肝心の購入リンクが半分以上切れています！
実は私、しばらくこの状態で全然気が付かなかったんです・・。
ほぼ7割くらいがモバイルから見ているとされているのに、
これは失敗したなーと思いました（涙）
機会損失に繋がってしまいますねー！
早速、スマホでもきちんと画面内に表示されるように
修正していきましょう。
一番簡単な対処法「カスタマイズの修正」
それでは、早速やってみましょう！
楽天アフィリエイトがスマホではみ出ないように
表示させる方法として、一番簡単なのは、
カスタマイズの修正
です。
楽天アフィリエイトの商品リンク画面設定
各項目を下記のように設定します。
◆リンクタイプ・・画像とテキスト
◆サイズを選択する・・240×240（300×300でも大丈夫ですが、念のため小さめに設定）
◆カスタマイズする
①商品名を移動
商品名の表示箇所になります。デフォルトは右ですが、「上」か「下」で設定。
こんな感じになり、コンパクトにまとまります。
※下で設定した場合↓
②価格を表示
アフィリエイトリンクは、
価格が無い方がクリックされやすいと言われています。
チェックを外しましょう。
ちなみに価格があるとこんな感じの表示です。↓
③商品名を最小で表示
長い商品名テキストを省略して表示が出来ます。
上記の本では表示は変わらなかったので、
チェックは外しています。
④テキストを画像幅に合わせる
商品名をテキスト画像の幅に合わせて表示できます。
チェックをつけましょう。
チェックを外すと、こんな感じの見え方になります。
⑤枠を表示
これは好みなのでどちらでも良いです。
私は枠をつけていますが、外すとこんな感じになります。↓
⑥楽天で購入するボタンを表示
楽天で購入の赤いボタンの表示非表示が選べます。
チェックをつけましょう。
⑦コメント編集スペースを追加
自分のコメントを追加することが出来ます。
これは使い方次第で、効果的に働くかもしれませんね＾＾
コメントを入れるとこのように表示されます。
（初心者に超おすすめのマーケ入門書と入力してみました）↓
⑧色の選択を有効にする
背景色や価格、コメントの色を変更することが出来ます。
お好みでどうぞ。
⑨AMPタグに変更
チェックを外しましょう。
AMPとは、Accelerated Mobile Pagesといって、
モバイルページを高速表示させる仕組みのことです。
現状、AMP対応ページにおいてのみ有効となるようで、
対応していないサイトで表示させると、
デザインが崩れてしまい修正が大変になるとか。
デフォルトのままでいくのが無難ですね。
修正対応後、スマホに正しく表示されるようになった
すべての設定を完了後、ソースをコピーして
ワードプレスの「カスタムHTML」から貼り付けます。
公開したら、スマホで見てみてください。
正しく表示されています！↓
ちなみにこんな方法も試してみました。
ちなみに、検索すると良く出てくるもう一つの方法が、
画像とテキストを分けて表示させる
というものです。
この方法をメインに推しているサイトも多くあるので、
果たしてどうなのかしらと思い、試してみました。
リンクタイプの選択に注意
画像とテキストを分けて表示させる方法は下記になります。
①まず、商品リンク設定画面のリンクタイプの選択で、
「画像のみ」を選択して、ソースをコピーする。
②表示したい箇所に「カスタムHTML」を使って貼り付けする。
③次に「テキストのみ」を選択して、ソースをコピーし、
②で貼り付けたコードの下に貼り付ける。
④更新してスマホで表示させるとこのようになります。
ちょっと見え方が今一つですよね・・・汗
せめて画像の下にテキストが欲しいところです。
懺悔してしまうと、
このスマホからの見え方を修正することが、どうしても出来なくて。
カスタムHTMLの貼り付けの際に、
- 改行のコード<br>を入れる
- カスタムHTMLのブロックを２つに分ける
の2パターンを試してみたのですが、パソコンで見ると大丈夫なのに↓
スマホで表示させると下記↓のようになってしまい、
変わりませんでした。
すみません・・・。
かなり加工が必要かと思うので、やはり
カスタマイズでの調整
をおすすめします！
楽天アフィリエイトがスマホではみ出ないように：まとめ
楽天アフィリエイトが、
スマホで見たときにはみ出ないようにする
一番簡単で時間がかからない対処法
は、
楽天アフィリエイトのカスタマイズで調整
です。
テキストの表示位置を「上」か「下」に変更するだけでも、
かなり収まりが良くなります。
画像とテキストを別々に貼り付ける方法は、
加工が必要になってくるので、初心者にはあまりお勧めできません。
カスタマイズでの調整はとても簡単なので是非お試しくださいね！
アフィリエイトの手始めに自己アフィリエイトから
チャレンジするのがおすすめです＾＾
A8.netでのアフィリエイト方法もご紹介しています。
