典型的なアフィリエイトサイトにあるようなレスポンシブのランキングです。そのままでも使えますし、改変するのもいいかと思います。
スペースの都合上、2位3位のデザインは省略しますが、草冠の画像部分が変わるだけです。
ランキング中の1位2位といった草冠の画像は当サイトのサーバー内に置いてあるものなので、もし使いたくない場合は、下記リンクから画像をダウンロード→透過加工→自社サーバにアップロード→rank_imgクラスの擬似要素内のURL部分をご変更ください。
[フリーイラスト] 一位、二位、三位のランキングのセットでアハ体験
注意
ご使用は自己責任およびコピペ前のバックアップはお願いします。ちょっと変わった色使いのランキング
ブログやアフィリエイトサイトはある程度は読者の読み飛ばしを想定しなければならないかと思いますので、補色（反対の色）を用いてCTA（ボタン部分）が目立つような作りにしました。
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_bl">
<div class="rank_ttl_bl">
<div class="ttl_bl rank_img1">ここにタイトル<a class="uri_link_bl" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_bl btn_decoration_bl" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_bl">
<div class="points_bl">
<div class="ttl_s_bl">強調部分は<span class="marker_af_rank_bl">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_bl">
<div class="ttl_s_bl">1億円お買い上げで<span class="marker_af_rank_bl">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_bl">
<div class="ttl_s_bl">今なら<span class="marker_af_rank_bl">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_bl btn_decoration2_bl" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_bl">
<div class="rank_ttl_bl">
<div class="ttl_bl rank_img2">ここにタイトル<a class="uri_link_bl" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_bl btn_decoration_bl" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_bl">
<div class="points_bl">
<div class="ttl_s_bl">強調部分は<span class="marker_af_rank_bl">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_bl">
<div class="ttl_s_bl">1億円お買い上げで<span class="marker_af_rank_bl">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_bl">
<div class="ttl_s_bl">今なら<span class="marker_af_rank_bl">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_bl btn_decoration2_bl" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_bl">
<div class="rank_ttl_bl">
<div class="ttl_bl rank_img3">ここにタイトル<a class="uri_link_bl" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_bl btn_decoration_bl" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_bl">
<div class="points_bl">
<div class="ttl_s_bl">強調部分は<span class="marker_af_rank_bl">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_bl">
<div class="ttl_s_bl">1億円お買い上げで<span class="marker_af_rank_bl">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_bl">
<div class="ttl_s_bl">今なら<span class="marker_af_rank_bl">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_bl btn_decoration2_bl" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_bl {
border: 1px solid #99a0ff;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_bl {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #CEE3F6;
}
.ttl_bl,rank_img {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_bl a{
color:#545454;
}
.rank_img1:before{
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before{
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before{
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_bl:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_bl .btn_decoration_bl {
margin: 10px auto;
background: #58ACFA;
color: #fff;
font-size: 15px;
}
.uri_link_bl {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_bl {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #FFFFFF;
border-radius: 4px;
border-bottom: 3px solid #08298A;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_bl span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_bl {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #FAAC58 0%,#FF8000 100%);
border-radius: 10px;
border-bottom: 5px solid #BF5200;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_bl {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
#wrap_affi_rank_bl .points_bl {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_bl:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #81BEF7;
font-family: serif;
font-weight: bold;
}
.ttl_s_bl {
margin: 0 0 10px;
padding: 0;
color: #2E9AFE;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_bl {
background: linear-gradient(transparent 80%, #FAAC58 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_bl .btn_decoration_bl {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_gr">
<div class="rank_ttl_gr">
<div class="ttl_gr rank_img1">ここにタイトル<a class="uri_link_gr" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_gr btn_decoration_gr" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_gr">
<div class="points_gr">
<div class="ttl_s_gr">強調部分は<span class="marker_af_rank_gr">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_gr">
<div class="ttl_s_gr">1億円お買い上げで<span class="marker_af_rank_gr">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_gr">
<div class="ttl_s_gr">今なら<span class="marker_af_rank_gr">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_gr btn_decoration2_gr" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_gr">
<div class="rank_ttl_gr">
<div class="ttl_gr rank_img2">ここにタイトル<a class="uri_link_gr" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_gr btn_decoration_gr" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_gr">
<div class="points_gr">
<div class="ttl_s_gr">強調部分は<span class="marker_af_rank_gr">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_gr">
<div class="ttl_s_gr">1億円お買い上げで<span class="marker_af_rank_gr">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_gr">
<div class="ttl_s_gr">今なら<span class="marker_af_rank_gr">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_gr btn_decoration2_gr" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_gr">
<div class="rank_ttl_gr">
<div class="ttl_gr rank_img3">ここにタイトル<a class="uri_link_gr" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_gr btn_decoration_gr" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_gr">
<div class="points_gr">
<div class="ttl_s_gr">強調部分は<span class="marker_af_rank_gr">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_gr">
<div class="ttl_s_gr">1億円お買い上げで<span class="marker_af_rank_gr">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_gr">
<div class="ttl_s_gr">今なら<span class="marker_af_rank_gr">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_gr btn_decoration2_gr" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
CSS
#wrap_affi_rank_gr {
border: 1px solid #04B431;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_gr {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #CEF6CE;
}
.ttl_gr {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_gr a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_gr:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_gr .btn_decoration_gr {
margin: 10px auto;
background: #31B404;
color: #FFFFFF;
font-size: 15px;
}
.uri_link_gr {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_gr {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #fff;
border-radius: 4px;
border-bottom: 3px solid #0B610B;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_gr span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_gr {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #AC58FA 0%,#8904B1 100%);
border-radius: 10px;
border-bottom: 5px solid #4B088A;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_gr {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_gr {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_gr:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #31B404;
font-family: serif;
font-weight: bold;
}
.ttl_s_gr {
margin: 0 0 10px;
padding: 0;
color: #31B404;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_gr {
background: linear-gradient(transparent 80%, #BCA9F5 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_gr .btn_decoration_gr {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_rd">
<div class="rank_ttl_rd">
<div class="ttl_rd rank_img1">ここにタイトル<a class="uri_link_rd" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_rd btn_decoration_rd" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_rd">
<div class="points_rd">
<div class="ttl_s_rd">強調部分は<span class="marker_af_rank_rd">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_rd">
<div class="ttl_s_rd">1億円お買い上げで<span class="marker_af_rank_rd">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_rd">
<div class="ttl_s_rd">今なら<span class="marker_af_rank_rd">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_rd btn_decoration2_rd" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_rd">
<div class="rank_ttl_rd">
<div class="ttl_rd rank_img2">ここにタイトル<a class="uri_link_rd" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_rd btn_decoration_rd" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_rd">
<div class="points_rd">
<div class="ttl_s_rd">強調部分は<span class="marker_af_rank_rd">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_rd">
<div class="ttl_s_rd">1億円お買い上げで<span class="marker_af_rank_rd">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_rd">
<div class="ttl_s_rd">今なら<span class="marker_af_rank_rd">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_rd btn_decoration2_rd" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_rd">
<div class="rank_ttl_rd">
<div class="ttl_rd rank_img3">ここにタイトル<a class="uri_link_rd" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_rd btn_decoration_rd" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_rd">
<div class="points_rd">
<div class="ttl_s_rd">強調部分は<span class="marker_af_rank_rd">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_rd">
<div class="ttl_s_rd">1億円お買い上げで<span class="marker_af_rank_rd">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_rd">
<div class="ttl_s_rd">今なら<span class="marker_af_rank_rd">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_rd btn_decoration2_rd" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_rd {
border: 1px solid #FF0000;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_rd {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #F5A9A9;
}
.ttl_rd {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_rd a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_rd:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_rd .btn_decoration_rd {
margin: 10px auto;
background: #FA5858;
color: #fff;
font-size: 15px;
}
.uri_link_rd {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_rd {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
background: #FA5858;
color: #fff;
border-radius: 4px;
border-bottom: 3px solid #B40404;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_rd span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_rd {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #00FFBF 0%,#04B486 100%);
border-radius: 10px;
border-bottom: 5px solid #088A68;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_rd {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_rd {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_rd:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #FA5858;
font-family: serif;
font-weight: bold;
}
.ttl_s_rd {
margin: 0 0 10px;
padding: 0;
color: #FA5858;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_rd {
background: linear-gradient(transparent 80%, #04B486 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_rd .btn_decoration_rd {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_yl">
<div class="rank_ttl_yl">
<div class="ttl_yl rank_img1">ここにタイトル<a class="uri_link_yl" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_yl btn_decoration_yl" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_yl">
<div class="points_yl">
<div class="ttl_s_yl">強調部分は<span class="marker_af_rank_yl">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_yl">
<div class="ttl_s_yl">1億円お買い上げで<span class="marker_af_rank_yl">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_yl">
<div class="ttl_s_yl">今なら<span class="marker_af_rank_yl">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_yl btn_decoration2_yl" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_yl">
<div class="rank_ttl_yl">
<div class="ttl_yl rank_img2">ここにタイトル<a class="uri_link_yl" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_yl btn_decoration_yl" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_yl">
<div class="points_yl">
<div class="ttl_s_yl">強調部分は<span class="marker_af_rank_yl">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_yl">
<div class="ttl_s_yl">1億円お買い上げで<span class="marker_af_rank_yl">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_yl">
<div class="ttl_s_yl">今なら<span class="marker_af_rank_yl">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_yl btn_decoration2_yl" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_yl">
<div class="rank_ttl_yl">
<div class="ttl_yl rank_img3">ここにタイトル<a class="uri_link_yl" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_yl btn_decoration_yl" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_yl">
<div class="points_yl">
<div class="ttl_s_yl">強調部分は<span class="marker_af_rank_yl">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_yl">
<div class="ttl_s_yl">1億円お買い上げで<span class="marker_af_rank_yl">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_yl">
<div class="ttl_s_yl">今なら<span class="marker_af_rank_yl">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_yl btn_decoration2_yl" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_yl {
border: 1px solid #F7D358;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_yl {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #F5F6CE;
}
.ttl_yl {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_yl a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_yl:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_yl .btn_decoration_yl {
margin: 10px auto;
background: #F7FE2E;
color: #000000;
font-size: 15px;
}
.uri_link_yl {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_yl {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #FFFFFF;
border-radius: 4px;
border-bottom: 3px solid #AEB404;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_yl span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_yl {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #A9A9F5 0%,#5858FA 100%);
border-radius: 10px;
border-bottom: 5px solid #08298A;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_yl {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_yl {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_yl:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #F5DA81;
font-family: serif;
font-weight: bold;
}
.ttl_s_yl {
margin: 0 0 10px;
padding: 0;
color: #F5DA81;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_yl {
background: linear-gradient(transparent 80%, #A9A9F5 80%);
}
@media screen and (min-width: 980px){
.rank_ttl_yl .btn_decoration_yl {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}単色のランキング
こちらは単色のランキングです。サイトの雰囲気を壊したくない場合はこちらをどうぞ。
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_mono">
<div class="rank_ttl_mono">
<div class="ttl_mono rank_img1">黒のランキング<a class="uri_link_mono" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_mono btn_decoration_mono" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_mono">
<div class="points_mono">
<div class="ttl_s_mono">強調部分は<span class="marker_af_rank_mono">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_mono">
<div class="ttl_s_mono">1億円お買い上げで<span class="marker_af_rank_mono">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_mono">
<div class="ttl_s_mono">今なら<span class="marker_af_rank_mono">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_mono btn_decoration2_mono" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_mono">
<div class="rank_ttl_mono">
<div class="ttl_mono rank_img2">黒のランキング<a class="uri_link_mono" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_mono btn_decoration_mono" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_mono">
<div class="points_mono">
<div class="ttl_s_mono">強調部分は<span class="marker_af_rank_mono">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_mono">
<div class="ttl_s_mono">1億円お買い上げで<span class="marker_af_rank_mono">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_mono">
<div class="ttl_s_mono">今なら<span class="marker_af_rank_mono">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_mono btn_decoration2_mono" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_mono">
<div class="rank_ttl_mono">
<div class="ttl_mono rank_img3">黒のランキング<a class="uri_link_mono" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_mono btn_decoration_mono" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_mono">
<div class="points_mono">
<div class="ttl_s_mono">強調部分は<span class="marker_af_rank_mono">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_mono">
<div class="ttl_s_mono">1億円お買い上げで<span class="marker_af_rank_mono">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_mono">
<div class="ttl_s_mono">今なら<span class="marker_af_rank_mono">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_mono btn_decoration2_mono" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_mono {
border: 1px solid #000;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_mono {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #E6E6E6;
}
.ttl_mono {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_mono a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_mono:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_mono .btn_decoration_mono {
margin: 10px auto;
background: #1C1C1C;
color: #fff;
font-size: 15px;
}
.uri_link_mono {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_mono {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
background: #1C1C1C;
color: #fff;
border-radius: 4px;
border-bottom: 3px solid #000000;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_mono span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_mono {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #A4A4A4 0%,#585858 100%);
border-radius: 10px;
border-bottom: 5px solid #424242;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_mono {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_mono {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_mono:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #000000;
font-family: serif;
font-weight: bold;
}
.ttl_s_mono {
margin: 0 0 10px;
padding: 0;
color: #545454;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_mono {
background: linear-gradient(transparent 80%, #FA5858 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_mono .btn_decoration_mono {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_r_b">
<div class="rank_ttl_r_b">
<div class="ttl_r_b rank_img1">青のランキング<a class="uri_link_r_b" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_b btn_decoration_r_b" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_b">
<div class="points_r_b">
<div class="ttl_s_r_b">強調部分は<span class="marker_af_rank_r_b">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_b">
<div class="ttl_s_r_b">1億円お買い上げで<span class="marker_af_rank_r_b">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_b">
<div class="ttl_s_r_b">今なら<span class="marker_af_rank_r_b">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_b btn_decoration2_r_b" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
<!--ランキング2位-->
<div id="wrap_affi_rank_r_b">
<div class="rank_ttl_r_b">
<div class="ttl_r_b rank_img2">青のランキング<a class="uri_link_r_b" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_b btn_decoration_r_b" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_b">
<div class="points_r_b">
<div class="ttl_s_r_b">強調部分は<span class="marker_af_rank_r_b">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_b">
<div class="ttl_s_r_b">1億円お買い上げで<span class="marker_af_rank_r_b">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_b">
<div class="ttl_s_r_b">今なら<span class="marker_af_rank_r_b">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_b btn_decoration2_r_b" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
<!--ランキング3位-->
<div id="wrap_affi_rank_r_b">
<div class="rank_ttl_r_b">
<div class="ttl_r_b rank_img3">青のランキング<a class="uri_link_r_b" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_b btn_decoration_r_b" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_b">
<div class="points_r_b">
<div class="ttl_s_r_b">強調部分は<span class="marker_af_rank_r_b">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_b">
<div class="ttl_s_r_b">1億円お買い上げで<span class="marker_af_rank_r_b">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_b">
<div class="ttl_s_r_b">今なら<span class="marker_af_rank_r_b">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_b btn_decoration2_r_b" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a> CSS
#wrap_affi_rank_r_b {
border: 1px solid #A9D0F5;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_r_b {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #A9E2F3;
}
.ttl_r_b {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_r_b a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_r_b:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_r_b .btn_decoration_r_b {
margin: 10px auto;
background: #5858FA;
color: #FFFFFF;
font-size: 15px;
}
.uri_link_r_b {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_r_b {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #FFFFFF;
border-radius: 4px;
border-bottom: 3px solid #08088A;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_r_b span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_r_b {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #819FF7 0%,#0431B4 100%);
border-radius: 10px;
border-bottom: 5px solid #08298A;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_r_b {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
#wrap_affi_rank_r_b .points_r_b {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
#wrap_affi_rank_r_b .points_r_b:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #5858FA;
font-family: serif;
font-weight: bold;
}
.ttl_s_r_b {
margin: 0 0 10px;
padding: 0;
color: #545454;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_r_b {
background: linear-gradient(transparent 80%, #5858FA 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_r_b .btn_decoration_r_b {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_r_g">
<div class="rank_ttl_r_g">
<div class="ttl_r_g rank_img1">緑のランキング<a class="uri_link_r_g" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_g btn_decoration_r_g" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_g">
<div class="points_r_g">
<div class="ttl_s_r_g">強調部分は<span class="marker_af_rank_r_g">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_g">
<div class="ttl_s_r_g">1億円お買い上げで<span class="marker_af_rank_r_g">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_g">
<div class="ttl_s_r_g">今なら<span class="marker_af_rank_r_g">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_g btn_decoration2_r_g" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_r_g">
<div class="rank_ttl_r_g">
<div class="ttl_r_g rank_img2">緑のランキング<a class="uri_link_r_g" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_g btn_decoration_r_g" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_g">
<div class="points_r_g">
<div class="ttl_s_r_g">強調部分は<span class="marker_af_rank_r_g">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_g">
<div class="ttl_s_r_g">1億円お買い上げで<span class="marker_af_rank_r_g">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_g">
<div class="ttl_s_r_g">今なら<span class="marker_af_rank_r_g">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_g btn_decoration2_r_g" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_r_g">
<div class="rank_ttl_r_g">
<div class="ttl_r_g rank_img3">緑のランキング<a class="uri_link_r_g" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_g btn_decoration_r_g" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_g">
<div class="points_r_g">
<div class="ttl_s_r_g">強調部分は<span class="marker_af_rank_r_g">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_g">
<div class="ttl_s_r_g">1億円お買い上げで<span class="marker_af_rank_r_g">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_g">
<div class="ttl_s_r_g">今なら<span class="marker_af_rank_r_g">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_g btn_decoration2_r_g" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_r_g {
border: 1px solid #CEF6CE;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_r_g {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #E0F8E0;
}
.ttl_r_g {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_r_g a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_r_g:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_r_g .btn_decoration_r_g {
margin: 10px auto;
background: #04B431;
color: #fff;
font-size: 15px;
}
.uri_link_r_g {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_r_g {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #fff;
border-radius: 4px;
border-bottom: 3px solid #0B610B;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_r_g span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_r_g {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom,#A9F5A9 0%,#04B431 100%);
border-radius: 10px;
border-bottom: 5px solid #0B610B;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_r_g {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_r_g {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_r_g:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #04B431;
font-family: serif;
font-weight: bold;
}
.ttl_s_r_g {
margin: 0 0 10px;
padding: 0;
color: #545454;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_r_g {
background: linear-gradient(transparent 80%, #04B431 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_r_g .btn_decoration_r_g {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_r_r">
<div class="rank_ttl_r_r">
<div class="ttl_r_r rank_img1">赤のランキング<a class="uri_link_r_r" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_r btn_decoration_r_r" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_r">
<div class="points_r_r">
<div class="ttl_s_r_r">強調部分は<span class="marker_af_rank_r_r">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_r">
<div class="ttl_s_r_r">1億円お買い上げで<span class="marker_af_rank_r_r">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_r">
<div class="ttl_s_r_r">今なら<span class="marker_af_rank_r_r">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_r btn_decoration2_r_r" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_r_r">
<div class="rank_ttl_r_r">
<div class="ttl_r_r rank_img2">赤のランキング<a class="uri_link_r_r" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_r btn_decoration_r_r" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_r">
<div class="points_r_r">
<div class="ttl_s_r_r">強調部分は<span class="marker_af_rank_r_r">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_r">
<div class="ttl_s_r_r">1億円お買い上げで<span class="marker_af_rank_r_r">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_r">
<div class="ttl_s_r_r">今なら<span class="marker_af_rank_r_r">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_r btn_decoration2_r_r" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_r_r">
<div class="rank_ttl_r_r">
<div class="ttl_r_r rank_img3">赤のランキング<a class="uri_link_r_r" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_r btn_decoration_r_r" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_r">
<div class="points_r_r">
<div class="ttl_s_r_r">強調部分は<span class="marker_af_rank_r_r">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_r">
<div class="ttl_s_r_r">1億円お買い上げで<span class="marker_af_rank_r_r">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_r">
<div class="ttl_s_r_r">今なら<span class="marker_af_rank_r_r">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_r btn_decoration2_r_r" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_r_r {
border: 1px solid #F6CEEC;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_r_r {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #F6CED8;
}
.ttl_r_r {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_r_r a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_r_r:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_r_r .btn_decoration_r_r {
margin: 10px auto;
background: #FE2E64;
color: #fff;
font-size: 15px;
}
.uri_link_r_r {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_r_r {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #fff;
border-radius: 4px;
border-bottom: 3px solid #B40431;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_r_r span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_r_r {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #FA5882 0%,#DF013A 100%);
border-radius: 10px;
border-bottom: 5px solid #B40431;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_r_r {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_r_r {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_r_r:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #FE2E64;
font-family: serif;
font-weight: bold;
}
.ttl_s_r_r {
margin: 0 0 10px;
padding: 0;
color: #545454;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_r_r {
background: linear-gradient(transparent 80%, #FE2E64 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_r_r .btn_decoration_r_r {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
強調部分はマーカーで
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
1億円お買い上げで送料無料
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
今なら99%値引き
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
※横スクロールできます。
HTML
<!--ランキング1位-->
<div id="wrap_affi_rank_r_y">
<div class="rank_ttl_r_y">
<div class="ttl_r_y rank_img1">黄色のランキング<a class="uri_link_r_y" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_y btn_decoration_r_y" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_y">
<div class="points_r_y">
<div class="ttl_s_r_y">強調部分は<span class="marker_af_rank_r_y">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_y">
<div class="ttl_s_r_y">1億円お買い上げで<span class="marker_af_rank_r_y">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_y">
<div class="ttl_s_r_y">今なら<span class="marker_af_rank_r_y">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_y btn_decoration2_r_y" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング2位-->
<div id="wrap_affi_rank_r_y">
<div class="rank_ttl_r_y">
<div class="ttl_r_y rank_img2">黄色のランキング<a class="uri_link_r_y" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_y btn_decoration_r_y" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_y">
<div class="points_r_y">
<div class="ttl_s_r_y">強調部分は<span class="marker_af_rank_r_y">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_y">
<div class="ttl_s_r_y">1億円お買い上げで<span class="marker_af_rank_r_y">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_y">
<div class="ttl_s_r_y">今なら<span class="marker_af_rank_r_y">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_y btn_decoration2_r_y" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div>
<!--ランキング3位-->
<div id="wrap_affi_rank_r_y">
<div class="rank_ttl_r_y">
<div class="ttl_r_y rank_img3">黄色のランキング<a class="uri_link_r_y" href="#" target="_blank" rel="noopener">URL.com</a></div>
<p><a class="btn_aff_rank_r_y btn_decoration_r_y" href="#" target="_blank" rel="noopener">公式サイト</a></p>
</div>
<div class="point_wrap_r_y">
<div class="points_r_y">
<div class="ttl_s_r_y">強調部分は<span class="marker_af_rank_r_y">マーカー</span>で</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_y">
<div class="ttl_s_r_y">1億円お買い上げで<span class="marker_af_rank_r_y">送料無料</span></div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
<div class="points_r_y">
<div class="ttl_s_r_y">今なら<span class="marker_af_rank_r_y">99%</span>値引き</div>
<p>ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト</p>
</div>
</div>
<a class="btn_aff_rank_r_y btn_decoration2_r_y" href="#" target="_blank" rel="noopener"><span>お買い求めはこちら</span>ここにタイトル<br>公式サイトへ行く</a>
</div> CSS
#wrap_affi_rank_r_y {
border: 1px solid #F3E2A9;
border-radius: 10px;
overflow: hidden;
max-width: 1200px;
margin: 5px;
}
.rank_ttl_r_y {
position: relative;
padding: 5px 10px;
font-size: 0;
overflow: hidden;
background: #F2F5A9;
}
.ttl_r_y {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 20px;
text-align: center;
}
.ttl_r_y a{
color:#545454;
}
.rank_img1:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank1.png) no-repeat 0 0;
}
.rank_img2:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_2.png) no-repeat 0 0;
}
.rank_img3:before {
background: url(https://4-bh.com/wp-content/uploads/2019/01/affi_rank_3.png) no-repeat 0 0;
}
.ttl_r_y:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: -30px 0 0;
width: 60px;
height: 60px;
background-size: contain;
vertical-align: middle;
}
.rank_ttl_r_y .btn_decoration_r_y {
margin: 10px auto;
background: #FACC2E;
color: #FFFFFF;
font-size: 15px;
}
.uri_link_r_y {
display: block;
margin: 0;
font-size: 13px;
font-size: 0.8rem;
vertical-align: middle;
text-decoration: none;
}
.btn_aff_rank_r_y {
display: block;
position: relative;
margin: 3% auto;
padding: 10px 40px 10px 35px;
max-width: 260px;
font-size: 1.2em;
color: #fff;
border-radius: 4px;
border-bottom: 3px solid #DF7401;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all .3s ease-out;
}
.btn_decoration2_r_y span {
display: block;
font-weight: normal;
margin-bottom: 5px;
font-size: 15px;
}
.btn_decoration2_r_y {
margin: 20px;
max-width: 100%;
background: linear-gradient(to bottom, #F5DA81 0%,#FACC2E 100%);
border-radius: 10px;
border-bottom: 5px solid #DF7401;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
text-shadow: -1px -1px 0 rgba(0,0,0,.1);
}
.point_wrap_r_y {
counter-reset: idx;
margin: 0;
padding: 30px 15px 30px;
}
.points_r_y {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 40px;
}
.points_r_y:before {
counter-increment: idx;
content: counter(idx);
position: absolute;
left: 5px;
top: -13px;
width: 35px;
font-size: 35px;
line-height: 1;
color: #FACC2E;
font-family: serif;
font-weight: bold;
}
.ttl_s_r_y {
margin: 0 0 10px;
padding: 0;
color: #545454;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.marker_af_rank_r_y {
background: linear-gradient(transparent 80%, #FACC2E 60%);
}
@media screen and (min-width: 980px){
.rank_ttl_r_y .btn_decoration_r_y {
position: absolute;
top: 50%;
right: 2%;
margin: -24px 0 0;
}
}
