アフィリエイト

アフィリエイトのコンバージョンを高めるかもしれないボックスとボタン(CSS)

アフィリエイトサイトを作る時、LPの画像をどれかいいのを貼って、あとは見出しつけて、文章だぁ〜〜〜〜〜っと書く ってしていませんか? 僕もそんな感じです。

 

けど今よりもコンバージョンが上がるページが簡単に作れたらいいですよね〜。

閲覧ユーザーからみても、ストレスがかからないので、より欲しい情報がゲットしやすいですよね。

 

そこで、今日はアフィリエイト向けに使えそうなデザインをCSSで作りました。特にスマホからのコンバージョンを意識しています。ただ海外サイトからパクって改造しただけなんですけどね・・・。

 

今回、2つご用意しました。

1つは、商品特徴をH3見出し付きで紹介するボックス

もう一つは、ボタンをスマホで押しやすく右下に配置したボックス

 

ではどうぞ。

 

商品特徴からの〜続きを見るボックス

 

商品特徴 その1 大きくなる

商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。

続きを見てみる

 

※続きを見てみるボタンは、シンプリィシティのCSSを利用しているので、他のワードプレステーマでは表示されません。適当に代用してください。
HTMLコード

<div class="gbox">
<div class="info">
<h3 class="text-center">商品特徴 その1 大きくなる</h3>
<p>商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。<br />
<br />
</p>
<p><a class="btn btn-green btn-l btn-hand-o-right" href="#" rel="nofollow">続きを見てみる</a></p>
</div>
</div>

 

CSSに下のコードを追加します。

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

.gbox {
    border: 2px solid #da4033;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 10px 25px;
    display: block;
    margin-top: 60px;
}
.info h4 {
    font-size: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.info > p {
    color: #717171;
    font-size: 16px;
    padding-top: 10px;
    text-align: justify;
}

パクり元はこちら
http://bootsnipp.com/snippets/featured/box-material-design

スマホで押しやすい丸い続きを見るボタン

 

商品特徴 その2 小さくなる

商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。

 

HTML

<div class="gbox2">
<h3 class="text-center">商品特徴 その2 小さくなる</h3>
<p>商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。</p>
<button class="g-circle">続きを読む</button></div>

 

CSSはこれ

.gbox2{
	border: 2px solid #dd5347;
    border-radius: 2px;
    padding: 10px 30px 120px 30px;
    display: block;
    position:relative;

}

.g-circle {
	box-shadow: 2px 4px 0 2px rgba(0,0,0,0.1);
	border: .5em solid #E84D0E;
	font-size: 1em;
	line-height: 1.1em;
	color: #ffffff;
	background-color: #e84d0e;
	margin: auto;
	border-radius: 50%;
	height: 8em;
	width: 8em;
    position: absolute;
    right: 0;
    bottom: 0;
	border-color: #ff7536;
}
.g-circle:hover {
	color:#ffffff;
    background-color: #e8170e;
	text-decoration: none;
	
}
.g-circle:visited {
	color:#ffffff;
    background-color: #e84d0e;
	text-decoration: none;
	
}

パクリ元
http://bootsnipp.com/snippets/featured/circle-button-with-3d-shadow-and-hover-effect

まとめ

いかがでしたでしょうか?

スマホで見て、出来るだけ目が止まりやすいようにボックスに枠をつけて、アレンジしやすいように中身はシンプルにしています。ボタン部分がポイントですが、幅100%ボタン と 右下丸ボタン と両方スマホでも押しやすい&興味を持ちやすいように工夫してみました。

コメント

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

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

イチオシ記事

  1. アフィリエイト

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