sidebar.jp FAQ

2004.10.05

リンク元/アクセスランキングだけを利用する方法

sidebar.jp を利用すると、任意のページのリンク元リスト、サイト内アクセスランキングを表示できます。

ログイン後に表示される「はじめかた」の下にある、「アクセス統計を使いたい」をご覧ください。JavaScript でリンク元/アクセスランキングを表示できます。

この際、出力される HTML には以下のクラス指定がされています。

sb-frame	(Applet や)出力全体を囲む div 要素
sb-referrers	リンク元一覧全体を囲む div 要素
sb-accesses	アクセス数の多いページ一覧全体を囲む div 要素
sb-title	リンク元/アクセスランクのタイトル文字列を囲む div 要素
sb-list	リンク元/アクセスランクの一覧部分の ul 要素

ですので、たとえば以下のようにスタイルシート(CSS)を記述しておくと、下の例のような表示になります。

/* 投稿者(このらくがきは～が描きました) */
.sb-author {
    font-style: bold;
    font-size: x-small;
}

/* 部品全体を囲むボックス(div) */
.sb-frame {
    background-color: #eeffee;
    width: 100%;
}

/* 「このページのリンク元」全体を囲むボックス(div) */
.sb-referrers {
    border: 1px dotted #aaaaaa;
    padding-left: 4px;
    background-color: #eeeeff;
    white-space: nowrap;
}

/* 「アクセスの多いページ」全体を囲むボックス(div) */
.sb-accesses {
    border: 1px dotted #aaaaaa;
    padding-left: 4px;
    background-color: #ffeeee;
}

/* "このページのリンク元"或いは"アクセスの多いページ"の文字列 */
.sb-title {
    text-align: center;
}

/* ランキングリスト部分の ul タグ */
.sb-list {
    text-align: left;
    padding: 4px;
    margin: 0px;
    width: 96%;
    height: 150px;
    overflow: auto;
}

/* ランキングリスト部分の li タグ */
.sb-list li {
    color: #333333;
    font-size: x-small;
    margin-top: 4px;
    list-style-type: none;
}

表示例

注目するところは、 .sb-referrers 中の white-space: nowrap; と、 .sb-list 中の height: 150px; overflow: auto; の部分、そして、 .sb-list li の list-style-type: none; あたりです。

white-space: nowrap; を指定すると、行の折り返しを行わなくなります。リンク元やタイトルが画面からはみ出して横スクロールになってもいいからアクセス数ごとに一行に揃って欲しい場合はこれを指定します。

overflow: auto; は width/height と併用することで、width/height で指定したサイズを超える場合にスクロールバーを表示し、iframe のような見た目にします。

li 要素に list-style-type: none; を指定すると、標準で表示される・(黒丸)が表示されなくなり、左端に揃えられます。

他にもスタイルの指定によりさまざまな見た目にできますので、いろいろ工夫してみてください。

「アクセスの多いページ」に表示されるタイトル文字列に関しては、sidebar.jp FAQ: 「アクセスの多いページ」のタイトルを調整するもご覧ください。

2004.10.05 03:13 [ちょっとしたコツ] | PermaLink

トラックバック

この記事のトラックバックURL: