>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

コピペで!アフィリエイト商品リンクをツールを使わずCSSのみでデザイン

CSS
この記事は約5分で読めます。

はじめに

アフィリエイトで商品を紹介する際のリンクカードデザインとして

ツールでは カエレバ、プラグインでは Rinker など便利なものががあります。

カエレバサンプル

カエレバサンプル

※これは画像です。

Rinkerサンプル

5560_33

※これは画像です。

ツールやプラグインのデメリット

カエレバは、1商品ごとに(ブラウザで)ツールを使ってリンクを作成し、過去に利用したリンクの保存などが出来ない事で、商品紹介が増えてくると管理が難しい

Rinkerは、商品リンクは簡単にWordPressの記事編集から挿入できますが、最初の設定が面倒だったり、その後の管理も大変になりがち。

更には、これらのツールの提供が終了してしまった場合は悲惨です。最悪、すべてのリンクをやり直す必要があったり、どんどん進化するWordPressに古くなったプラグインが対応できなくなる可能性もあります。

Amazonにもアフィリエイト用のプラグインがあったのですが、2020年2月に提供が終了してしまいました。

 

ちなみにRinkerの使い方は以下をご覧ください。

完全解説!商品リンクプラグインRinker(リンカー)が超便利!設定と使い方
- 2019/10 追記 - AmazonPA-APIの利用ポリシー変更(2019年1月23日)、PA-API v5への移行(2019/12~)については、以下にまとめています。 商品リンクをCSSのみで利用する方法は以下をご覧ください。 ...

 

そこで、うちはこういったツールの利用をすべてやめました。

これらのツールを使わずにCSSのみで実現するデザインサンプルです。

デザインサンプル

スケーター ステンレス タンブラー 300ml スヌーピー
製品サイズ :7.2 x 7.2 x 13.6 cm、160 g

 

HTML

コードを表示
<table class="table_amazon">
<tbody>
<tr>
<td style="width: 30%;">画像</td>
<td style="width: 70%;">説明文など
<div><span class="btn_amazon">Amazonで探す</span> <span class="btn_rakuten">楽天で探す</span> <span class="btn_yahoo">Yahooで探す</span></div></td>
</tr>
</tbody>
</table>

 

CSS

コードを表示
/************************/
/*商品リンクテーブル*/
/************************/
.table_amazon {
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.8;
border: solid 1px #d9d9d9;
}
.table_amazon td {border: none;font-size: 14px;}
/*Amazon、楽天、Yahooボタン サイズ固定*/
.btn_amazon,.btn_rakuten,.btn_yahoo,.btn_blue,.btn_blue2 {
display: inline-block;
margin-top:6px;
text-align: center;
font-size: 14px;
line-height: 2;
text-decoration: none;
background: #fff;
border-radius: 8px;
transition: .4s;
}
.btn_amazon,.btn_rakuten,.btn_yahoo {
width:110px;}
/*Amazon*/
.btn_amazon {
background: #ff9900;
color: #fff;
}
.btn_amazon:hover {
border: solid 1px #ff9900;
background: #fff;
color: #ff9900;
}
/*楽天*/
.btn_rakuten {
background: #bf0000;
color: #fff;
}
.btn_rakuten:hover {
border: solid 1px #bf0000;
background: #fff;
color: #bf0000;
}
/*Yahoo*/
.btn_yahoo {
background: #410093;
color: #fff;
}
.btn_yahoo:hover {
border: solid 1px #410093;
background: #fff;
color: #410093;
}

 

上記のコードをお好きなように改編してご利用下さい。

 

枠線に影をつける例

 

画像 説明文など

Amazonで探す 楽天で探す Yahooで探す

上記コードの「.table_amazon」内に以下の1行を追記。

box-shadow: 0px 3px 5px 0px #333; /*枠線の影*/

 

カラーの変更

ボタンの色や、文字の色、枠線の色などを変更する場合は、以下も参考にして下さい。

 色別カラーコード

マカロンビビッドパステル伝統色和色セーフ色名 配色パターンサンプル

 

 

もしもアフィリエイトについて

もしもアフィリエイトの「かんたんリンク」を利用した際の、デザインカスタマイズは以下をご覧ください。

もしも「かんたんリンク」カスタマイズ

※これは画像です。

コピペで!もしもアフィリエイトのかんたんリンクをカスタマイズ5パターン
はじめに もしもアフィリエイトの便利な機能「かんたんリンク」のボタンや枠線などのデザインをカスタマイズする方法です。 コピペのみで簡単に使っていただけるコードを置いています。 デフォルト表示 文字リンクホバー時(アンダーラインが出ます) 商...

 

コメント

タイトルとURLをコピーしました