研Q114.サイドバーで場所をとるランキングなどをスクロール表示にする方法。 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

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

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

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

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

ページランキング

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

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

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

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

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

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


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

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

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

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

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

1.まずHTMLタグでブログパーツに名前をつける。
2.その名前のパーツをスクロール表示するようにCSSに記述する。


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

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

2.その名前のパーツをスクロール表示するようにCSSに記述する。
CSS(スタイルシート)に、
/*人気記事ランキングスクロール*/
.PageRanking{
overflow: auto; height: 275px;
}


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

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

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

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

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

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


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


 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

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

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

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

これは使えますね

こんばんは。

これ、前から気になっていました。

早速持ち帰ってやってみたいと思います。

2013-08-03 19:59 | from たっくん | Edit

>たっくん

Re:これは使えますね
たっくん、こんばんは。
アメブロだと、HTMLタグで名前をつけられるのがフリースペースかフリープラグインだけになってしまいますが、
使っている方もいらっしゃいますね。

2013-08-04 18:11 | from 水村亜里 | Edit

No title

水村さん、こんにちは。
ブログパーツにスクロールをつける方法使ってみたいのですが、少しわからないところがあって、このコメントで質問してもよろしいでしょうか?

西川

2013-08-05 11:44 | from 西川

>西川さん

Re:水村さん、こんにちは。
西川さん、こんにちは。

>このコメントで質問してもよろしいでしょうか?

はい、どんどんご質問ください。

2013-08-05 16:10 | from 水村亜里 | Edit

No title

水村さん、こんばんは。
わからないところは
HTMLタグでブログパーツに名前をつける。
これは半角で重複しないものをつければいいのですね。

ランキングのタグを<div class="PageRanking">~</div>で
囲むとありますが、ランキングのタグがカウント取得タグと、表示タグの2つあるのですが、囲み方がわかりません。

2つのタグの最初<div class="PageRanking">と最後に</div>を貼り付けるのでしょうか?

別ブログで試しているのですが、スクロール表示
されないのです。

アドバイスお願いしますm(__)m

2013-08-06 22:46 | from 西川

>西川さん

Re:水村さん、こんばんは。
西川さん、こんばんは。

<div class="PageRanking">~</div>で囲むのは
スクロール表示させたい部分です。
取得タグと表示タグをまとめてスクロールするなら
<div class="PageRanking">「取得タグ」「表示タグ」</div>とします。
取得タグはスクロール不要なら
<div class="PageRanking"「表示タグ」</div>として取得タグは別に配置します。
取得タグと表示タグそれぞれに同じ名前をつけたら名前が重複してしまいます。

2013-08-06 23:24 | from 水村亜里 | Edit

No title

水村さん、こんにちは。

水村さんのパーツのようにするには、表示タグだけに
<div class="PageRanking"「表示タグ」</div>としたら
できるのでしょうか?

まだうまく表示されないのですが・・・・

よろしくお願い致します。

西川

2013-08-07 15:55 | from 西川

>西川さん

Re:水村さん、こんにちは。
西川さん、こんばんは。

ごめんなさい。
<div class="PageRanking">「表示タグ」</div>

の閉じ括弧「>」が抜けていました。
こんなちょっとしたことでも上手く表示されないことがあります。

2013-08-08 02:11 | from 水村亜里 | Edit

No title

こんにちは。
お体の方はいかがでしょうか?

先日非公開コメント送らせていただいたのですが
みていただけましたでしょうか?

まだうまくいかないままなのですが、
<div class="PageRanking">「表示タグ」</div> で
表示タグの箇所に入れているのですが・・・・

どこで間違えているのかわからなくて(-_-;)

西川

2013-08-11 16:40 | from 西川

>西川さん

Re:こんにちは。
西川さん、こんにちは。

非公開コメントも拝見いたしましたが、
間違いは見つけられませんでした、

現在のところ、<div class="PageRanking">が反映されていないようですが
試したあと消去されたのでしょうか?

<div class="pageranking">というネーミングで成功されているブログがありますので、
pagerankingにしてみるのもひとつの方法かもしれませんね。

あるいは、★<div class="PageRanking">とでもしてみて、反映されていることを確認するとか。
(★が該当箇所に表示されます。)

2013-08-11 18:18 | from 水村亜里 | Edit

できました♪

水村さん、こんにちは。
やっとできました。

幅が合ってないのですが、できてうれしいです。

何度もありがとうございました。

また質問があるのですが、取得タグと表示タグのことですが、今は表示タグだけでしています。

取得タグもすると、表示はどのようになるのでしょうか?

表示タグだけでもスクロールはできていますが、そこのところがわからなくて、また教えてくださいね。

2013-08-14 13:21 | from 西川

>西川さん

Re:できました
西川さん、おめでとうございます。

当ブログのACRページランキングは取得タグと表示タグを
いっしょにスクロール表示しています。
スクロール内に取得タグを入れても
取りこぼすとかというトラブルはないようです。

2013-08-14 14:54 | from 水村亜里 | Edit

ありがとうございました。

水村さん、いろいろとありがとうございました。

お体無理をされませんように、

これからもよろしくお願い致します。

西川

2013-08-16 20:58 | from 西川

トラックバック

http://aminamura.blog.fc2.com/tb.php/114-0657ae03

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。