研Q114.サイドバーで場所をとるランキングなどをスクロール表示にする方法。

スクロール表示でサイドバーのスペースを有効に使いたい。

2011.07.09　大池公園　紙芝居 posted by (C)ひでわく

たとえば右サイドバーの上のほうに置いてあるページランキング。



ブログにおいでいただいたお客様に少しでもたくさんの記事を読んでいただけるように、よく目立つ特等席に置いてあります。

いろいろな記事を読んでいただきたいので、表示件数は設定可能な最大の50件にしてあります。

しかし、50件そのままを表示したのでは場所をとりすぎて、その下においてあるブログパーツを見ていただくことができなくなります。

目立つところに置いてある第一の目的は、「そこにある」ことに気づいていただければそれで十分です。

「他の隠れているものも見てやろうかな」と思ってくださった方はスクロールしてぜんぶ見ていただけるように、ページランキングをスクロール表示にしました。

他にも、ｉ２ｉアクセスランキング、最近のコメント一覧などなど、必ずしも全件をいつも表示していなくてもいい、スクロール表示にすると効果があるブログパーツがいくつかあります。

ブログパーツをスクロール表示させる方法。

最初はどなたかがブログでスクロール表示しているのを見て、ソースコードをマネたのだったと思います。

ソースコードは著作物ではないので著作権はありません。

あなたがソースコードを自由にマネてもOKです。

ある部分をスクロール表示するには、大まかにいってふたつの手順が必要です。

１．まずHTMLタグでブログパーツに名前をつける。

２．その名前のパーツをスクロール表示するようにCSSに記述する。

これだけのことです。

１．まずHTMLタグでブログパーツに名前をつける。

「アクセスが多いページ」のパーツに名前をつけるには、「アクセスが多いページ」のタグを
<div class="PageRanking">～</div>
で囲んで、たとえばPageRankingという名前をつけます。

ネーミングのルールは半角で他の名前と重複していなければなんでもいいようです。

２．その名前のパーツをスクロール表示するようにCSSに記述する。

CSS（スタイルシート）に、
/*人気記事ランキングスクロール*/
.PageRanking{
overflow: auto; height: 275px;
}

という記述を追加します。
追加する場所はCSSのなかのいちばん最後というのが、常識的なやりかたです。

ここでは、PageRankingという名前のパーツを、高さ275pxでスクロール表示する
と書いてあります。

高さは実際に表示するスペースに合わせて設定すればよろしい。

幅は、表示する場所によって決まってしまうようです。
実際にはACR WEBランキングの表示幅を調整して、スクロールスペースにうまく収まるようにしました。

CR WEBランキングの表示幅を広くとりすぎると、横スクロールバーが出てしまいます。

横スクロールバーが出ない範囲でいちばん広い幅に設定しました。


関連記事：（別窓で開きます）
研Q78.ページランキングをブログに設置する効果とは？
研Q89.アクセスアップの切り札、逆アクセスランキングとは？

にほんブログ村

表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾200posted by +M Inamura (水村亜里)