目次
1.メインコンテンツランキング部分とは?
※クリックすると画像が大きくなります。
赤枠で囲まれた部分がランキング部分です。1位~3位が標準で設定されていますが、最大で10位まで案件の追加が可能です。
以下では、ランキング1位部分のみピックアップして見ていきましょう。
以下では、ランキング1位部分のみピックアップして見ていきましょう。
2.ランキング部分を編集する。
■67行目がランキングの開始です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!--▼ランキング開始(1位)--> <div class="m30-b"> <h3 colspan="5"> <!--▼星アイコン--> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <!--▲星アイコン--> <!--▼ランキングアイコン--> <img src="images/rank1.png" alt="1位" class="rank"/> <!--▲ランキングアイコン--> <!--▼案件名--> <span class="fl-c">案件①</span> </h3> <!--▲案件名--> <!--▼ランキング項目--> <div class="area_out"> <!--▼広告スペース(250p×250px)推奨--> <div class="area fluid iframe-content" style="display:block;"><a href="#" target="_blank" rel="nofollow"><img src="img/koukoku.png" width="250" height="250"/></a></div> <!--▲広告スペース(250p×250px)推奨--> <div class="area_r"> <table border="1" class="area_r1"> <tr> <th width="30%" class="hss"><span class="fl-c">限度額 </span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">提携ATM</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">パート<br> アルバイト</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> <table border="1" class="area_r2"> <tr> <th width="30%" class="hss"><span class="fl-c">金利</span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">審査時間</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss">即日振込<br> <br></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> </div> <!--▼案件説明文章・申込・詳細ボタン--> <div class="desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <p style="text-align:center;"><a href="#"><img src="images/moushikmi.png" alt="お申込みはこちら" class="btn1"/></a><a href="syousai.html"><img src="images/syousai.png" alt="詳細はこちら" class="btn2"/></a></p> </div> <!--▲案件説明文章・申込・詳細ボタン--> </div> <!--▲ランキング項目--> </div> <!--▲ランキング終了(1位)--> |
上記の黄色いラインで囲まれた部分が編集する必要がある箇所です。以下で1つづつ見て行きましょう。
3.広告スペースをアフィリエイト用画像に差し替える
■上記コードの29行目です。
1 2 3 4 5 |
<!--▼広告スペース(250p×250px)推奨--> <div class="area"> <a href="#" target="_blank" rel="nofollow"><img src="img/koukoku.png"/></a> </div> <!--▲広告スペース(250p×250px)推奨--> |
現在は、「koukoku.png」という仮の画像が挿入されている上にアフィリエイトリンクも貼られていない状態です。
1 |
<a href="#" target="_blank"><img src="img/koukoku.png"/></a> |
ここの部分をアフィリエイト運営会社から配布されるタグに書き換えて下さい。
【例】
1 2 3 4 5 6 7 8 |
<!--▼広告スペース(250p×250px)推奨--> <div class="area"> <a href="http://px.a82.net/svt/ejp?a8mat=sfdfds+gfdtkd+9871" target="_blank"> <img border="0" width="250" height="250" alt="" src="http://www22.a82.net/svt/bgt?aid=11111111111&wid=049&eno=01&mid=s555535485141&mc=1"> </a> <img border="0" width="1" height="1" src="http://www10.a82.net/ejp?a8mat=sfdfds+gfdtkd+9871" alt=""> </div> <!--▲広告スペース(250p×250px)推奨--> |
画像サイズは、正方形もしくは正方形に出来るかぎり近い形のバナーを選択して下さい。(320×250)なども可。横長のバナーなどを入れると全体の表示が崩れる可能性があります。
4.★アイコンをグレーにする
■上記5行目を見やすく展開してみました。
1 2 3 4 5 6 7 |
<!--▼星アイコン--> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <!--▲星アイコン--> |
このタグの部分はちょうど、上記画像の部分に当たります。
①2行目~6行目は★アイコンの指定です。
「star.png」の部分を「star_off.png」に変更すると、★アイコンがグレーに変更されます。
右側のアイコンからグレーにしていきたいときは、上から順に。左側のアイコンからグレーにしていきたいときは下から順に変更していきましょう。
5.ランキングアイコンを変更する
■上記コードの15行目を変更します。
1 2 3 |
<!--▼ランキングアイコン--> <img src="images/rank1.png" alt="1位" class="rank"/> <!--▲ランキングアイコン--> |
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
1 2 3 |
<!--▼ランキングアイコン--> <img src="images/rank2.png" alt="2位" class="rank"/> <!--▲ランキングアイコン--> |
「rank1.png」の部分を「rank2.png」に変更する事によって、2番目のランキングアイコンが読み込まれます。念のため、ALT属性の「1位」→「2位」へ変更しておきましょう。
6.案件名を編集する
■上記コードの20行目あたりを変更します。
1 2 3 4 |
<!--▼案件名--> <span class="fl-c">案件①</span> </h3> <!--▲案件名--> |
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
1 2 3 4 |
<!--▼案件名--> <span class="fl-c">エッジプラス1テンプレート</span> </h3> <!--▲案件名--> |
案件①の部分を、紹介したい案件名に変更する事によって変更可能です。
7.案件詳細情報の編集
上記画像が下記の青色部分のコードに対応しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!--▼ランキング項目--> <div class="area_out"> <!--▼広告スペース(250p×250px)推奨--> <div class="area"> <a href="#" target="_blank" rel="nofollow"><img src="img/koukoku.png"/></a> </div> <!--▲広告スペース(250p×250px)推奨--> <div class="area_r"> <table border="1" class="area_r1"> <tr> <th width="30%" class="hss"><span class="fl-c">限度額 </span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">提携ATM</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">パート<br> アルバイト</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> <table border="1" class="area_r2"> <tr> <th width="30%" class="hss"><span class="fl-c">金利</span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">審査時間</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss">即日振込<br> <br></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> </div> </div> <!--▲ランキング項目--> |
各項目を変更して、作りたいサイトに合わせた項目を入力しましょう。
8.案件説明文章変更と、詳細はこちらボタンの削除など
■上記ソースコードの32行目
1 2 3 4 5 |
<!--▼案件説明文章・申込・詳細ボタン--> <div class="desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <p style="text-align:center;"><a href="#"><img src="images/moushikmi.png" alt="お申込みはこちら" class="btn1"/></a><a href="syousai.html"><img src="images/syousai.png" alt="詳細はこちら" class="btn2"/></a></p> </div> <!--▲案件説明文章・申込・詳細ボタン--> |
案件説明文章の変更は1行目・2行目を変更します。
詳細はこちらボタンを削除したい(詳細ページが必要ない場合)は、6行目~8行目を削除します。
詳細はこちらボタンを削除したい(詳細ページが必要ない場合)は、6行目~8行目を削除します。
■変更例
1 2 3 4 5 |
<!--▼案件説明文章・申込・詳細ボタン--> <div class="desc">アフィリエイト専用テンプレート「エッジプラス1」は、初心者の方でも簡単にサイト作成ができることを目的として作りました。WP版ランキングタイプが2パターン。同じHTML版ランキングタイプが2パターン。何にでも使えるWP版ブログタイプ。 <p style="text-align:center;"><a href=""http://px.a82.net/svt/ejp?a8mat=SAGFER+GERGRE"><img src="images/moushikmi.png" alt="お申込みはこちら" class="btn1"/></a></p> </div> <!--▲案件説明文章・申込・詳細ボタン--> |
また、申し込みはこちらボタンのリンクをアフィリエイト運営会社から配布されるタグに変更します。
9.ランキングを追加する
ランキングを作成する場合、上記の1~9の手順を踏んで1位のひな形を作り、2位・3位・4位とコピー&ペーストで追加した後に編集する事により1つ1つの項目の設定などの時間を短縮する事が出来るのでオススメです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!--▼ランキング開始(1位)--> <div class="m30-b"> <h3 colspan="5"> <!--▼星アイコン--> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <!--▲星アイコン--> <!--▼ランキングアイコン--> <img src="images/rank1.png" alt="1位" class="rank"/> <!--▲ランキングアイコン--> <!--▼案件名--> <span class="fl-c">案件①</span> </h3> <!--▲案件名--> <!--▼ランキング項目--> <div class="area_out"> <!--▼広告スペース(250p×250px)推奨--> <div class="area"> <a href="#" target="_blank" rel="nofollow"><img src="img/koukoku.png"/></a> </div> <!--▲広告スペース(250p×250px)推奨--> <div class="area_r"> <table border="1" class="area_r1"> <tr> <th width="30%" class="hss"><span class="fl-c">限度額 </span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">提携ATM</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">パート<br> アルバイト</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> <table border="1" class="area_r2"> <tr> <th width="30%" class="hss"><span class="fl-c">金利</span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">審査時間</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss">即日振込<br> <br></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> </div> </div> <!--▲ランキング項目--> <!--▼案件説明文章・申込・詳細ボタン--> <div class="desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <p style="text-align:center;"><a href="#"><img src="images/moushikmi.png" alt="お申込みはこちら" class="btn1"/></a><a href="syousai.html"><img src="images/syousai.png" alt="詳細はこちら" class="btn2"/></a></p> </div> <!--▲案件説明文章・申込・詳細ボタン--> </div> <!--▲ランキング終了(1位)--> !!!!!!!ここにコピー&ペースト!!!!!!! |
【!!!!!!!ここにコピー&ペースト!!!!!!!】の部分に、1~9の手順でで完成したタグをコピーした上で、2位の箇所や3位の箇所を変更して増やしていく事が出来ます。
この時、初期状態で入っている下記コードは削除してしまっても構いません。
この時、初期状態で入っている下記コードは削除してしまっても構いません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
<!--▼ランキング開始(2位)--> <div class="m30-b"> <h3 colspan="5"> <!--▼星アイコン--> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star_off.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <!--▲星アイコン--> <!--▼ランキングアイコン--> <img src="images/rank2.png" alt="2位" class="rank"/> <!--▲ランキングアイコン--> <!--▼案件名--> <span class="fl-c">案件①</span></h3> <!--▲案件名--> <!--▼ランキング項目--> <div class="area_out"> <!--▼広告スペース(250p×250px)推奨--> <div class="area"> <a href="#" target="_blank" rel="nofollow"><img src="img/koukoku.png"/></a> </div> <!--▲広告スペース(250p×250px)推奨--> <div class="area_r"> <table border="1" class="area_r1"> <tr> <th width="30%" class="hss"><span class="fl-c">限度額 </span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">提携ATM</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">パート<br> アルバイト</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> <table border="1" class="area_r2"> <tr> <th width="30%" class="hss"><span class="fl-c">金利</span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">審査時間</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss">即日振込<br> <br></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> </div> </div> <!--▲ランキング項目--> <!--▼案件説明文章・申込・詳細ボタン--> <div class="desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <p style="text-align:center;"><a href="#"><img src="images/moushikmi.png" alt="お申込みはこちら" class="btn1"/></a><a href="syousai.html"><img src="images/syousai.png" alt="詳細はこちら" class="btn2"/></a></p> </div> <!--▲案件説明文章・申込・詳細ボタン--> </div> <!--▲ランキング終了(2位)--> <!--▼ランキング開始(3位)--> <div class="m30-b"> <h3 colspan="5"> <!--▼星アイコン--> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star_off.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <img src="images/star_off.png" width="24" height="24" class="fl-r" style="margin-right:0px;"/> <!--▲星アイコン--> <!--▼ランキングアイコン--> <img src="images/rank3.png" alt="3位" class="rank"/> <!--▲ランキングアイコン--> <!--▼案件名--> <span class="fl-c">案件①</span></h3> <!--▲案件名--> <!--▼ランキング項目--> <div class="area_out"> <!--▼広告スペース(250p×250px)推奨--> <div class="area"> <a href="#" target="_blank" rel="nofollow"><img src="img/koukoku.png"/></a> </div> <!--▲広告スペース(250p×250px)推奨--> <div class="area_r"> <table border="1" class="area_r1"> <tr> <th width="30%" class="hss"><span class="fl-c">限度額 </span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">提携ATM</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">パート<br> アルバイト</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> <table border="1" class="area_r2"> <tr> <th width="30%" class="hss"><span class="fl-c">金利</span></th> <td width="70%"><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss"><span class="fl-c">審査時間</span></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> <tr> <th class="hss">即日振込<br> <br></th> <td><span class="fl-c">テキストテキストテキスト</span></td> </tr> </table> </div> </div> <!--▲ランキング項目--> <!--▼案件説明文章・申込・詳細ボタン--> <div class="desc">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <p style="text-align:center;"><a href="#"><img src="images/moushikmi.png" alt="お申込みはこちら" class="btn1"/></a><a href="syousai.html"><img src="images/syousai.png" alt="詳細はこちら" class="btn2"/></a></p> </div> <!--▲案件説明文章・申込・詳細ボタン--> </div> <!--▲ランキング終了(3位)--> |
10.ファイルの上書き保存をする
TeraPadの矢印部分『ファイル』をクリックします。
※クリックすると画像が大きくなります。
TeraPadの矢印部分『上書き保存』をクリックします。
以上で、編集されたファイルが出来上がりました。
以上で、編集されたファイルが出来上がりました。