アフィリエイト

アフィリエイトリンクを綺麗に貼るデザインテンプレートをカスタマイズしてみた

こんにちはまことです!

 

アフィリエイトリンクを記事に貼り付けるとき、どのようなデザインで貼り付けていますか?

今や様々なブログパーツでアフィリエイトリンクを綺麗に貼ることが出来ますよね!

Amazonや楽天でよく使われている「カエレバ」や、アプリのリンクで使われている「アプリーチ」などです。

 

私もカエレバやアプリーチにはお世話になっています。

そして、私がAmazonや楽天、アプリ以外のアフィリエイト商品リンクの貼り付けに使っているデザインをご紹介します。

 

カスタマイズデザイン集はこちらです。

[kanren postid=”459″]

アフィリエイトデザインリンク

ブログテンプレート「ストーク」

・コード書き換え不要!

・そのままでおしゃれなテンプレート!

・書くことだけに集中!

オススメ

上のリンクは当ブログの記事に使っている、アフィリエイトリンクのデザインです。

元はこちらのブログで紹介されているブログパーツを利用させて頂いています。

このブログパーツを元にデザインをカスタマイズしています。

 

コードの貼り付けにはこちらのプラグインが便利です。

[kanren postid=”181″]

デザインをカスタマイズ

HTML

元々のコードは商品の名前に「h4」が使われています。ワードプレスで目次表示のプラグイン「TOC+」などを利用していると、記事の途中に入れたアフィリエイトリンクの「h4」が目次に表示されてしまいます。

そこで私はh4を使わずにrtitleに書き換えています。これで目次に表示されてしまう状況を改善しました。

私と同じデザインで良いという方はこちらのコードをそのままお使いください。

[aside type=”boader”]

【HTML】

<div class=”item-box”>
<div class=”item-box-left”>ここに商品の画像を貼ってください</div>
<div class=”item-box-right”>
<div class=”rtitle”>ここに商品の名前を書いてください(リンクでも可)</div>
<p>ここに商品の概要を書いてください</p>
<div class=”item-btn”>ここにアフィリエイトリンクを張り、ボタンに表示したいテキストに書き換えてください</div>
<div class=”item-label”>オススメ</div>
</div>
</div>

[/aside]

CSS

CSSはリンクの右上にある「オススメ」のラベル部分を改良しています。商品タイトルが長いとラベルと被ってタイトルが見えなくなることがありました。

そこでラベルを少し透明にして、万が一タイトルと被ってもタイトルがちゃんと見えるようにしました。

その他、スマホ表示のときに商品画像が左に寄っていたので、真ん中に表示させるように修正しました。

[aside type=”boader”]

【CSS】

/* アフィデザインリンク */
.rtitle {
font-weight: bold;
margin: 10px 0;
padding: 15px;
background: #1bd19a;
color: #fff;
border-radius: 5px;
max-width: 100%;
font-size: 18px;
}

.item-box {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 5px #ccc;
margin: 10px 0 20px 0;
}

.item-box:after {
content: ”;
display: block;
clear: both;
}

.item-box img {
max-width: 100%;
}

.item-box > div {
float: left;
width: 50%;
}

.item-box-left {
padding-left: 0;
text-align: center;
}

.item-box-right {
position: relative;
}

 

.item-box-right p {
font-size: 14px;
}

.item-box-right .item-btn img {
display: none;
}

.item-box-right .item-btn {
font-size: 20px;
text-decoration: none;
letter-spacing: 1px;
display: block;
text-align: center;
color: #fff;
background-color: #00bf46;
border: 1px solid #009b46;
border-radius: 5px;
box-shadow: 0 3px 5px #e9e9e9, 0 3px rgba(45,45,45,0.08);
transition: all .3s;
}

.item-box-right .item-btn:hover {
margin: 3px 0 -3px;
box-shadow: 0 1px 3px #e9e9e9, 0 3px rgba(45,45,45,0.08);
transition: all .3s;
}

.item-box-right .item-btn a {
width: 100%;
text-decoration: none;
color: #fff;
display: block;
padding: 10px 0;
transition: all .3s;
}

.item-box-right .item-btn a:hover {
background-color: #fff;
border-color: #009b46;
border-radius: 5px;
color: #00bf46;
transition: all .3s;
}

.item-box-right .item-label {
background-color: rgba(251,192,2,0.7);
display: inline-block;
border-radius: 50%;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
color: #fff;
font-weight:bold;
position: absolute;
top: -50px;
right: -10px;
transform: rotate(10deg);
box-shadow: 1px 1px 5px #ccc;
}

@media screen and (max-width: 720px) {
.item-box > div {
width: 100%;
}

.item-box-right {
margin-top: 40px;
}

.item-box-right .item-label {
right: -20px;
top: -30px;
}
}

[/aside]

細かなカスタマイズ方法

「オススメ」ラベル部分

右上に表示されている「オススメ」ラベルのカスタマイズ方法です。

表示文字はhtmlの【<div class=”item-label”>オススメ</div>】を4文字以内で書き換えればOKです。「1位!」や「激安!」などでも良いですね!

CSSのデザイン変更は以下の通りです。

[aside type=”boader”]

【CSS】

.item-box-right .item-label {
background-color: rgba(251,192,2,0.7);  /* RGB背景色 0.7の数値で透明度の調整 */
display: inline-block;
border-radius: 50%;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
color: #fff;  /* 文字の色 */
font-weight:bold;  /* 太文字 */
position: absolute;
top: -50px;  /* 表示位置調整 */
right: -10px;  /* 表示位置調整 */
transform: rotate(10deg);
box-shadow: 1px 1px 5px #ccc;
}

[/aside]

商品タイトル部分

右上の商品タイトルのデザイン変更です。私はブログのテーマカラーと合わせているので、お好きな色に変更してご利用ください。

[aside type=”boader”]

【CSS】

.rtitle {
font-weight: bold;  /* 太文字 */
margin: 10px 0;
padding: 15px;
background: #1bd19a;  /* 背景色 */
color: #fff;  /* 文字色 */
border-radius: 5px;
max-width: 100%;
font-size: 18px;  /* 文字サイズ */
}

[/aside]

リンクボタン

右下のリンクボタンデザインの変更です。色やホバーエフェクトの変更が出来ます。

[aside type=”boader”]

【CSS】

.item-box-right .item-btn img {
display: none;
}

.item-box-right .item-btn {
font-size: 20px;  /* 文字サイズ */
text-decoration: none;
letter-spacing: 1px;
display: block;
text-align: center;
color: #fff;  /* 文字色 */
background-color: #00bf46;  /* 背景色 */
border: 1px solid #009b46;  /* 枠線太さ・色 */
border-radius: 5px;  /* 角を丸める */
box-shadow: 0 3px 5px #e9e9e9, 0 3px rgba(45,45,45,0.08);
transition: all .3s;
}

.item-box-right .item-btn:hover {
margin: 3px 0 -3px;
box-shadow: 0 1px 3px #e9e9e9, 0 3px rgba(45,45,45,0.08);
transition: all .3s;
}

.item-box-right .item-btn a {
width: 100%;
text-decoration: none;
color: #fff;  /* 文字色 */
display: block;
padding: 10px 0;  /* ボタン太さ */
transition: all .3s;
}

.item-box-right .item-btn a:hover {
background-color: #fff;  /* マウスオン背景色 */
border-color: #009b46;  /* マウスオン枠線色 */
border-radius: 5px;  /* マウスオン角を丸める */
color: #00bf46;  /* マウスオン文字色 */
transition: all .3s;
}

[/aside]