今回の記事です!

忍者ブログで『このページの記事一覧』にスクロールバーを付ける方法!!


以前、このような記事を紹介しました。
忍者ブログで『このページの記事一覧』を作成する方法!!


ただ、この方法だと1ページの記事数が少なければいいですが、
多すぎると、この一覧だけで結構な場所をとる…

そういった場合、スクロールバーを付ければ問題ありません!

今回はその方法を紹介します。

ちなみにスクロールバーを付けた形は、
当ブログでも実践していますので、見れるかと思います。

『このページの記事一覧』を作成し終えたら、
以前追記した下記内容を編集します。


【修正前】

.EntryTopBox {
  border: 1px solid #000000;}



【修正後】
.EntryTopBox {
  border: 1px solid #000000;
  height: 120px;
}


赤字を追記しています。
『120』という数字は各デザインごとに調整してください。

これにより、高さを決定します。


そして、下記をCSS側に追記します。

div.EntryTopBox { overflow-y: scroll; }


これにより、枠の中におさまらなかったら、
縦にだけスクロールバーが表示されます。

横にもスクロールバーを表示したいなら、.EntryTopBoxの中に
『width: 〇〇px;』を追記し、
div.EntryTopBox { overflow-y: scroll; }
『overflow-y』を『overflow』に修正します。


overflow  ・・・縦横両方
overflow-x・・・横のみ
overflow-y・・・縦のみ

となります。


以上で修正は完了です。


自分のテンプレートがどういうふうな
構成かがわかれば、すぐにできてしまいます。

逆にテンプレートがわからない場合は、注意してください。

今回は、忍者ブログというより、HTML・CSSの話でした。

参考になったら嬉しいです(^^)


⇒HTMLに関してはこちら(楽天市場)



【気になるアイテム】


【他の記事】
 カテゴリ

拍手[0回]

PR