↓「ランキングページ用ヘッダ」と「途中のHTMLソースファイル」の間にテーブルタグ(＜TABLE＞)を上手く挟み込んで分割するとこのページみたいになるよ。
形は下のようになっているんだ。
↑大きい方のテーブルのタグから「ランキング本体」直前までのタグを「ランキングページ用ヘッダ」に書き、それらのテーブルの閉めるタグを「途中のHTMLソースファイル」に書き込むんだ。わかりにくいけど、このページのソースを参考に、ドンドンパクッテ頂戴。
スタイルシートを使うとかなり見栄えが良くなるよ。各テーブル・セルには、
それぞれのスタイルクラスがあるんだ。（スタイルクラス自体については他のサイトでお勉強してね。使えるととても便利だよ。）
たとえば、このサイトの場合、1位〜20位のテーブルには 「CLASS="Table1"」というタグが埋め込まれているんだ。同様に、21位〜40位には 「CLASS="Table2"」など、、リンク文字には「CLASS="LTxt1"」。詳しくは下のようになっているんだ。
| ▼テーブルのスタイルクラス |
|
Table1〜Table20
(1から20は分割されたテーブルの数によって異なる) |
テーブルの背景、色、ボーダーなどを指定 |
| ▼文字のスタイルクラス |
|
| LTxt1〜LTxt20 |
ランキングサイト名のスタイル |
| Com1〜Com20 |
ランキングサイトの紹介文のスタイル |
| ▼セルのスタイルクラス |
|
| TdRank |
順位が表示されているセルのスタイル |
| TdLink |
サイト、紹介文が表示されているセルのスタイル |
| TdHDI |
過去24時間のIN数が表示されているセルのスタイル |
| TdHWI |
過去7日間のIN数が表示されているセルのスタイル |
| TdTDYI |
今日のIN数が表示されているセルのスタイル |
| TdWI |
今週のIN数が表示されているセルのスタイル |
| TdMI |
今月のIN数が表示されているセルのスタイル |
| TdTI |
トータルのIN数が表示されているセルのスタイル |
| TdHDO |
過去24時間のOUT数が表示されているセルのスタイル |
| TdHWO |
過去7日間のOUT数が表示されているセルのスタイル |
| TdTDYO |
今日のOUT数が表示されているセルのスタイル |
| TdWO |
今週のOUT数が表示されているセルのスタイル |
| TdMO |
今月のOUT数が表示されているセルのスタイル |
| TdTO |
トータルのOUT数が表示されているセルのスタイル |
指定するときは、このサイトの場合
<STYLE TYPE="TEXT/CSS"><!--
body {font-family: "MS UI Gothic"; }
a:link { text-decoration:none;}
a:visited { text-decoration:none;}
a:hover { text-decoration:none;}
a:active { text-decoration:none;}
.Table1 { font-size: 10px; border-style: dotted}
.Table2 { font-size: 10px; border-style: dotted}
.Table3 { font-size: 10px; border-style: dotted}
.Table4 { font-size: 10px; border-style: dotted}
.Table5 { font-size: 10px; border-style: dotted}
.Table6 { font-size: 10px; border-style: dotted}
.Table7 { font-size: 10px; border-style: dotted}
.Table8 { font-size: 10px; border-style: dotted}
.Table9 { font-size: 10px; border-style: dotted}
--></STYLE>
となっているんだ。はっきり言ってわかりにくい！ 慣れるまでは、使わなくてもいいと思うけど、使えるということを覚えいてね。