ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

WordPress – カスタマイズ – スクロールバーを設置する。

   

スクロールバーを設置する

スクロールバーを設置してみた結果はこちら

下のようなスクロールバーを設置してみたのでメモ的に。

テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト
テスト

スクロールバーを設置する場合のソースコード

やってみよう!と思ったのは、新着記事などを書いた時に、

・数を限定して一覧表示しなければならない。

・本文の幅よりも狭い範囲で設置したい。

そういった理由から。

ソースコードは下記になります。

高さ(height:300px;)や幅(overflow:auto;width:90%;)、背景色(background-color:#ffedf8;
)などはお好みで調整。


<!-- スクロールバー -->

<div style="border:1px solid #ccc;
            height:300px;
            overflow:auto;width:90%;
            border-radius:3px;
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
            background-color:#ffedf8;
            margin:auto;padding:10px;">

スクロールバーの中の内容はここに記載!

</div>

<!-- スクロールバー -->

まとめ

ソースを加えるだけの簡単カスタマイズでした。

参考にさせていただいたのはこちらのサイトです。

スクロールバー付きのテキストボックスをサイドバーに貼る | comemo

 - Web, wordpress