楽天アフィリエイトの商品リンクをスマホ対応・レスポンシブ化するCSS

※当サイトにはプロモーションが含まれています。

読者

楽天アフィリエイトの商品リンクを貼り付けると、スマホで見た時にはみ出します。
解決方法を教えてください。

にゃテック

おけまるだにゃ。

楽天アフィリエイトの商品リンクを「画像＋テキスト」形式で、そのままコピー＆ペーストして貼り付けるとスマホから閲覧した際に画面からはみ出てしまうことがあります。

楽天アフィリエイト「画像＋テキスト」のスマホ表示

今回、この「画像＋テキスト」の楽天アフィリエイトのリンクを、スマホ対応・レスポンシブにするCSSを作成してみました。

楽天アフィリエイトのリンクをレスポンシブ対応させるCSS

楽天アフィリエイトの商品リンクをレスポンシブ対応させるHTMLとCSSです。

HTML

<div class="nya-rakulink-wrap">
<!-- ここに「画像＋テキスト」のコードを入れる -->
</div>

<div class=”nya-rakulink-wrap”>と</div>タグで、楽天アフィリエイトの「画像＋テキスト」で表示されるソースコードを囲います。

また、サイズを選択するは「240×240」を想定します。

楽天アフィリエイト｜ソースをコピーして掲載する

続いて、CSSを下記のように記述します（ワードプレスの場合、追加CSSなどに記載します）。

CSS

@media (max-width: 520px) {
.nya-rakulink-wrap td > div[style*="border:1px"][style*="background-color"] {
width: 250px !important;
padding: 5px 0 !important;
margin: 0 auto !important;
border-color: #95A5A6 !important;
text-align: center !important;
overflow: hidden !important;
}

.nya-rakulink-wrap table,
.nya-rakulink-wrap tr {
width: 100% !important;
}

.nya-rakulink-wrap td {
display: block !important;
width: 100% !important;
}

.nya-rakulink-wrap td[style*="width:240px"],
.nya-rakulink-wrap td[style*="width:248px"] {
width: auto !important;
}

.nya-rakulink-wrap img[alt*="商品価格に関しましては"] {
display: block !important;
margin: 2px auto !important;
max-width: 246px !important;
height: auto !important;
}

.nya-rakulink-wrap p[style*="font-size:12px"] {
margin: 0 !important;
padding: 2px 6px !important;
text-align: left !important;
line-height: 1.4em !important;
word-wrap: break-word !important;
}

.nya-rakulink-wrap div[style*="margin:10px"]::after {
content: "";
display: table;
clear: both;
}

.nya-rakulink-wrap > table {
margin-left: auto !important;
margin-right: auto !important;
}
}

これを反映すると下記のように表示されます。

楽天アフィリエイト｜パソコンとスマホ表示の違い

にゃのらいと

実際にブラウザに表示させるとこんな感じになるにゃ。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

大谷選手移籍記念応援グッズデコピントートバッグ非公式でこぴんドジャース dodgers 大谷翔平 MLB Shohei Ohtani decoy dekopin 二刀流野球メジャーギフトプレゼントかわいい誕生日イラスト A4 大きめキャンバス誕生日記念日職場推し活学生保育
価格：2,200円～（税込、送料無料) (2025/9/26時点)

楽天で購入

PCとスマホで表示を切り分けるCSS

わたし自身は、PCとスマホで表示を切り替える（見えなくする）方法をよく使っているので、その方法もあわせて紹介します。

それは、CSSに以下の内容を記載します。

.show-pc {
 display: none!important;
}

.show-sp {
 display: block!important;
}

このようにしておくことで、

.show-pcは、パソコン時に表示／スマホ時に非表示
.show-spは、パソコン時に非表示／スマホ時に表示

といった制御が可能になります。

具体的には、下記のように記載します。

<div class="show-pc">
<!-- ここにパソコンで表示させたいコードを入れる -->
</div>

<div class="show-sp">
<!-- ここにスマホで表示させたいコードを入れる -->
</div>

このコードを使う利点は、たとえば PCでは「画像＋テキスト」、スマホでは「画像のみ」といった具合に、デバイスに応じて表示内容を切り替えられる点にあります。

楽天アフィリエイト｜「画像＋テキスト」と「画像」の切り替え

にゃのらいと

実際にブラウザに表示させるとこんな感じになるにゃ。

楽天で購入

さまざまな使い方ができて便利ですが、デメリットとしてはコードの可読性が下がりやすいことです。

にゃテック

そのため、共通パーツなどの機能を使うと管理しやすいにゃ。

楽天アフィリエイトのリンクを、中央寄せにする方法についてもまとめてみたので、もしよかったら読んでみてください。

楽天アフィリエイトの商品リンクを中央寄せにする方法
https://best-item.work/css/howto-rakuten-center/
通常、楽天アフィリエイトのリンクタイプが「画像とテキスト」を貼り付けると、下記のように左寄せになると思います。大谷選手移籍記念応援グッズデコピントートバッグ非公式でこぴんドジャース dodgers 大谷翔平 …