ランキングサイトについて
ブログでもランキングサイトが作れたらいいなと思いながらWordPressで記事を作成していたのですが、この度下手くそなりに、はてなブログでランキングサイトっぽいのを作ってみました。WordPressのランキングサイトは、最近発売されたばかりのエッジプラスというテンプレートを利用していますが、なかなか使いやすいです！現在サイトを量産中ですw
SEOとPPCのプロ集団が作ったアフィリエイト専用テンプレート「エッジプラス1」ですが、確かに企業サイトなどは鼻から想定しておらず、本当にアフィリエイターのために作られたテンプレートだと思います。コンバージョン重視設計で、Googleが要求するスマホ化にも余裕なレスポンシブ対応なので、これからのテンプレートと言えそうです。
ただ、まだまだ賢威と比べると未熟な点もあります。しかしフォローバックも手厚いので、安心して使うことができています。
インフォトップ：学ぶ・稼ぐ・アフィリエイト総合ASPサイト
さて、エッジプラス1の詳しい紹介は今度するとして、今回ははてなブログですね。
はてなブログでのランキングサイト化
まずはCSSと文章中のコードはコピペでOKです。ヒントはこのサイトから得ました。
CSSで左に画像・右に文字列を配置するレイアウト - Webのあいラボ
CSS
/* ボックス*/
.box {
margin: 10px 0;
float: left;
width: 100%;
background: #F8F8FF ;
}
.box img {
max-width: 40%;
float: left;
}
.box p {
margin: 0;
padding: 10px;
}
.right {
width: 60%;
float: left;
}
本文中
星などの画像<span class="deco" style="font-size:xx-large;">タイトル</span>
<div class="box">
<a href="公式サイトのurl" target="_blank"><img src="広告のurl" alt="" border="0" /></a>
<div class="right"><p><b>文字</b>
</p>
</div>
</div>
文字
<a href="詳細ページのURL" target="_blank"><img src="詳細ボタンのurl" alt="" border="0" /></a><a href="公式サイトHP" target="_blank"><img src="公式サイトボタンのurl" alt="" border="0" /></a>
これらを組み合わせて作ったのが、以下の格安SIMのランキングサイトです。
格安SIMのランキング決定版！あなたにあったSIMを比較・提案します！ - なまけるのに飽きるまで
「詳細はこちら」などのボタンは、エッジプラスの画像を利用しています。僕のサイトのボタンを勝手に利用しないように！笑 購入者以外が利用すると、賠償しないといけない場合もあるので気をつけてください。フリーでたくさん素材は落ちていると思います。
バナーも作成しました
パソコン、タブレット用
スマホ用
バナー作成も最近はまっていまして、バナープラスというソフトを利用しています。
インフォトップ：学ぶ・稼ぐ・アフィリエイト総合ASPサイト
本当に感覚的に操作できるので、超簡単に作ることができます！デザインを自分ですることのメリットは、センスを磨けるということもあるのですが、ちょっとした変更も自分で即座に対応できる点にあります。アフィリエイトをするとよく商品説明が変わったり、仕様が変更になったりするので、バナーもちょっとした変更が余儀なくされる場合があります。そんな時に自分でデザインをしておけば本当に楽です。外注だとスピードに欠けます。
ぜひ、バナープラスを利用してみてください。ただ、有料なのがちょっと微妙ですが...それでも僕は満足してます！
インフォトップ：学ぶ・稼ぐ・アフィリエイト総合ASPサイト
まとめ
ということで、今回は簡易的なランキングサイトの作成方法についてでした。ただ、僕もほったらかしにしていたSIMの比較ページを綺麗に更新したにすぎません。ランキングサイトありきのサイトを、このはてなブログでは作らないようにしましょう。
はてなブログは一応純粋なブログサービスであって、アフィリエイトありきのサイトは禁止とされています。ランキングサイトも使いようですね！今回は簡易的なものを作って、エッジプラスほどのクオリティーはないですが、そこそこのデザインは保てたかなと思っています。もっとブラッシュアップしたいところですが、他の方に任せます。笑
では！
