ブログの記事やプラグインなどをスクロールさせる方法

さて本日は、ブログのコンテンツなどをスクロールバーを使ってスクロールさせる方法をご紹介します。

こうした文章だけではなく、最新記事やカテゴリ一覧などのプラグインをスクロールさせることもできます。

またテンプレートをいじくれば、サイト全体のスクロールも可能です。

ではやり方を見ていきましょう。

Sponsored Link

overflowでスクロール範囲を指定する

style属性にoverflowプロパティを記述し、スクロールさせる範囲等を指定します。
 
・サンプル＆コード

<div style="overflow: scroll; width: 100%; height:150px;"> ここにスクロールさせたい内容を入れる </div>

overflow:　;　に下記のいずれかを指定します。

scroll　スクロールさせます。 hidden　スクロールさせず、はみ出た部分を隠します。 auto　ブラウザによってスクロールさせます。

基本はこれで完了です。

デザインを決める

あるいはデザインの調節も可能です。style属性はデザインの記述をするものなので、サイズだけではなく背景色や文字色なども自由に変えることができます。

・サンプル＆コード

<div style="overflow: scroll; width: 90%; height: 200px; background: gray; font-weight: bold; color: white;padding: 0 10px;"> ここにスクロールさせたい内容を入れる </div>

Sponsored Link