WordPressを作ることに疲弊したくない方向けのWordPress専門コミュニティ「MasterPress®︎」

楽天アフィリエイトの広告がスマホ表示だとはみ出る時の対処法!

読者さん

楽天アフィリエイトって、楽天で売られているものならなんでもアフィリエイトできて超便利〜♪

ゆか

そうですよね♪

でも、あなたの楽天アフィリエイトリンク、スマホで見てください!!リンクが見切れてますよ!!!

楽天アフィリエイトって、楽天で売られている商品だったら、なんでも紹介してアフィリエイト報酬を得られます。

ですので、たくさんの方が利用しているのですが、よくあるのが、楽天のアイフィリエイトリンクがスマホで見ると見切れている・・・

こんな風に、残念なことになってしまっている方をよく見かけます。

今回は、スマホで見た時も楽天アフィリエイト広告がちゃんと表示される方法を、アフィリエイトブログ作りを教える講師をしているわたしが詳しくお伝えします!!

ちなみに、楽天アフィリエイトをこれから始めようと思っていてこの記事に辿り着いた方は、こちらの記事では、「楽天アフィリエイトが稼げる秘密」を公開しています。
参考:楽天アフィリエイトが初心者におすすめの理由!クッキーの仕組みを知れば誰でも稼げる!

アフィリエイト初心者さんはこちらもチェック!

●アフィリエイト広告には、バナーとテキストの2種類があります。どっちを使った方が効果的なクリックされやすいのか?と気になる方も多いはず・・・

そんな気になるアフィリエイト広告について解説しました

●楽天やAmazonの商品リンクを一緒に表示させたい…と思う方向けに、「Pochipp(ポチップ)」というプラグインをご紹介しました。

楽天アフィリエイト広告がスマホではみ出ないようにする対処法

楽天アフィリエイトリンクを綺麗に表示させる方法はめちゃくちゃ簡単です。早速、対処法をお伝えしますね♪

  1. 「画像だけ」広告を貼る
  2. 「テキストだけ」広告を貼る

以上、この2つです(^O^)/

めっちゃ簡単ですよね。w

でも、これだけだとイマイチよくわからないので、実際にどうやって貼ればいいのかを図解入りで解説します。

その前に、スマホ表示でおかしくなってしまう理由をお伝えさせてください。

それを最初に知っておくとその後の工程がスムーズになりますので♪( ´▽`)

楽天アフィリエイト広告のスマホ表示がはみ出る理由

では、最初に貼っていたちゃんぽんの広告↓

このように表示されてしまう理由は、あなたが楽天アフィリエイトで広告を取得する際に、「画像とテキスト」を選択してリンクを取得しているからです。

どうしても「画像とテキスト」を選択してしまうと、PCではちゃんと表示されるのですが、スマホでは、はみ出てしまうと言うわけなのです。

楽天アフィリエイト広告をワードプレス投稿で綺麗に貼る方法(図解入り解説)

では、ここからスマホでも綺麗に見える楽天アフィリエイトリンクの貼り方を伝授します!!

手順はこのようになっています。

  1. 「画像のみ」リンクを取得
  2. 「テキストのみ」リンクを取得

では、やってみましょう!!

「画像のみ」リンクを取得

まずは、楽天アフィリエイトで取得したい商品の「画像のみ」広告を選択してコードを取得してください。

このコードをブログの紹介したい場所に貼り付けをします。

「テキストのみ」リンクを取得

次に「画像のみ」と同様に「テキストのみ」の広告コードを取得してください。

このコードを最初の「画像のみ」のコードの下に貼り付けします。

こんな感じになります↓

ブロックエディター での画像になりますが、「カスタムHTML」ブロックを使っています。

そして、実際の表示はこうなります↓

リンガーハット 野菜たっぷりちゃんぽん 6食(冷凍)【送料無料】【6食具材付】【※のし不可】
読者さん

良いんだけど、縦並び?もうちょっとスッキリさせたいなぁ・・・

このような要望にお答えをし、もう少し工夫した広告の貼り方をお伝えします(^O^)/

楽天アフィリエイト広告をスッキリと貼る方法(図解入り解説)

では、このように表示できるようにするやり方をお伝えしますね。

読者さん

これなら良い感じ♪

※ここで紹介する方法は、お使いのWordPressテーマによって多少違います。ですが、ほとんどのテーマでできるかと思いますので、やってみてください。

ここからは、わたしが使っているWordPressテーマの「STORK19(ストーク 19)」での解説になりますm(_ _)m

まず、「ボックス」ブロックを探して追加します。

ボックスを追加するとこんな感じで枠ができます。

この枠の中に、画像コードとリンクコードを並べて表示させていきます。

並べて表示させたい時に使うブロックが「カラム」になります。

ボックスブロックの中に、カラムを追加します。

わたしは、カラムは大体「2カラム」の「等分」を選んでいます。

ボックスの中に「カラム」を追加するとこんな感じです。

このようになったら、左と右に「カスタムHTML」を追加して、コードを貼り付けしてください。

ちなみにわたしは、右側の「カスタムHTML」の下にボタンを追加してみました♪

いかがでしょうか?

多分、最初、ブロックエディター の操作がうまくいかないかもしれません。

これは何度か作っていくと慣れるので、チャレンジしてみてください。

一度作ったブロックは再利用ブロックにしておくと、後から呼び出して使えるので、そちらもうまく使ってくださいね(^O^)/

再生ブロックとは?

再利用ブロックとは「「Gutenberg(グーテンベルク)」」独自の機能になります。
作成したブロックを「再利用ブロック」として登録すると、他のページでも同じ内容のブロックを呼び出して再利用することができます。
また、「再利用ブロック」で登録した内容を変更したり修正したりすると、同じ再利用ブロックを利用した全てのページの再利用ブロックが変更されます。

まとめ:ワードプレス投稿方法で解決できます!

今回は、ワードプレスで投稿した楽天アフィリエイト広告がスマホでは、うまく表示されない時の解決方法を詳しく解説しました(^O^)/

最後に対処法をおさらいすると・・・

  1. 「画像だけ」広告を貼る
  2. 「テキストだけ」広告を貼る

以上の2つで簡単に解決することができます。

WordPressを始めたばかりの初心者さんは、投稿のブロックとかもなかなか上手く使えないかもしれませんが、使っていくことで徐々に慣れていきます。

ですので、頑張っていきましょう♪( ´▽`)

有料WordPressコミュニティのお知らせ

ワードプレスの構築を1人で頑張るのが不安な方に、有料ワードプレス専門のコミュニティ「MastePress®︎ーマスタープレスー」を運営しています。

1人でWordPressに取り組むのは不安
そんな方におすすめ!!


お子さんとの時間を優先させながら
自分の力で稼げるママになって欲しい

メルマガでは、これからブログを始めたいと思っているパソコン苦手な女性のために、ブログの作り方をお届けしています。

ブログ作りの基本的なことから大事なポイントなど、分かりやすく丁寧に必要な知識を毎日配信中!

メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


ABOUT US
ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

詳しいプロフィールはこちら>>