MENU

はてなブログで簡略的なランキングサイトを作成する方法

ブログネタ ブログネタ-はてな
スポンサーリンク

ランキングサイトについて

ブログでもランキングサイトが作れたらいいなと思いながら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を比較・提案します！ - なまけるのに飽きるまで

「詳細はこちら」などのボタンは、エッジプラスの画像を利用しています。僕のサイトのボタンを勝手に利用しないように！笑　購入者以外が利用すると、賠償しないといけない場合もあるので気をつけてください。フリーでたくさん素材は落ちていると思います。


バナーも作成しました

パソコン、タブレット用

スマホ用
格安SIMランキング


バナー作成も最近はまっていまして、バナープラスというソフトを利用しています。
インフォトップ：学ぶ・稼ぐ・アフィリエイト総合ASPサイト

本当に感覚的に操作できるので、超簡単に作ることができます！デザインを自分ですることのメリットは、センスを磨けるということもあるのですが、ちょっとした変更も自分で即座に対応できる点にあります。アフィリエイトをするとよく商品説明が変わったり、仕様が変更になったりするので、バナーもちょっとした変更が余儀なくされる場合があります。そんな時に自分でデザインをしておけば本当に楽です。外注だとスピードに欠けます。


ぜひ、バナープラスを利用してみてください。ただ、有料なのがちょっと微妙ですが...それでも僕は満足してます！
インフォトップ：学ぶ・稼ぐ・アフィリエイト総合ASPサイト

まとめ

ということで、今回は簡易的なランキングサイトの作成方法についてでした。ただ、僕もほったらかしにしていたSIMの比較ページを綺麗に更新したにすぎません。ランキングサイトありきのサイトを、このはてなブログでは作らないようにしましょう。

はてなブログは一応純粋なブログサービスであって、アフィリエイトありきのサイトは禁止とされています。ランキングサイトも使いようですね！今回は簡易的なものを作って、エッジプラスほどのクオリティーはないですが、そこそこのデザインは保てたかなと思っています。もっとブラッシュアップしたいところですが、他の方に任せます。笑

では！

インフォトップ：学ぶ・稼ぐ・アフィリエイト総合ASPサイト