超簡単!シンプルなスクロールバーを設置してみよう

超簡単!シンプルなスクロールバーを設置してみよう

今回は、HTMLタグでブログやHPにコピペするだけで、シンプルで簡単なスクロールバーを設置してみましょう。スクロールバーを使うと、限られたスペースでもコンパクトにまとまりますね。

では早速、シンプルなスクロールバーを設置してみよう。

サンプルをスクロールしてみよう

以下のサンプルは、口コミや感想などを記事に入れるときなどに使えそうな、枠線の無いシンプルなスクロールバーです。

サンプルをスクロールしてみてください。

簡単スクロールバー

 

シンプルスクロールバー

簡単スクロールバー

シンプルスクロールバー

簡単スクロールバー

シンプルスクロールバー

簡単スクロールバー

シンプルスクロールバー

シンプルなスクロールバーを設置する方法

下記をコピペして、あなたのすきな場所に貼ってください。


<div style="margin:0px;padding:0px;" align="center">
<div style="margin:0px;padding:0px;line-height:1.3;">
<div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;text-align:left;height:200px;">
ここに文章や画像をいれてください。
</div></div></div>

幅は、サイトの幅に合うようにオートになっているので、サイドバーでもOKですよ。

高さの変更はheight:200px;の数字を変えれば、お好みの高さに指定できます。

おわりに

すごく簡単に設置でき、ページがスッキリするスクロールバー、ぜひ試してみてくださいね。

スポンサーリンク
同じカテゴリーのコンテンツ一覧