HHS

変デジはてな支所

アフィリエイターがランキングでよく使う王冠の素材とCSSの話

ブログのアクセスランキングとかネットショップ運営にも使えるテクニックなんですが、今回はアフィリエイトサイトでよく見かける王冠などの素材を使ったランキングについて。

アフィカスが貼ったランキングなんて誰が信用するんだよって話なんですが…これが予想以上に効果あるんですよ。って事で素材やら何やら紹介します。

広告


みんな大好きランキング

世の中にはランキングが好きな方って本当に多いんですよね。1位から3位までランキングされてたら…1位を選びたくなる気持ちも分かりますし、多くのアフィリエイトサイトがランキングを採用するのも理解出来ます。

 【エポスカード】

 昭和シェルのポンタ最強カード

 楽天市場でのお買物がいつでもポイント2倍!

テキストで1位、2位、3位って書いてあるだけでも効果ありますが、やっぱり画像があるとクリックされやすい印象です。数字が入ってなくて「王冠」だけでも効果あります。王冠凄い。

 1日分の野菜不足をこれ一包 粉末青汁

ただ、画像の横にテキストを並べるだけだと、、、大きな画像を使った時にバランスが悪くなります。(PC表示の時)

普通に画像の右にテキストを貼るとこうなる

 オススメ商品

別にこれでもいいんですが、、、何となく画像の中心とテキストが揃えたい。そんな時はCSSを使います。

CSSを使って真ん中にテキストを揃える

 オススメ商品

自分はこっちの方がバランスがいいと思うのでCSSとHTMLを少しだけ設定します。(何度も書きますがPC表示の時)

CSS

.rank1 img {
 vertical-align:middle;
}

HTML

<p class="rank1"><img src="画像のURL"> <b>オススメ商品</b></p>

CSSとかそんなに詳しくないので画像に対してテキストを真ん中で揃える感じにしました。で、ランキングに使えそうな画像ですが無料で使える素材は大量にあります。最後にランキングに使えるフリー素材へのリンクを9個ほど貼っておきます。

アフィリエイトじゃなくても便利に使えると思うので是非チェックを。

1:「人気ランキング」の素材 無料ダウンロード

f:id:lonestartx:20160831080126j:plain

リンク:無料素材(人気ランキング)|ネットショップ素材.topm

3:ランキングアイコンのフリー(無料)素材

f:id:lonestartx:20160831080418j:plain

リンク:ランキングアイコン(王冠) フリー素材集 - カフィネット

4:セールス&人気ランキング用アイコン【ネットショップ】

f:id:lonestartx:20160831080629p:plain

リンク:セールス&人気ランキング用アイコン【ネットショップ】 | フリー素材のカオスモード

5:王冠のフリー素材

f:id:lonestartx:20160831080750j:plain

リンク:王冠(おうかん)の無料素材

6:【無料WEB素材】王冠・ランキング素材

f:id:lonestartx:20160831081005j:plain

リンク:無料素材 数字素材 | 無料素材/web素材/テンプレート素材-Design Warehouse-

7:ネットショップ ランキング素材

f:id:lonestartx:20160831081135j:plain

リンク:ネットショップフリー素材ナビ【商用利用可能・アイコン集】

9:ランキング用 王冠素材

f:id:lonestartx:20160831081533j:plain

リンク:ランキング用 王冠素材 9 | EC design(デザイン)