[PR] 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コミュニティのお知らせ

ワードプレスのことが分からなすぎてすぐに立ち止まってしまう…

そんなあなたのために有料ワードプレス専門のコミュニティ「MastePress®︎ーマスタープレスー」を作りました。

すぐに質問できる環境で
ワードプレス構築が加速する!

WordPress専門コミュニティ
「MasterPress」の主宰をしています!

ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。
●WordPressコミュニティ『MasterPress』運営
SEO検定2級
●チャンネル登録13,600人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

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