カエレバなどは使わない！
アフィリエイトリンクをCSS＋HTMLで作成する方法
CSS＋HTMLで表示させているので、CMSを使っていないHTMLサイトでも使うことができます。
こちらは 楽天・Amazon・Yahoo! のみの人に向いています。
PC で見た時は幅70%、モバイルで見た時は幅90%にしてあります。
HTML
<div class="monotone"> <div class="monotone__imgpart"> <a href="【メインのURL】" rel="sponsored nofollow"><img src="【画像URL】"></a></div> <div class="monotone__infopart"> <div class="monotone__title"><a href="【メインのURL】" rel="sponsored nofollow">【タイトル】</a></div> <div class="monotone__btns __three"> <div><a class="btn __rakuten" href="【楽天のURL】" rel="sponsored nofollow">楽天</a></div> <div><a class="btn __amazon" href="【AmazonのURL】" rel="sponsored nofollow">Amazon</a></div> <div><a class="btn __yahoo" href="【Yahoo!のURL】" rel="sponsored nofollow">Yahoo!</a></div> </div> </div> </div>
CSS
/***affiliate monotone***/
.monotone {width:100%;border:1px solid #313131;padding:10px;box-sizing:border-box;}
.monotone__imgpart{text-align:center;width:100%;}
.monotone__btns{width:100%; margin-top:0.5em;text-align:center;}
.monotone__btns:after{display:block;clear:both;visibility:hidden;}
.monotone__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:0.9em;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:480px) {
.btn {padding:8px 3px 8px 3px;letter-spacing:0.05em;}
}
/*button-rakuten*/
.btn.__rakuten {background-color:#313131;margin-bottom:10px;}
/*button-amazon*/
.btn.__amazon {background-color:#313131;margin-bottom:10px;}
/*button-yahoo*/
.btn.__yahoo {background-color:#313131;margin-bottom:10px;}
/*mobile*/
@media screen and (max-width:480px) {
.monotone {width:90%;margin-left:auto;margin-right:auto;font-size:0.9em;}
.monotone__imgpart img{margin-top:10px;margin-bottom:10px;}
.monotone__title{padding-left:10px;padding-right:10px;}
.monotone__btns.__three div{width:70%;margin-left:auto;margin-right:auto;}
}
@media screen and (min-width:481px) {
.monotone {display:table;width:70%;margin-left:auto;
margin-right:auto;font-size:0.9em;}
.monotone__imgpart {display:table-cell;width:30%;}
.monotone__imgpart img{margin-top:10px;margin-bottom:5px;margin-left:5px;}
.btn:hover, .btn:focus {background-color:#313131;color:#fff;}
.monotone__infopart {display:table-cell;vertical-align:top;
position:relative;padding-left:25px;width:50%;}
.monotone__title{margin-top:15px;}
.monotone__btns div {float:left;margin-bottom:5px;}
.monotone__btns {position: absolute;bottom:0;box-sizing:border-box;padding-right:10px;}
.monotone__btns.__three div {width:31%;}
.monotone__btns.__three div:not(:last-child) {margin-right:1%;margin-bottom:15px;}
/***affiliate monotone_end***/
