メインコンテンツ（ランキング）の編集作業

目次

  1. メインコンテンツランキング部分とは？
  2. ランキング部分を編集する
  3. 広告スペースをアフィリエイト用画像に差し替える
  4. ★アイコンをグレーにする
  5. ランキングアイコンを変更する
  6. 案件名を編集する
  7. 案件詳細情報の編集
  8. 案件説明文章変更と、詳細はこちらボタンの削除など
  9. ランキングを追加する
  10. ファイルの上書き保存をする

1.メインコンテンツランキング部分とは？

s1

※クリックすると画像が大きくなります。

赤枠で囲まれた部分がランキング部分です。1位～3位が標準で設定されていますが、最大で10位まで案件の追加が可能です。
以下では、ランキング1位部分のみピックアップして見ていきましょう。

2.ランキング部分を編集する。

■67行目がランキングの開始です。

上記の黄色いラインで囲まれた部分が編集する必要がある箇所です。以下で１つづつ見て行きましょう。

3.広告スペースをアフィリエイト用画像に差し替える

■上記コードの29行目です。

現在は、「koukoku.png」という仮の画像が挿入されている上にアフィリエイトリンクも貼られていない状態です。

s6

ここの部分をアフィリエイト運営会社から配布されるタグに書き換えて下さい。

【例】

画像サイズは、正方形もしくは正方形に出来るかぎり近い形のバナーを選択して下さい。（320×250)なども可。横長のバナーなどを入れると全体の表示が崩れる可能性があります。

4.★アイコンをグレーにする

■上記5行目を見やすく展開してみました。

このタグの部分はちょうど、上記画像の部分に当たります。

s7

①２行目～６行目は★アイコンの指定です。
「star.png」の部分を「star_off.png」に変更すると、★アイコンがグレーに変更されます。
右側のアイコンからグレーにしていきたいときは、上から順に。左側のアイコンからグレーにしていきたいときは下から順に変更していきましょう。

5.ランキングアイコンを変更する

■上記コードの15行目を変更します。

s2

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

s3

「rank1.png」の部分を「rank2.png」に変更する事によって、2番目のランキングアイコンが読み込まれます。念のため、ALT属性の「1位」→「2位」へ変更しておきましょう。

6.案件名を編集する

■上記コードの20行目あたりを変更します。

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

案件①の部分を、紹介したい案件名に変更する事によって変更可能です。

7.案件詳細情報の編集

s4

上記画像が下記の青色部分のコードに対応しています。
各項目を変更して、作りたいサイトに合わせた項目を入力しましょう。

8.案件説明文章変更と、詳細はこちらボタンの削除など

■上記ソースコードの32行目

案件説明文章の変更は1行目・2行目を変更します。
詳細はこちらボタンを削除したい（詳細ページが必要ない場合）は、6行目～8行目を削除します。

■変更例

また、申し込みはこちらボタンのリンクをアフィリエイト運営会社から配布されるタグに変更します。

9.ランキングを追加する

ランキングを作成する場合、上記の１～９の手順を踏んで１位のひな形を作り、2位・3位・4位とコピー＆ペーストで追加した後に編集する事により１つ１つの項目の設定などの時間を短縮する事が出来るのでオススメです。

【！！！！！！！ここにコピー＆ペースト！！！！！！！】の部分に、1～9の手順でで完成したタグをコピーした上で、２位の箇所や３位の箇所を変更して増やしていく事が出来ます。
この時、初期状態で入っている下記コードは削除してしまっても構いません。

 

10.ファイルの上書き保存をする

s5
※クリックすると画像が大きくなります。

TeraPadの矢印部分『ファイル』をクリックします。

s6

※クリックすると画像が大きくなります。

TeraPadの矢印部分『上書き保存』をクリックします。
以上で、編集されたファイルが出来上がりました。

 

コメントを残す