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

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

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

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

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

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

フォローする