[Javascript]商品リンク用のテンプレートサンプル

自分のブログでも実際に使っている商品リンク用のテンプレートを作成したので、ここにメモしておきます。

・HTML

<div style="width: 100%; padding: 0.5em 1em; margin: 3px; border: solid 2px #95ccff; border-radius: 8px;">
<div style="width: 160px; margin: 10px 5px 10px 5px; display: inline-block; padding: 10px;">
<p>画像！！</p>
</div>
<div style="width: 50%; margin: 10px 5px 10px 5px; display: inline-block; padding: 10px; vertical-align: top;">
<p>『商品名××××』</p>
<p>[メーカー名]</p>
<section class="rinker-affiliate">
<ul>
<li>
<div class="bg-a">
  <p class="amazonlink btn-or light-button">
    <a href="">
      Amazon
    </a>
  </p>
</div>
</li>
<li>
<div class="bg-a">
  <p class="rakutenlink btn-or light-button">
    <a href="">
      Rakuten
    </a>
  </p>
</div>
</li>
<li>
<div class="bg-a">
  <p class="yahoolink btn-or light-button">
    <a href="">
      Yahoo!
    </a>
  </p>
</div>
</li>
</ul>
</section>
</div>
</div>

・CSS

.rinker-affiliate ul {
   border: none;
   list-style-type: none;
   display: inline-flex;
   display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 5px auto;
   padding: 0 5px 0 5px;
   width: 100%;
} 
.rinker-affiliate ul li {
    width: 20%;
    min-width: 150px;
    padding: 0 0 0 10px;
    display: block;
/*    padding-right: 20px;*/
}
.rinker-affiliate ul li:first-child {
    margin-bottom: 0;
}

p.btn-or a {
    display: block;
    width: 100%;
    min-width: 100px;
    margin: 0 auto;
    padding: 5px 0;
    cursor: pointer;
    font-size: 1.0em;
    color: #fff;
    text-align: center;
    text-decoration: none !important;
    border-radius: 5px;
    -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    font-weight: 200 !important;
    letter-spacing: -2px;
}
.light-button a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    border: 0.5px solid rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,0.3);
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}
.light-button a:before {
    display: block;
    position: absolute;
    z-index: -1;
    left: -30%;
    top: -60%;
    content: "";
    width: 100px;
    height: 300px;
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.3)),color-stop(100%,rgba(255,255,255,0)));
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,.3),rgba(255,255,255,0) 100%);
    animation: shiny 2s infinite linear;
    -webkit-animation: shiny 2s infinite linear;
    -moz-animation: shiny 2s infinite linear;
}

.rinker-affiliate ul li a:hover dd small {
    color: #FFF!important;
}
.rinker-affiliate ul li p.amazonlink a{
  background-color: #f6a306;
  /*box-shadow: 0 4px 0 #682929, 0 12px 0 rgba(0,0,0,0.2);*/
}
.rinker-affiliate ul li p.amazonlink a:hover{
	background-color: #ffdfb5;
  color: #000;
}
.rinker-affiliate ul li p.rakutenlink a{
  background-color: #c22b2b;
  /*box-shadow: 0 4px 0 #682929, 0 12px 0 rgba(0,0,0,0.2);*/
}
.rinker-affiliate ul li p.rakutenlink a:hover{
	background-color: #ffc3c3;
  color: #000;
}
.rinker-affiliate ul li p.yahoolink a{
  background-color: #6001d2;
  /*box-shadow: 0 4px 0 #682929, 0 12px 0 rgba(0,0,0,0.2);*/
}
.rinker-affiliate ul li p.yahoolink a:hover{
	background-color: #cfb4ec;
  color: #000;
}

以上です。