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年やってきて感じることは、先生や師匠がいる環境が大事ってこと。
アフィリエイトのノウハウも大事だけど、心の支えになってくれる友人たち、先生、師匠の存在はとても大切です。

僕の場合、友人にアフィリエイト塾AMCを紹介してもらい今は無料会員として、たまに各地セミナーに遊びにいって交流しています。

トレーニングジムと同じでジムに1人で行く人は意外と続かない。しかし仲間と行くと継続率が高くなります。アフィリエイトも仲間が増えるとアフィリエイトを辞めてしまうことはほぼなくなるでしょう。

続ければ必ず成果が出るアフィリ。僕のおすすめアフィリエイト塾は、AMCです。
もしAMCに申し込みされた方がいらっしゃったら、AMCのSNSで「がんちゃん」で日記書いていますのでご一報ください。
色んなご相談にお答えいたします。

→ アフィリエイト塾AMC申込み

シェアしてくれるとチョーうれしいです!

フォローする