楽天アフィリエイトの商品リンクがスマホではみ出るのを修正

楽天アフィリエイトの商品リンクはレスポンシブ対応してないので、スマホで見るとはみ出てしまって、何の商品リンクか分からなくなってしまうことがあります。
楽天アフィリエイトの商品リンクがレスポンシブ対応してないのがそもそもの問題なんですが、なんで対応しないんでしょうね。

レスポンシブ対応で修正する方法

レスポンシブ対応とは、Webブラウザを表示するデバイス（パソコンとかスマホとか）の表示可能サイズに合わせて、適切なサイズのコンテンツを表示する仕組みのことです。どのサイズだったらどうするという横サイズの取り決めのことをブレイクポイントと言い、パソコンだったら無制限、タブレットだったら1024、スマホだったら599、の横サイズだったらどういう表示にするかという取り決めで、CSSと言うスタイルシートで定義します。

その上で、パソコン用の商品リンク、タブレット用の商品リンク、スマホ用の商品リンクを用意し、ブレイクポイントで各商品リンクを表示する、しないの制御を行います。

言わばこの対応こそが正しいレスポンシブ対応なのですが、スタイルシートの準備はともかく、商品リンクを各デバイス用のを貼る作業がめんどくさいので、ぶっちゃけおすすめしません。（スマホではみ出ない商品リンクを作りたいだけなのに、いちいちそんな手間をかけてられない）と言うのが正直なところです。

商品リンクをカスタマイズする方法

楽天アフィリエイトの商品リンクをデフォルト状態で表示するとこんな感じです。

おうちでファミチキセット 楽天限定販売 フライドチキン チキンセット 冷凍チキン 揚げ油 お買いものパンダグッズ貰える　ファミリーマート　通販 価格：2837円（税込、送料無料) (2021/10/6時点) 楽天で購入

パソコンで表示すると問題ないですが、スマホで表示すると以下の様に右側が見切れています。

楽天商品リンクの「商品リンクを作成」ページで「カスタマイズ」をクリックすると、いくつかの設定項目が表示されます。

商品画像の右に商品名を表示しているからはみ出ている訳なので、「商品名を移動」を「下」にします。
「価格を表示」も、価格を見ただけで逃げられたら困るので、チェックを外して非表示にします。
「テキストを画像幅にあわせる」と、パソコンでは商品画像の幅で商品名を表示しようとして不細工なので外します。
この設定をするだけで、こんな感じになります。

おうちでファミチキセット 楽天限定販売 フライドチキン チキンセット 冷凍チキン 揚げ油 お買いものパンダグッズ貰える　ファミリーマート　通販 楽天で購入

パソコンで見ると、ちょっと間延びした感じで イマイチですが 、スマホで見ると以下の様に表示され、見切れていません。
スマホで見切れる方が問題なので、これで良しとします。簡単やし。

結局、楽天アフィリエイトの 「カスタマイズ」 はこんな感じになりました。
この設定は保存されるので、別の商品リンクを作ろうとした時もこの設定が維持されているので、どんどん商品リンクが作成できますね！