忍者ブログで『このページの記事一覧』にスクロールバーを付ける方法！！
以前、このような記事を紹介しました。
忍者ブログで『このページの記事一覧』を作成する方法！！
ただ、この方法だと1ページの記事数が少なければいいですが、
多すぎると、この一覧だけで結構な場所をとる…
そういった場合、スクロールバーを付ければ問題ありません！
今回はその方法を紹介します。
【PR】
ちなみにスクロールバーを付けた形は、
当ブログでも実践していますので、見れるかと思います。
『このページの記事一覧』を作成し終えたら、
以前追記した下記内容を編集します。
【修正前】
.EntryTopBox {
border: 1px solid #000000;}
↓
【修正後】
↓
【修正後】
.EntryTopBox {
border: 1px solid #000000;
height: 120px;
}
赤字を追記しています。
『120』という数字は各デザインごとに調整してください。
これにより、高さを決定します。
そして、下記をCSS側に追記します。
div.EntryTopBox { overflow-y: scroll; }
これにより、枠の中におさまらなかったら、
縦にだけスクロールバーが表示されます。
横にもスクロールバーを表示したいなら、.EntryTopBoxの中に
『width: 〇〇px;』を追記し、
height: 120px;
}
赤字を追記しています。
『120』という数字は各デザインごとに調整してください。
これにより、高さを決定します。
そして、下記をCSS側に追記します。
div.EntryTopBox { overflow-y: scroll; }
これにより、枠の中におさまらなかったら、
縦にだけスクロールバーが表示されます。
横にもスクロールバーを表示したいなら、.EntryTopBoxの中に
『width: 〇〇px;』を追記し、
div.EntryTopBox { overflow-y: scroll; }
の『overflow-y』を『overflow』に修正します。
overflow ・・・縦横両方
の『overflow-y』を『overflow』に修正します。
overflow ・・・縦横両方
overflow-x・・・横のみ
overflow-y・・・縦のみ
となります。
以上で修正は完了です。
自分のテンプレートがどういうふうな
構成かがわかれば、すぐにできてしまいます。
逆にテンプレートがわからない場合は、注意してください。
今回は、忍者ブログというより、HTML・CSSの話でした。
参考になったら嬉しいです（＾＾）
overflow-y・・・縦のみ
となります。
以上で修正は完了です。
自分のテンプレートがどういうふうな
構成かがわかれば、すぐにできてしまいます。
逆にテンプレートがわからない場合は、注意してください。
今回は、忍者ブログというより、HTML・CSSの話でした。
参考になったら嬉しいです（＾＾）
【PR】
【他の記事】
[0回]
PR
