BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪
トータル今日昨日 Since 29 November '05
ここのブログの記事をご覧のみなさんへ
  ここのブログを見に来てくださってありがとうございます♪m(_ _)m 勝手ながら、ここのブログは2006/08/02に
新ブログ『yozoの気が向いたと記2.0』に、非公開コメントを除く、すべての記事、及びコメント、トラックバックを
移転しております。また、移転以降、スパム対策のため、ここのコメント・トラックバックは受け付けておりません。
ご意見・ご感想は、お手数ですが、新ブログの同じタイトルの記事にて、お聞かせくだされば幸いです。m(_ _)m
新ブログ→yozoの気が向いたと記2.0 http://yozoblog2.blog63.fc2.com/
yozoの気が向いたと記
yozoの気が向いたと記2.0
ぽちっとお願いします♪

yozoの関連リンク

BlogPetのお友達

おすすめブログ紹介

BlogPet背景作家のみなさん

素材屋のみなさん

おすすめBlogGroup


BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪
簡単にスクロールバーをつけましょう♪
記事内の引用が長くて、とても読みにくくなってしまうことがありますよね。そんなときに、引用の部分だけにスクロールバーがつけばとても便利ですよね。読んで欲しい呼びかけや注意などにも有効だと思います。このカスタマイズは、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編集は別に苦じゃないという方はここから先を参考にしてください。(笑)
  1. [ブログ設定]-[スキン変更]-[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の欄の一番下の余白でクリックします。

  2. 一番下の余白部分に、下のコードをコピペして追加しましょう。
    必ずバックアップしましょう!
    いつも書いてますが、編集する前に、必ず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:□□□;はスクロールバーの基本の色を指定します。□□□には、お好みのカラーコードを記入してください。


  3. 「保存」してください。


  4. 記事を投稿するときに、『引用』したい部分を<blockquote class="type1">~</blockquote>の中に書けばOKです。


これで、引用にスクロールバーが付けられるようになりましたね。
スクロールバーを付けたい部分のCSSコードに
overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;
という3行を追加すれば、どこにでもスクロールバーをつけることができるというわけですね。

<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン(テンプレート)改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m


人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m

[PR]
by yoblog | 2006-06-27 19:23 | ブログの手引き |TOP▲
<< BlogPet俳句集停止! |▲TOPにもどる▲| バトン? >>
トップ
2006/08/02 より、『yozoの気が向いたと記2.0』に移転しました。

新ブログはコチラです。
↓↓↓↓↓↓↓
yozoの気が向いたと記2.0

「うさも」が書いたBlogです。
次女うさ「うさみ」もいますよ♪

↓↓↓↓↓↓↓
うさもの気が向いたと記

末うさ「うさめ」のBlogです♪
↓↓↓↓↓↓↓
yozoのおすすめ本


人気ブログランキング - yozoの気が向いたと記
検索
カテゴリ
フォロー中のブログ
以前の記事
最新のトラックバック
データのバックアップとイ..
from yozoの気が向いたと記2.0
BlogPet俳句を求め..
from うさもの気が向いたと記
コレけっこう間違えている..
from 「感動創造カンパニー」城北の..
たまごの「キリぺた」のーと
from それはそれとして。(仮)
うさびのキリぺた帳 11
from のんびり前進じたばた生活
エキサイトのネームカード..
from ととろのおもちゃ箱
エキサイトネームカード作..
from 京ポンで今日もゆく〜
BlogPetのお出かけ
from 果報は寝て待て(-_☆)
部屋バトン
from ROOM-M
エキサイトネームカードを..
from のんびり前進じたばた生活
エントリします!「俳句を..
from 感謝の日記
トッラクバックを学ぶ
from 感謝の日記
うさもちゃんにツッコミ!..
from のんびり前進じたばた生活
不思議の国のうさも
from つなビィ - yozoblog
まゆびさん、ついにBlo..
from つなビィ - yozoblog
次は『と』です@Blog..
from ◇藍真珠のつぶやき◇
高校野球 脳梗塞克服の投..
from ひでさん♪の雑記帳
「俳句を求めて三千里」エ..
from のんびり前進じたばた生活
「俳句を求めて三千里」エ..
from のんびり前進じたばた生活
ぴょんの夏休み前お友だち..
from 夢みるととろ日記
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧