楽天アフィリエイトの商品リンクを中央寄せにする方法

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

読者読者

楽天アフィリエイトの画像を中央寄せにしたいです。

にゃテックにゃテック

おけまるだにゃ。

通常、楽天アフィリエイトのリンクタイプが「画像とテキスト」を貼り付けると、下記のように左寄せになると思います。

 

今回は、リクエスト（お問い合わせ）をいただいたので、この楽天アフィリエイトの商品リンクを中央寄せにする方法について記事にしてみました。

text-align: centerでは中央寄せにならない理由

読者読者

<div style=”text-align: center”>楽天アフィリの「画像とテキスト」リンク</div>
と記述しても中央寄せにならないのは何故ですか？

ザックリとですが、理由は２つあって、

  1. text-align: center; はインライン要素（またはインラインブロック要素）に対して有効であること
  2. 楽天アフィリエイトのリンクが「画像＋テキスト」の場合、<table>構造になっていること

が挙げられます。

たとえば、楽天アフィリエイトのリンクタイプが「画像」の場合は、次のように記述することで中央寄せにすることが可能です。

<div style="text-align: center;">
楽天アフィリエイトの「画像」バナー
</div>

記述すると、下記のように中央寄せになります。

※このように記述しても中央寄せにならない（中央に見えない）場合は、親要素がブロック要素でありながら幅が指定されていないことが原因のことが多いです

そして今回、楽天アフィリエイトの「画像とテキスト」バナーが中央にならない大きな理由は、下記のようになっているからです。

楽天アフィリエイトのリンクが中央寄せにならない理由

これを解決するには、楽天アフィリエイトの「画像とテキスト」が記載されている<td>タグの中身の<div>タグ対して、中央寄せの記述を追加してあげることです。

読者読者

<div style=”text-align: center;”>を記述するということですか？

残念ながら、text-align: center;はインライン要素に対して有効なため、それでは中央寄せになりません。

そのため、下記のように記載します（※簡略化しています）。

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="margin: 0 auto;">
「画像＋テキスト」の情報
</div>
</td>
</tr>
</table>

つまり、<td>タグの中にある、<div>タグに対して、ブロック要素を中央に配置する、margin: 0 auto;を付け加えます。

ただし、直接アフィリエイトリンクを改変してしまうと、楽天アフィリエイトの規約にある禁止事項に該当してしまうため、CSSで調整しました。

楽天アフィリエイトの商品リンクを中央寄せするCSS

楽天アフィリエイトの商品リンクを中央寄せするHTMLとCSSです。

HTML

<div class="nya-rakuten-center">
楽天アフィリエイトの「画像＋テキスト」のソースコード
</div>

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

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

CSS

.nya-rakuten-center table td div{
margin: 0 auto !important;
}

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

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

真ん中に表示されたにゃ

ただ、ワードプレス（WordPress）などでサイトを作成している場合、テーマで予め設定されているCSSの影響を受けることがあります。

そのため、実際は、ワードプレステーマの“賢威”で、楽天アフィリエイトでコピーしたソースコードをそのまま貼り付けると、実際は下記のように表示されます。

 
にゃのらいとにゃのらいと

余計な線が表示されているにゃ。

この線に関しては、お使いのサイトの設定（CSS）に左右されるため、線が表示される人もいれば、表示されない人もいると思います。

もし、線が表示されてしまった人は、下記のCSSを記述することで消すことができるかもしれません。

CSS

/* tableのデザインをリセット */
.nya-rakuten-center table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: none;
font-size: 100%;
font: inherit;
vertical-align: baseline;
background: none;
}

.nya-rakuten-center table th,
.nya-rakuten-center table td {
border: none;
background: none;
text-align: left;
vertical-align: top;
font-weight: normal;
}

/* 中央寄せにする */
.nya-rakuten-center table td div{
margin: 0 auto !important;
}

なお、楽天アフィリエイトリンクの構造が変わってしまった場合や、楽天アフィリエイトの管理画面からデザインをカスタマイズした際は、紹介したCSSが適用されない可能性があります。

にゃテックにゃテック

デフォルトの初期設定を元に作成していますのでご了承ください。

ご支援のお願い
この記事が役に立ったと感じたら･･･

Ny@Tech（にゃテック）

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。

ご購入いただいた商品の金額の一部が私に入り、より多くの有益な記事を作るための励みになります。

楽天でのお買物はこちら
Amazonでのお買物はこちら
※商品は、ご自身の好きなものをご購入ください