賢威でコピペで使えるランキングサイトの作り方
やっぱりアフィリエイトサイトといえば、王道なのが「ランキングサイト」ではないでしょうか。そこで今回は賢威の２カラムテンプレートで簡単にランキングボックスを作る方法を紹介したいと思います。
ちなみに今回作ってみたいのはこんな感じのランキングサイトです。※このサンプルのランキングはただの個人的な主観というか好みですｗ
カスタマイズもしやすいソースコードで、かつ内的SEO対策もバッチリなので、WPで長期的に人気ブログを作っていきたい、という方にお勧めのテンプレートです。
更新型の大規模サイトを育てるよりも、小～中規模サイトを大量に作りたい、という方にはお勧めのHTMLサイト制作ツールです。
SEO効果は個人的な印象では、賢威のほうがやや上がりやすい気がします。明確な根拠はないですが。
ランキングボックスの設置方法
さて、それでは具体的なランキングページの作り方について説明していきます。今回はちょっとコピペする項目も多いですが、頑張りましょう！
まずは当サイトの「賢威で使えるフリー画像素材置き場」から画像ランキング素材のボックス画像３枚をダウンロードしてください。同じサイズのものであれば、自前で用意していただいても大丈夫です。
３枚とも画像をダウンロードしたら、それを賢威の管理画面の「メディア->新規追加」からアップロードしておきます。このときアップロード先のURLパスを３つとも覚えておいてください。
次に「外観->テーマ編集」の「design.css」を開いて、以下の項目を全てコピペして一番下などに新しく追加してください。
#main-contents .no1_box {
height: 417px;
width: 615px;
background: url(NO1ボックスの画像のURL) top left no-repeat;
position: relative;
}
#main-contents .no2_box {
height: 417px;
width: 615px;
background: url(NO2ボックスの画像のURL) top left no-repeat;
position: relative;
}
#main-contents .no3_box {
height: 417px;
width: 615px;
background: url(NO3ボックスの画像のURL) top left no-repeat;
position: relative;
}
まだあります。さらに以下もその真下に続けてコピペしてください。
#main-contents .no1_box .text_big, #main-contents .no2_box .text_big, #main-contents .no3_box .text_big {
font-size: 25px;
font-weight: bold;
color: #fff;
padding: 17px 20px 0px 195px;
}
#main-contents .no1_box .box_img, #main-contents .no2_box .box_img, #main-contents .no3_box .box_img {
position: absolute;
top: 80px;
left: 40px;
width: 220px;
height: 220px;
overflow: hidden;
border: 2px solid #aaa;
}
#main-contents .no1_box .box_text, #main-contents .no2_box .box_text, #main-contents .no3_box .box_text {
padding: 35px 40px 0px 280px;
font-size: 15px;
}
次に、もう一度「フリー画像素材置き場」から今度はボタン画像をダウンロードしてきてください。色はどれでも構いません。上のサンプルでは緑色のものを使っています。
そして、Photoscapeなどの画像編集ソフトを使って画像サイズを「横幅350px」にリサイズしてください（Photoscapeをまだ入れていない方はこちら）。そして、リンクボタンに書きたい文字を記入します。すると以下のような感じになります。
このときに文字の色を変えておくと、マウスを乗せたときに良い感じの視覚効果になります。画像が作れたら、これも「メディア->新規追加」からアップロードして、アップロード先のURLを覚えておいてください。
ここまで完了したら、また上記の「design.css」で先ほど記述した場所の真下に、以下の記述をまるまるコピペで追加します。
#main-contents .no1_box .button a, #main-contents .no2_box .button a, #main-contents .no3_box .button a {
display: block;
background: url(ボタン画像のアップロードURL) top left no-repeat;
height: 0px;
width: 350px;
position: absolute;
top: 330px;
left: 225px;
padding-top: 57px;
overflow: hidden;
}
#main-contents .no1_box .button a:hover, #main-contents .no3_box .button a:hover, #main-contents .no2_box .button a:hover {
background-position:bottom left;
}
お疲れ様です。これでランキングボックスのCSSへの設定はおしまいです。
最後は実際に記事の、投稿画面でHTMLの記述をおこなっていきます。
投稿記事への記述
賢威の管理画面から「投稿->新規追加」（または「固定ページ->新規追加」）でランキングボックスを設置したい記事ページの投稿画面を開きます。そのままランキングボックスを設置したい箇所に以下のように記述してください。
<div class="no1_box">
<div class="text_big">商品タイトル</div>
<div class="box_img"><img src="商品の画像URL"></div>
<div class="box_text">
説明文のテキストをここに記載する。
</div>
<div class="button"><a href="リンク先ページのURL" target="_blank">
アンカーテキスト</a></div>
</div>
黄色のところはご自身で好きなテキストを記述してください。また商品画像は、一応、縦幅220px、横幅220pxのものを用意していただくとピッタリになるように作ってあります。画像周りのボーダーラインも勝手に入るので、画像に枠線をつけておく必要はありません。
以上で「NO1」のボックスは完成です。「NO2」「NO3」のボックスについても手順（フォーマット）は全く同じです。ただ単に「<div class="no1_box">」と書いたところを、「<div class="no2_box">」「<div class="no3_box">」に変えてもらえれば大丈夫だと思います。
あと、これらのCSSは全部、横幅950pxの２カラムを想定して作っていますので、もし３カラムの方とか、1000pxで２カラムの方とかの場合は微妙に調整が必要だと思います。（賢威２カラムの標準の横幅は950pxです）
もし何かわからないところとか、うまく出来ないところがあれば教えてください。それでは！
以下の記事で賢威の特徴や魅力について詳しく解説していますので良かったらご覧ください。豪華な特典のプレゼントもあります。
賢威がアフィリエイターに選ばれる理由 当サイト限定の賢威の購入特典はこちら
最近のコメント