今回は「6.ランキングの登録と貼り付け」ASP-Ranker 更新情報編の続きで、ASR-Rankerを使用したアクセスランキングを貼り付けてみましょう。
登録などの基本的な事は、上のリンクからご確認下さい。ランキング用のサイトは登録されているものとして説明していきますので、登録していない場合は適当なサイトで構いませんので登録しておいて下さい。
それでは早速貼り付けてみましょう。
最初はカテゴリの編集をクリックして、登録サイト用のカテゴリを決定しておいて下さい。多分後から編集すると煩わしいことになります。お使いのサイトに合わせたジャンルでどうぞ。
次はこちらで紹介するテンプレートに合わせた設定に変更してください。以下に紹介する項目以外はお好きな設定でどうぞ。(新着サイトとお勧めサイトに表示する文字は表示していませんので、設定されても表示されません。)
まず左メニューのランキング欄、機能設定をクリックします。設定内の、相互リンク登録画面の設定を変更してください。
サムネイルをクリックするとフルサイズ画像が表示されますので、その画像で表示されているように設定を変更してください。サムネイルサイズは60x60、コメントの文字数もテンプレートに合わせてありますので、設定が違うと表示がずれます。
こちらで紹介するテンプレートはメインランキング用です。もちろん同じ表示方法でよければ、セカンドランキングや新着などに使用することも可能です。
こちらで使用するスタイルシートですが、わかりやすいように更新情報のスタイルシートと同じものを使用しています。更新情報用のスタイルシートをアップロードしてあれば、スタイルシートのアドレス指定はそちらをお使い下さい。
ランキングのみ使用される場合は、下のASP-Ranker用スタイルシートをダウンロードして、そのままお使いのブログでアップロードしてください。
ランキングのテンプレートはヘッダ、ボディー、フッターの3つに分かれています。それぞれ間違いないようにペーストしてください。下にそれぞれのテンプレートを紹介しますので、コピペでお願いします。
<link href="アップロードしたcssファイルのアドレス" rel="stylesheet" type="text/css">
<base target="_blank">
<body>
<tr>
<td>
<table class="asptable" width="215">
<tr>
<td width="15" class="asptext2" rowspan="2">
#rank##<br />
#arrow#
</td>
<td width="60" rowspan="2">
#thumb#
</td>
<td width="140">
#sitename#
<span class="siteinl">#category#</span><div style="clear: right;"></div>
</td>
</tr>
<tr>
<td class="asptext">
#comment#
</td>
</tr>
</table>
</td>
</tr>
</table>
以上を各エリアに貼り付けて下さい。できたらプレビューで確認しましょう。
更新情報と同じで、ヘッダー部分のアップロードしたcssファイルのアドレスと書かれている部分を削除して、お使いのブログでアップロードしたcssファイルのアドレスをペーストして下さい。これを間違えると表示がおかしくなりますので、正確にお願いします。
次も同様に変更を反映させるボタンを押して、レイアウトのプレビューをクリックしましょう。
画像は貼り付けが成功した例です。こちらは1列表示で、ブログテンプレートの右カラムに貼り付けることを想定しています。画像や情報などが登録通りに表示されているか確認してください。
問題が無ければASP-Ranker側のカスタマイズは終了です。今度はブログテンプレートにランキングを貼り付けましょう。
ランキングを貼り付けるアドレスは、左メニューランキングのトップをクリックすると表示されます。いくつかありますが、メインランキングページが先ほどカスタマイズしたリンクです。こちらを貼り付けます。
次はブログの編集画面です。テンプレート編集画面に移動し、HTML部分をCtrl+Aなどで全文選択し、テキストエディタに貼り付けて下さい。編集はテキストエディタを利用しましょう。また、最初に貼り付けたテキスト(HTML)を保存しておくことを強くすすめます。そうしないと大きな間違いをしてしまった場合に元に戻れなくなります。バックアップは基本ですから、必ず行ってください。
ランキングを貼り付けるのは右カラム一番上です(こちらのサイト参照)。更新情報と同じで、基本的にアドレスを貼り付けるだけで終わります。
下記の部分が編集するHTML箇所です。
<h3 class="righttitle">
アクセスランキング
</h3>
<div class="rightmain"><!-- アクセスランキング -->
<a href="http://www.dti-ranker.com/" target="_blank">DTIランカー</a>など各種ツールを使ってアクセスランキングを表示。230pxあるのでカスタマイズしやすい。<br />
インラインフレームを使うと、アクセスコントロールができます。
</div><!-- アクセスランキング -->
HTMLファイルにも説明してありますが、本文用のセレクタを変更して、本文(ランキング)を挿入します。下に変更したテンプレートを紹介しますので、それをお使い下さい。
<h3 class="righttitle">
アクセスランキング
</h3>
<div class="rightiframe"><!-- アクセスランキング -->
<iframe src="ランキング用のアドレス" width="230" height="460" frameborder="0" scrolling="yes"></iframe>
</div><!-- アクセスランキング -->
ランキング用のアドレスの部分に、ASP-Rankerのメインランキングページのアドレスを貼り付けて下さい。
できたら、該当部分を変更したブログのHTML部分を編集画面に貼り付けて、プレビューしてみましょう。
画像は、標準のテンプレートからランキング部分だけを変更した状態になります。右カラムが230pxあるので、サムネイルを使ったランキングもそれほど窮屈にならずに掲載することができます。
ベースのランキング用テンプレートをカスタマイズするのは問題ありませんので、お好きなデザインに変更してみて下さい。
以上がランキングの設置部分のカスタマイズになります。後は新規登録サイトのカスタマイズです。「6.ランキングの登録と貼り付け」ASP-Ranker 新規登録サイト編へ続きます。
 |
|
コメントの投稿