アフィリエイト

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

前回、ECサイトっぽいレイアウトをご紹介しましたが今回は同じような形で2列レイアウトに挑戦してみましょう。

 

「え~ そんなのできね~よ!」と思うかもしれませんね。

 

安心してください、コピペするだけですから。

 

ECサイトのような2列レイアウト

完成は、こんな感じになります。

マセラッティ レヴァンテ
本体価格
976万円
(税別)
 

ポルシェ マカン
本体価格
699万円
(税別)
 

 

HTMLコードはこちら。WPの場合は、ビジュアルじゃなくて、テキストモードで貼り付けてくださいね。

貼り付けてビジュアルモードで見てもレイアウトは崩れていますが気にしないでください。プレビューでちゃんと表示できるはずです。

 

<!-- 2列ボックス全体ここから -->
<div class="g-waku2">
<!-- 2列ボックス左ここから -->
<div class="g-half">
<div class="entry-title">マセラッティ レヴァンテ</div>
<div class="g-img-half"><img class="aligncenter size-thumbnail wp-image-843" src="https://ganchan.info/wp-content/uploads/2017/06/tre42-150x150.jpg" alt="" width="150" height="150" /></div>
<div class="price-wrapper">
<div class="kakaku-btn-small">本体価格</div>
<div class="item-price2">976万円</div>
<div class="item-price-small">(税別)</div>
</div>
<div class="clear"> </div>
<div class="c-view-btn"><a href="#" target="_blank" rel="nofollow noopener noreferrer">商品を見る</a></div>
</div>

<!-- 2列ボックス右 -->
<div class="g-half">
<div class="entry-title">ポルシェ マカン</div>
<div class="g-img-half"><img class="aligncenter size-thumbnail wp-image-847" src="https://ganchan.info/wp-content/uploads/2017/06/iris-150x150.jpg" alt="" width="150" height="150" /></div>
<div class="price-wrapper">
<div class="kakaku-btn-small">本体価格</div>
<div class="item-price2">699万円</div>
<div class="item-price-small">(税別)</div>
</div>
<div class="clear"> </div>
<div class="c-view-btn"><a href="#" target="_blank" rel="nofollow noopener noreferrer">商品を見る</a></div>
</div>
<!-- 2列ボックス右ここまで -->
<div class="clear"> </div>
</div>
<!-- 2列ボックス全体ここまで -->

 

 

CSSはこちら。

g-waku2{  overflow: hidden;
  width: 100%;}

.g-half{ float: left; overflow: hidden; width: 40%;  padding: 3%;text-align: center;}
.g-img-half{
height:170px;
}
.g-img-half img{
	border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    padding: 12px;
}


.kakaku-btn-small{
    font-weight: 20px;
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
    border: 1px solid red;
    color: #fff;
    text-decoration: none;
    background-color: red;
    display: block;
    padding: 10px;
    width: 75px;
    border-radius: 5px;
    float: left;
  }
  .item-price2{
    font-size: 20px;
    color: red;
    font-weight: bold;
    /*margin: 5px ;*/
    padding-left: 10px;
    float: left;
    padding-top: 12px;


  }

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


  }

 

 

前回のCSSの中で商品を見るボタンは共通です。ちなみに前回のCSSを使っていない場合は、こちらを追加してください。

 

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

  .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;
  }

 

CSSがズレる場合

レイアウトがズレる場合には、フォントサイズやpaddingを調整してみてください。

左右の高さがズレる場合は、HTMLコードのコメント部分を削除してみてください。

タイトルの長さによっては、特にスマホ表示でズレていくので長いタイトルは極力さけたほうがいいです。どうしてもという場合は、タイトル高さを指定してあげるとOKです。

.entry-title {
height: 50px;
}

こんなんで多分いいと思う。

 

あと、商品画像は以下の部分(CSS)で丸くしています。この100pxの値を20pxとか小さくすると、角丸な商品画像になります。下のCSSの3箇所全部変えてくださいね。

.g-img-half img{
	border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    padding: 12px;
}

 

角丸バージョン

マセラッティ レヴァンテ
本体価格
976万円
(税別)
 

ポルシェ マカン
本体価格
699万円
(税別)
 

 

 

コメント

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

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

イチオシ記事

  1. アフィリエイト

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