記事内の引用が長くて、とても読みにくくなってしまうことがありますよね。そんなときに、引用の部分だけにスクロールバーがつけばとても便利ですよね。読んで欲しい呼びかけや注意などにも有効だと思います。
このカスタマイズは、CSSがいじれるブログならどこのブログでも可能です。
このカスタマイズは、のんびり前進じたばた生活のまゆびさんの記事
スクロールバー応用してみました!! を参考にさせていただきました。
まゆびさん、どうもありがとうございました m(_ _)m
CSS編集なんて面倒なしで、
簡単にスクロールバーをつけたい
という方におすすめ!記事投稿欄に、
下のコードをコピペして投稿してください。
<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;">
スクロールバーをつけたい引用部分
</div>
使ってみたいという方はコピペしてくださって結構ですよ♪(笑)
もちろん高さの
150pxやカラーコードの
#ffffffは好みで変更してくださいね。
↓↓↓↓↓↓こんな感じになります。↓↓↓↓↓↓
overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;
- overflow:□□□;は表示しきれない部分の処理を指定します。□□□はautoとするとブラウザの自動調整により、この例では、height : 150px;となっていますので、高さが150pxを超えた場合には、縦スクロールバーがつくことになります。
- scrollbar-base-color:□□□;はスクロールバーの基本の色を指定します。□□□には、お好みのカラーコードを記入してください。
CSS編集は別に苦じゃないという方はここから先を参考にしてください。(笑)
- [ブログ設定]-[スキン変更]-[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の欄の一番下の余白でクリックします。
- 一番下の余白部分に、下のコードをコピペして追加しましょう。
必ずバックアップしましょう!
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
blockquote.type1
{
padding: 5px;
margin : 15px 20px 15px;
border: 1px #CC6600 dotted;
background-color:#ffffff;
overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;
}
引用部分について詳しくはコチラ
.type1は半角英数字でしたら、どんな言葉でも構いません。ただし、同じ言葉が使われている可能性のないものにしましょう。
- overflow:□□□;は表示しきれない部分の処理を指定します。□□□はautoとするとブラウザの自動調整により、この例では、height : 150px;となっていますので、高さが150pxを超えた場合には、縦スクロールバーがつくことになります。
- scrollbar-base-color:□□□;はスクロールバーの基本の色を指定します。□□□には、お好みのカラーコードを記入してください。
- 「保存」してください。
- 記事を投稿するときに、『引用』したい部分を<blockquote class="type1">~</blockquote>の中に書けばOKです。
これで、引用にスクロールバーが付けられるようになりましたね。
スクロールバーを付けたい部分のCSSコードに
overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;
という3行を追加すれば、どこにでもスクロールバーをつけることができるというわけですね。
<yozoからのお願い>
私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン(テンプレート)改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
←ぼちっと応援お願いします♪ m(_ _)m