現在はカエレバやRinkerなどは使わずに、カッテネを参考に「CSS＋HTML」で商品を紹介しています。
もちろん、CMSを使っていないHTMLサイトでも使うことができます。
CSS
モバイルではボタンの幅は 85% になるようにしています。
hover などはなるべく少なくしてシンプルにしているつもり。
まだ微妙な箇所があるかと思いますが、検証にキリがないので変だったら直してください。
/***kattene***/
.kattene {
width:100%;border: 1px solid rgba(0, 0, 0, 0.1);
padding:10px;box-sizing:border-box;}
.kattene__imgpart {
text-align:center;width:100%;}
.kattene__btns {
width:100%;margin-top:0.5em;text-align:center;}
.kattene__btns:after {
display:block;clear:both;visibility:hidden;}
.kattene__btns .btn {
width:100%;padding-left:0;padding-right:0;}
/*button*/
.btn {border-radius:0px;border:0;color:#fff;
cursor:pointer;display:inline-block;font-size:1.0em;
font-weight:500;line-height:1;padding:8px 3px 8px 3px;
transition:background-color 150ms ease;vertical-align:middle;}
.btn:disabled:hover {background-color:#313131;color:#fff;}
@media screen and (max-width:900px) {
.btn {padding:10px 3px 10px 3px;letter-spacing:0.05em;}
}
/*button-red*/
.btn.__red {background-color:#e60033;margin-bottom:10px;}
/*button-orange*/
.btn.__orange {background-color:#8b7b04;margin-bottom:10px;}
/*button-blue*/
.btn.__blue {background-color:#0000ff;margin-bottom:10px;}
/*button-green*/
.btn.__green {background-color:#0BBD80;margin-bottom:10px;}
/*button-pink*/
.btn.__pink{background-color:#e1325b;margin-bottom:10px;}
/*button-brown*/
.btn.__brown {background-color:#6f4b3e;margin-bottom:10px;}
/*mobile*/
@media screen and (max-width:900px) {
.kattene {display: table;width:100%;font-size:1.1em;}
.kattene__imgpart img{margin-top:10px;margin-bottom:10px;}
.kattene__btns.__four div{width:85%;margin-left:auto;margin-right:auto;}
.kattene__btns.__three div{width:85%;margin-left:auto;margin-right:auto;}
.kattene__btns.__two div{width:85%;margin-left:auto;margin-right:auto;}
.kattene__btns.__one div{width:85%;margin-left:auto;margin-right:auto;}
}
/*PC*/
@media screen and (min-width: 901px) {
.kattene {display: table;width:100%;}
.kattene__imgpart {display:table-cell;width:20%;}
.kattene__imgpart img{margin-top:40px;margin-bottom:40px;}
.btn:hover, .btn:focus {background-color:#313131;color:#fff;}
.kattene__infopart {display:table-cell;vertical-align:top;
position:relative;padding-left:20px;width:77%;}
.kattene__btns div {float:left;margin-bottom:5px;}
.kattene__btns {position: absolute;bottom:0;box-sizing:
border-box;padding-right:10px;}
.kattene__btns.__four div {width:23.8%;}
.kattene__btns.__four div:not(:last-child) {margin-right:1%;}
.kattene__btns.__three div {width:32%;}
.kattene__btns.__three div:not(:last-child) {margin-right:1%;}
.kattene__btns.__two div {width:48.5%;}
.kattene__btns.__two div:not(:last-child) {margin-right:1%;}
.kattene__btns.__one div {width:32%;}
.kattene__btns.__one div:not(:last-child) {margin-right:1%;}
}
/***kattene_end***/HTML
記事中の表示させたい場所に HTML を貼り付けます。
自分が使いやすいように HTML のテンプレートを作成しておくと便利です。
当サイトでは、商品を紹介する時は「楽天、Amazon、Yahoo!」くらいしか使わないのでこのようにしました。
商品HTML
<div class="kattene"> <div class="kattene__imgpart"> <a href="【メインのURL】" rel="sponsored nofollow"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"> <a href="【メインのURL】" rel="sponsored nofollow">【タイトル】</a></div> <div class="kattene__btns __one"> <div> <a class="btn __red" href="【楽天のURL】" rel="sponsored nofollow">楽天市場で見る</a></div> <div> <a class="btn __orange" href="【AmazonのURL】" rel="sponsored nofollow">Amazonで見る</a></div> <div> <a class="btn __blue" href="【Yahoo!のURL】" rel="sponsored nofollow">Yahoo!で見る</a></div> </div> </div> </div>
旅行HTML
<div class="kattene"> <div class="kattene__imgpart"> <a href="【メインのURL】" rel="sponsored nofollow"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"><a href="【メインのURL】" rel="sponsored nofollow">【タイトル】</a></div> <div class="kattene__description">【住所】 <a href="【地図のURL】" rel="sponsored nofollow">[地図]</a></div> <div class="kattene__btns __three"> <div><a class="btn __red" href="【楽天トラベルのURL】" rel="sponsored nofollow">楽天トラベル</a></div> <div><a class="btn __blue" href="【Yahoo!トラベルのURL】" rel="sponsored nofollow">Yahoo!</a></div> <div><a class="btn __orange" href="【じゃらんのURL】" rel="sponsored nofollow">じゃらん</a></div> <div><a class="btn __green" href="【るるぶのURL】" rel="sponsored nofollow">るるぶ</a></div> <div><a class="btn __pink" href="【一休のURL】" rel="sponsored nofollow">一休</a></div> <div><a class="btn __brown" href="【JTBのURL】" rel="sponsored nofollow">JTB</a></div> </div> </div> </div>
リンクの数は随時調整する
表示させる項目の数によって「one・two・three・four」に変更します。
<div class="kattene__btns __three">
完成
レイアウトはトマレバのパクり。
PCから見た場合
モバイルから見た場合
商品紹介が主なサイトの場合
上記の CSS のままだとパソコンから見た時に上下の幅の空きが目立ちます。
/*PC*/ のココの部分の数値を、
.kattene__imgpart img{
margin-top:40px;
margin-bottom:40px;
}このくらいにするときれいに表示されるかと思います。もしくは2つCSSを書いて分けても良いですよね。
.kattene__imgpart img{
margin-top:10px;
margin-bottom:5px;
}PCから見た場合。
モバイルから見た場合。
補足
角を丸くしたい場合
CSS に追記します。
border-radius:20px;
ボタンを増やしたい、色を変えたい
この部分をコピペすると増やせますし、好みのカラーコードに変更することもできます。
/*button-red*/
.btn.__red {
background-color:#e60033;
margin-bottom:10px;
}細かい部分の数値
テーマや予め設定してある文字の大きさによって結構見た目が変わってきます。
「自由度が高いのが自作CSSの強み」なので好きなように変更してください。
面倒くさい？
慣れれば5分程度でアフィリエイトリンクを設置できます。
宿に関しては項目が多いのでもう少し時間がかかりますが、ぶっちゃけ「楽天トラベル」「Yahoo!トラベル」だけでも良いかと。ここだけの話、他の会社はそんなに売れないです。
AMPには気を付けて
画像の部分が崩れる場合があるのでAMPリンクから確認すると良いです。
rel="sponsored nofollow"とは？
Google にて広告などの有料リンクに推奨されています。尚、以前は rel="nofollow" でした。
現在も rel="nofollow" でも問題はないですが気が付いた時に変えておいた方が良いかも。
アフィエイトリンク他にも作りました
モノトーンでシンプルな紹介リンクも作ってみた
最後に、カエレバを止めた理由とRinkerを使わない理由
カエレバ/トマレバは「posted with カエレバ」と表示されるのが地味に嫌だったのと、コードが作成できない時があったり上手くリンクされていない時もあったので止めました。
その点「CSS＋HTML」で自作したモノは不具合が生じることはほとんどありません。
尚、別に否定はしていません。ただの個人的な感想です。
だけど、楽なモノって何かしら裏があるんですよホント。
たとえば、もしもの「かんたんリンク」はAMPでは動作しません。意味ないです。
Rinkerも便利そうですが「Rinker」と表示されますし、プラグインの更新が止まったら使えなくなります。
プラグインは不具合が生じた時や更新しなくなった時の対応の方が死ぬほど大変なので、個人的には最初から「CSS＋HTML」をおすすめします。
