アフィリエイト

ECサイトっぽいアフィリエイト商品紹介レイアウト(CSS)

今日の献立は、CSSだけで作るECサイトっぽい商品紹介レイアウトです。

出来上がりはこんな感じ。

これはシリウスでも使えるので、ぜひ試してみてくださいね!

 

タイトル

商品説明を書きます。

初回価格
980円
 

このレイアウトのウリは、スマホでもちゃんとキレイにレイアウトされることです。ただCSSをモバイル用を追加しているだけですが。。。

どちらかと言うとモバイル表示を重視しています。上の見本は、モバイルで表示してみてくださいね。

 

では早速ご紹介していきましょう。

 

HTMLはこれ。

<!-- 外枠 -->
<div class="g-waku">

<!-- 左枠 -->
<div class="g-left">
   <div class="g-img"><img src="https://ganchan.info/wp-content/uploads/2017/05/RS%5EADB42WtsT76uEvYWfhPpWDuQOSORD4-.jpg">
   </div>
</div>

<!-- 右枠 -->
<div class="g-right">
<div class="entry-title">タイトル</div>

<div class="price-wrapper">
   <div class="kakaku-btn">初回価格</div>
   <div class="item-price">980円</div>
</div>
<div class="clear"></div>

<div class="c-view-btn">
   <a href="#" target="_blank" rel="nofollow">商品を見る</a>
</div>

</div>
</div>

 

CSSはこれ。

.g-waku{
  border:1px solid #ccc;
  overflow: hidden;
  width: 100%;

  /*padding: 3%;*/

}
.g-left{ float: left; overflow: hidden; width: 35%;}
.g-right{float: left; overflow: hidden; width: 59%; }


.g-img{
    /*border: 1px solid #ccc;*/
    /*float: left;*/
    /*width: 40%;*/
  }

  .g-img img {
    width: 90%;
    padding: 10px;
}

  .k-view-btn{
    font-weight: 30px;
    text-align: center;
    font-size: 15px;
    float: left;
    /*margin-bottom: 20px;*/
  }


  .k-view-btn a{
      margin: 0 auto;
      border: 3px solid #ff6633;
      color: #fff;
      text-decoration: none;
      background-color: #ff6633;
      display: block;
      padding: 3px;
      width: 100%;
      border-radius: 5px;
  }
  .k-view-btn a:hover{
      color: #fff;
      border: 3px solid #ccc;
      background-color: #ccc;
      text-decoration: none;
  }


/*初回価格ボタン*/

.price-wrapper{
  overflow: hidden;
}

.kakaku-btn{
    font-weight: 20px;
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
    border: 1px solid red;
    color: #fff;
    text-decoration: none;
    background-color: red;
    display: block;
    padding: 5px;
    width: 180px;
    border-radius: 5px;
    float: left;
  }



.item-price{
    font-size: 20px;
    color: red;
    font-weight: bold;
    /*margin: 5px ;*/
    padding-left: 10px;
    float: left;
    padding-top: 5px;


  }


/*キャンペーンを見るボタン*/

  .c-view-btn{
    font-weight: 30px;
    text-align: center;
    font-size: 20px;
    float: left;
    margin-top: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    width: 97%;

  }


  .c-view-btn a{
      margin: 0 auto;
      border: 3px solid #ff0099;
      color: #fff;
      text-decoration: none;
      background-color: #ff0099;
      display: block;
      padding: 3px;
      width: 100%;
      border-radius: 5px;
  }
  .c-view-btn a:hover{
      color: #fff;
      background-color: #ccc;
      border: 3px solid #ccc;
      text-decoration: none;
  }

  .clear{
    clear: both;
  }



@media screen and (max-width:640px){

entry-title{
  font-size: 25px;
}

.g-waku{
  border:0px solid #ccc;
  overflow: hidden;
  width: 100%;
  text-align: center;

  /*padding: 3%;*/

}

.g-left{ float: left; overflow: hidden; width: 99%; margin: 0 auto;}

.g-right{float: left; overflow: hidden; width: 90%;  margin: 5%;}



.g-img{
    /*border: 1px solid #ccc;*/
    /*float: left;*/
    /*width: 40%;*/
  }

.g-img  img{
    width: 100%;
  }

.k-view-btn{
    font-weight: 30px;
    text-align: center;
    font-size: 15px;
    float: left;
    /*margin-bottom: 20px;*/
  }


  .k-view-btn a{
      margin: 0 auto;
      border: 3px solid #ff6633;
      color: #fff;
      text-decoration: none;
      background-color: #ff6633;
      display: block;
      padding: 3px;
      width: 100%;
      border-radius: 5px;
  }
  .k-view-btn a:hover{
      color: #fff;
      border: 3px solid #ccc;
      background-color: #ccc;
      text-decoration: none;
  }


/*初回価格ボタン*/

.price-wrapper{
  overflow: hidden;
}

  .kakaku-btn{
    font-weight: 20px;
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
    border: 1px solid red;
    color: #fff;
    text-decoration: none;
    background-color: red;
    display: block;
    padding: 5px;
    width: 150px;
    border-radius: 5px;
    float: left;
  }



  .item-price{
    font-size: 20px;
    color: red;
    font-weight: bold;
    /*margin: 5px ;*/
    padding-left: 10px;
    float: left;
    padding-top: 5px;


  }


/*キャンペーンを見るボタン*/

  .c-view-btn{
    font-weight: 30px;
    text-align: center;
    font-size: 20px;
    float: left;
    margin-top: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    width: 95%;

  }


  .c-view-btn a{
      margin: 0 auto;
      border: 3px solid #ff0099;
      color: #fff;
      text-decoration: none;
      background-color: #ff0099;
      display: block;
      padding: 3px;
      width: 100%;
      border-radius: 5px;
  }
  .c-view-btn a:hover{
      color: #fff;
      background-color: #ccc;
      border: 3px solid #ccc;
      text-decoration: none;
  }


  .k-btn{
    font-weight: 30px;
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
  }


  .k-btn a{
      margin: 0 auto;
      border: 1px solid #CCC;
      color: #fff;
      text-decoration: none;
      background-color: #996633;
      display: block;
      padding: 20px;
      width: 200px;
        border-radius: 5px;
  }
  .k-btn a:hover{
      color: #fff;
      background-color: #ccc;
      text-decoration: none;
  }


}

 

CSSが若干長いですが、コピペすればいいです。

あとワードプレステーマにモバイル用CSS(mobile.css)が準備されている場合は、モバイル用CSSの部分をそちらに追加してください。

 

 

あまりアフィリエイトっぽくしたくない!

でもボタンや価格でアピールしたい

そんな思いがぎゅぅ~んと詰まっています♪

 

気に入っていただけたら、どうぞ使ってあげてください。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

イチオシ記事

  1. アフィリエイト

最近の記事 おすすめ記事
  1. インフィード広告を入れる
  2. タイトルがなっとらん!
  3. アフィリエイト防災
  4. 長期トレンド
  1. アフィリエイト防災
  2. 長期トレンド
  3. アフィリエイトのキーワード選び
PAGE TOP