--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年06月27日

簡単にスクロールバーをつけましょう♪

 記事内の引用が長くて、とても読みにくくなってしまうことがありますよね。そんなときに、引用の部分だけにスクロールバーがつけばとても便利ですよね。読んで欲しい呼びかけや注意などにも有効だと思います。このカスタマイズは、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. 一番下の余白部分に、下のコードをコピペして追加しましょう。
    div.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. 記事を投稿するときに、『引用』したい部分を<div class="type1">?</div>の中に書けばOKです。

 これで、引用にスクロールバーが付けられるようになりましたね。スクロールバーを付けたい部分のCSSコードに下の3行を追加すれば、どこにでもスクロールバーをつけることができるというわけですね。

overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;

  • yozoからのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

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

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New BlogPet俳句集停止! | Top | バトン? Old≫

トラックバックURL


トラックバック

ありがとう、BlogPet俳句集 from 夢みるととろ日記
BlogPetぴょんを飼うとともにお世話になっていた『あたまがうにになる』のBlogPet俳句... [Read More]

コメント

yozoさん、こんばんは♪(*^-^)ニコ
トラバありがとうございましたー♪<(_ _)>
これは分かりやすいですねー!!
まゆびはクラスを使ったスクロールバーしかつけたことがなかったですが、これなら手軽につけたいところにだけスクロールバーをつけることができていいですね♪(゚-゚*)(。。*)ウンウン
まゆびも参考になりました!!ヽ(*^^*)ノ
トラックバックこちらからもさせていただきました♪

コメント

>まゆびさん、こんばんはー♪
>トラバありがとうございましたー♪<(_ _)>
いえいえ♪こちらこそ、CSSはいつも参考にさせていただいてますよ。
その上、返しのトラバまでいただけてありがとーございまっすm(_ _)m
>これなら手軽につけたいところにだけスクロールバーを
>つけることができていいですね♪(゚-゚*)(。。*)ウンウン
そうなんですよ。CSSファイルにコードを記入するのが作法でしょうけど、
面倒な人用に手軽にスクロールバーをつけるコードを紹介しました。
どうやら師匠(まゆびさん)に恩返しできたようですね♪(*^.^*)エヘッ

コメント

yozoさん、こんばんは^^
記事投稿欄のスクバは、こんなふうにつけられていたのですね。
コピペokのほうは、簡単でありがたいです(^-^)
スキン変更のCSS編集は、無知な私には理解が難しいですが、理解はおいといてyozoさんが書いてくれたようにすることならできそうです(^^ゞ ん? 
自分で少しは勉強しないといけませんね。
素敵な手引きをありがとうございます♪

コメント

こんばんは!
これは記事中にスクロールバーが付けられていいですね。サイドバーでも出来るのかな?
ココログで出来るかはちょっとやってみないとわかりませんね。たぶんマイリストで出来そうな気もするんですが・・・あまりあそこでCSSをさわらないので(^^;
スクロールは上手く使うと効果的なのでこれから使い方を考えてみます。
ところで記事中の折り畳みでこれと似たようなのあります?>こらっ!

コメント

>ゆうゆさん、こんばんはー♪
>記事投稿欄のスクバは、こんなふうにつけられていたのですね。
>コピペokのほうは、簡単でありがたいです(^-^)
お役に立てたようでうれしいですよ。CSSファイルへの記述は面倒でしょうから、簡単な設定でスクバがつくようにタグを作ってみました。これはこれで便利だなぁ~って自分でも思いましたよ(笑)(*^-^)ニコ
>理解はおいといて
はい♪習うよりも慣れろですよ。別にプロになるわけじゃありませんからね。勉強の基本の質がWebデザイナー志向の方と私たちは違うわけですからね。理解なんてイマイチでいいと思ってますよ(笑)
楽しみましょうね♪(*^0゚)v ィエーイ☆彡

コメント

>ととろさん、こんばんはー♪
>これは記事中にスクロールバーが付けられていいですね。
>サイドバーでも出来るのかな?
いけますよー♪サイドバーの横幅に自動的に合いますからね。
ブラウザは本当にかしこい!ってほめてあげたくなりますよ(笑)
(^-^*)(・・*)(^-^*)(・・*)ウンウン
>ココログで出来るかはちょっとやってみないとわかりませんね。
>たぶんマイリストで出来そうな気もするんですが・・・
マイリストのメモを使ってBlogPet表示できるはずなのに、yozoはココログフリーだから無理なのでしょうか?(謎)とりあえずフリーでは無理でしたが、ととろさんのベーシック(?)なら出来ると思いますよ。('-'*)エヘ
>スクロールは上手く使うと効果的なのでこれから使い方を考えて
>みます。ところで記事中の折り畳みでこれと似たようなのあります?
あはは・・・ちょっと今Moreの折りたたみを勉強しようかなって思ってますが、どうでしょうね。また個別に報告しますね。(笑)(^○^)

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
うぉぉぉ・・・なんて技なんでしょう。
早速φ(・ω・*)フムフムφ(。_。*)メモメモ(笑
本体のCSSをいじるのは荷が重いですがこれなら私にもできそうです。
今しっかりコピーさせていただきましたのでいつかやってみたいと思います!
サイドバーにも応用できるようですね。画期的ぃ~(*´ω`*)ポッ

コメント

>モンビッケさん、こんばんはー♪
>うぉぉぉ・・・なんて技なんでしょう。
>早速φ(・ω・*)フムフムφ(。_。*)メモメモ(笑
お役に立てたようでうれしいでっす♪モンビッケさんのFC2なら、プラグインにも使えますよ。何でもはさんでスクロールしてくださいね♪(笑)
(゚ー☆)(。_★)(゚-☆)(。_★)ウンウン
>本体のCSSをいじるのは荷が重いですが
>これなら私にもできそうです。
あはは・・・まずは設置してみることですよ。実はめっちゃ簡単って
後でわかりますからね。わからなくても別に問題ないですしね(苦笑)
ヾ(゙ε゙*)ヾ(*゙ε゙*)ヾ(*゙ε゙)ノハイ ハイ ハイ!

コメント

yozoさん、こんばんわ"(  ´   ▽   `  )ノ"ちわぁ
スクロールってどうやるのだろうと思っていましたが、こうすればいいですね。今度、長い文があったら、使ってみようと思います。

コメント

こんばんはーyozoちゃん。
ほーーー。こうしてやっていたんだねー。
私もサイドバーで使ってみたいなぁーなんて思ってたの。(yozoちゃんにヘルプしようかなぁー。なんても考えていたりして)
なんか。まだやってはいないんだけど、今日じっくり読んでみて、ちょっとわかった気がする・・。
サイドバーで試してみようかなぁー・・・。
yozoちゃんの記事参考にして・・・。
あ、、、またヘルプーーーーって行くかもだけど・・・。オシエテネ♪

コメント

記事を書きつつこれをお試ししていたら遅くなっちゃった(^^;
6月28日付けの記事にてこれを使わせていただきました。記事中にリンクをさせていただきましたのでよろしくお願いします。
実はCSSの方はいろいろやってみたけどダメだったんだ(泣)だからお手軽の方を使いました。
でもこっちすごく簡単でいいわぁ♪ありがとうございました。

コメント

>ネーちゃんさん、おはよーございまっす♪
>スクロールってどうやるのだろうと思っていました
ふふふ・・・意外と簡単でしょ。まずはシンプルにスクロールバーを
付けてみて、凝ったことをしたいときは、調べれば簡単にできますよ。
習うより慣れろですからね(笑)(*^-°)v オッケェー♪
>今度、長い文があったら、使ってみようと思います。
是非試してみてくださいね。便利ですよ(笑)(゚ー゚)(。_。)ウンウン

コメント

>enuちゃん、おはよーございまっす♪
>私もサイドバーで使ってみたいなぁーなんて思ってたの。
>(yozoちゃんにヘルプしようかなぁー。なんても考えていたりして)
ふふふ・・・メモ帳の中のリンクリストにつけるのですか?
バッチリ設置できますよ。ただ、エキサイトブログの場合は「最新のコメント」「最新のトラックバック」などには、個別に付けられないのですよ。CSSのクラスがわかればできるのですけどね・・・(苦笑)ウーン (Θ_Θ;)
>サイドバーで試してみようかなぁー・・・。
お時間のあるときに、試してみてくださいね(笑)コピぺして「高さ」と
「色」をお好みで調整するだけですからね。簡単ですよ♪(゚д゚)(。_。)ウン
>あ、、、またヘルプーーーーって行くかもだけど・・・。オシエテネ♪
あはは・・・ご遠慮なくどうぞ♪o(*⌒O⌒)bふぁいとっ!!

コメント

>ととろさん、おはよーございまっす♪
>記事を書きつつこれをお試ししていたら遅くなっちゃった(^^;
わぁ~♪早速使ってくださったのですねぇ~♪お手軽版の方が役に立ちましたか♪記事での紹介もありがとーございまっす♪m(_ _)m
>実はCSSの方はいろいろやってみたけどダメだったんだ(泣)
>だからお手軽の方を使いました。
ココログのCSS編集のどこにでも、blockquoteのコードをコピペして
同様に記事に投稿するときに blockquoteタグで囲めば出来るはずですよ。でもお手軽の方のコピペでもいいですよね。たくさん使うのでしたら
blockquoteを使われた方がいいですよ。(*^-゚)vィェィ♪

コメント

こんにちはー。
早速やってみたよー。でーーーヘルプですーーーー!!!
ごめんねー。サイドバーはTBとかでやりたくて出来ないといわれたので、記事でやってみました。2日前の記事なんだけど・・・。
囲いの色って変えられないのかしら???
backgraundを変更したら、背景の色が変わっちゃうし。
わかんないヨーー・・・。急がないからいつでもいいので、おしえてーー。
さらに。これでカラーパレットの意味がわかって使わせてもらったよー。
ありがとう。色々勉強になります。

コメント

>enuちゃん、こんにちはー♪
>早速やってみたよー。でーーーヘルプですーーーー!!!
えーと・・・ちゃんと出来てますね。オメデト(*^ー^*)∠※Pan!!。・:*:・
CSS編集でblockquoteで作成したのですね。
ヘルプとは・・・囲み線の設定ですね。
border
の『#CC6600』のカラーコードを変更すれば出来ますよ♪
やってみてくださいね。詳しくはコチラ↓
http://yozoblog.exblog.jp/3013477/
(記事内リンクがおかしかったですよね。
 修正しておきました。ごめんなさいでした m(_ _)m )
カラーパレット使ったのですね。便利でしょう。いちいちプレビューは溜まりませんからね。お役に立ててうれしいですよ♪(゚ー゚)(。_。)ウンウン

コメント

こんにちは。
いつもyozoさんの所におじゃまする度に
記事にスクロールバーってどうやるんだろう?
すごいなぁ~って思ってたんです♪
当然CSS編集なんて出来ませんから・・・コピペの方になるんですが
これはライブドアでも出来るのでしょうか?

コメント

>マミーさん、こんばんはー♪
>いつもyozoさんの所におじゃまする度に
>記事にスクロールバーってどうやるんだろう?
>すごいなぁ~って思ってたんです♪
あはは・・・参考にして、スクロールバーを手軽につけてみてくださいね。
記事のレイアウトも色々凝った感じにできますよ。(*^-^)ニコ
>当然CSS編集なんて出来ませんから・・・コピペの方に
>なるんですがこれはライブドアでも出来るのでしょうか?
大丈夫ですよ。試してみてくださいねー♪ヽ(=´▽`=)ノ

コメント

yozoさん、こんにちは♪
enuさんのところ見てこちらにきました。
気にとめてくださってありがとうございます~。
でもでも私、ホントに全然わかんなくって今回「スクロールバー」という単語の意味をわかっただけでも自分ですごいと思っています!
(笑ってやってくださいな)
いつもご親切にありがとうございます(^^)。
わからないときは遠慮しないで聞きに来ますね♪
あまりに初心的な質問でも驚かないで下さいね。
その時はよろしく~。

コメント

>aiwhasさん、こんにちはー♪
>enuさんのところ見てこちらにきました。
気付いてくださったのですね。ありがとーございまっす m(_ _)m
>でもでも私、ホントに全然わかんなくって今回「スクロールバー」
>という単語の意味をわかっただけでも自分ですごいと思っています!
いえいえ♪言葉なんてもっとわかりやすくしてくれればいいのにって
yozoも常々思ってますよ(苦笑)(  ̄っ ̄)ムゥ
>いつもご親切にありがとうございます(^^)。
>わからないときは遠慮しないで聞きに来ますね♪
はい♪遠慮なくどうぞ。馬鹿にすることはありませんからね。
yozoもここに来てくださっているお友達もね。(*'-')b OK!

コメント

遅ればせながら、サイコロキャラメルのような脳みそをフルに活用して、yozoさんの書かれたとおりにやってみました。
(実は、何度か挑戦して途中で脳みそが融けてしまって出来なかったのですが、今日は『出来そう!』と閃きました)
お蔭様で、サイドが少しだけすっきりしました。
どうもありがとうございます。(って、今時間まで掛かったのですがね(^^ゞ

コメント

>凸 ねこさん、おはよーございまっす♪
>遅ればせながら、サイコロキャラメルのような脳みそをフルに
>活用して、yozoさんの書かれたとおりにやってみました。
できましたね♪左サイドにスクロールバーがバッチリ設置できていましたよ。オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
お役に立ててうれしいですよ!苦労されたのですよね。慣れるまでは
面倒ですけど、Seesaaはコンテンツごとに一つずつ設定できるので
細かく調整できるのがいいですよね♪(゚ー゚)(。_。)ウンウン

コメント

ありがとうございます!!
記事にしていただいているのを気づいてませんでした・・・Σ(T□T)
ご挨拶が遅くなってすいません・・・
本当に記事にしていただいて、ありがとうございます!
これから頑張ってブログをきれいに見やすくしてみます!
それから、画像のアップロードの仕方、yozoさんのおかげでやっとわかりました!
記事にしないとURLが取得できないとばかり思ってました!
ありがとうございました!

コメント

>ぴよこさん、おはよーございまっす♪
>記事にしていただいているのを気づいてませんでした・・・Σ(T□T)
>ご挨拶が遅くなってすいません・・・
いえいえ♪お気になさることはありませんよ。yozo自身の勉強にも
なるし、他のお友達にも喜ばれる内容でしたからね♪(^○^)
>これから頑張ってブログをきれいに見やすくしてみます!
じっくりさわっていけばいいですよ。いつでも見に来てくださいね♪
>それから、画像のアップロードの仕方、
>yozoさんのおかげでやっとわかりました!
お役に立ててうれしいですよ♪わかったら、実は簡単なのですよね。
自信もってくださいね♪パチッ☆-(^ー'*)(,_,*)ウンウン♪

コメント

これもまた素敵に役立つ記事ですねぇ!
早速さきほど自分のブログのCSSに記述を加えてみたのですが、
なぜかすべての引用に「height
「overflow
yozoさんのようにblockquoteもタイプをCSS上にいくつか用意して
記事内で使い分けるようにしたほうがいいのかなぁ?
なんて、ちょっと悩み中ですv

コメント

>mioさん、こんにちはー♪
>これもまた素敵に役立つ記事ですねぇ!
ありがとーございまっす♪とくにCSSを直接書く方法が面倒でなくて公表でした。同じ内容だということがわかればCSS編集もやりやすくなりますので、機会があれば両方を記事にしていくようにしたいです。(笑)
>なぜかすべての引用に「height
>しまうんですよねぇ。「overflow
>なぜなんだろう(゚_ 。)?
overflow:auto;とheight:☆◎△○;のセットを設定されたのですよね。デフォルトのblockquoteは置いといて、新しく定義した方が確実かも。勝手にROOM-Mのソースを覗かせていただいたのですが、ちょっと不明でした。お役にたてませんでしたね。m(_ _)m

コメント

早速返信いただき とても嬉しいです
リンクも張っていただきましてありがとうございますm(。_。;))m
粗雑な文章ですが 私なりにご紹介させていただきました。
後日また背景紹介用の引用を使用したときに触れたいと思っております
参考になる記事が盛り沢山で、お世話になることもしばしばかと思いますが
これからもよろしくお願いします

コメント

>ウッキさん、おはよーございまっす♪いらっしゃいませー♪
コメントありがとうございます♪うまく投稿できたようですね。
その節はお手数及び迷惑おかけしました。 m(_ _)m
>粗雑な文章ですが 私なりにご紹介させていただきました。
わぁ♪スクロールバーがばっちり設置できていますね♪
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
お役に立ててうれしいですよ♪
>参考になる記事が盛り沢山で、お世話になることもしばしばかと
>思いますがこれからもよろしくお願いします
ははは・・・yozoの記事で参考になるようでしたら、いくらでも活用してくださいね。またこのように、うまくいったかどうかもコメントしてくだされば、yozoにとっても励みになります。もちろん、質問等あれば遠慮なくコメントしてくださいね。(答えられないかもしれませんが・・・(苦笑)
こちらこそ、yozoを紹介してくださった上に、リンクまでしていただいて、ありがとうございます♪今後ともよろしくお願いします m(_ _)m

コメント

ご無沙汰してます。お元気そうで何よりですー。お引越しされてまたバージョンアップ!って感じですね!

スクロールバー、またまたお世話になりました!友達に「どーやってつけたの!」と聞かれたけども、説明はできないので(--;)「yozoさんところで教えてもらってきて!」と丸投げさせてもらいました。

友達共々お世話になると思います。またよろしくですー。



コメント

>sorahinamamaさん、おはよーございまっす♪いらっしゃいませー♪
おかげ様で、夏バテもせず、元気いっぱいですよ。
こちらまで遊びにきてくださってありがとーございまっす♪m(_ _)m

>スクロールバー、またまたお世話になりました!
わぁ♪設置できましたか♪オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
今、お邪魔してきましたよ!(*^-゚)vィェィ♪
ばっちりでしたね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン
きれいに使えていましたよ♪

>友達に「どーやってつけたの!」と聞かれたけども、
>説明はできないので(--;)「yozoさんところで教えてもらってきて!」と
>丸投げさせてもらいました。
あはは・・・どうぞ♪どうぞ♪いつでもいらっしゃってくださいね。
こちらの記事が、お友達の役に立ってくれたらうれしいですよ。
紹介してくださってありがとーございまっす♪m(_ _)m

>友達共々お世話になると思います。またよろしくですー。
こちらこそ、突然 の引越しでご迷惑かけました。
今後ともよろしくお願いしまっす m(_ _)m

コメント

yozoさん こんにちは~(^^)
大変ご挨拶が遅くなったのですが・・・・(汗)
念願の「スクロールバー」を付けることに成功できて嬉しくてたまらない私です。
ウッキさんのところで拝見してyozoさんにご指南いただいている事は知っていたのですが、難しいだろうと思っていました。
しかしどうしても付けたくなってyozoさんの所を検索して見つけました♪
今回2度目のバーも、いとも簡単に付けることが出来て「あっ!1度目の お礼のご挨拶もまだだった~」と慌ててやってきた次第です・・・
どうもありがとうございました感謝ですm(__)m
これからもどうかよろしくお願いします。

コメント

>waleaさん、こんばんはー♪

>大変ご挨拶が遅くなったのですが・・・・(汗)念願の「スクロールバー」を
>付けることに成功できて嬉しくてたまらない私です。
わぁ♪うまくできましたか♪オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
お役に立ててうれしいですよ。こうしてコメントいただけると本当に励みになりまっす(^○^)

>今回2度目のバーも、いとも簡単に付けることが出来て
>「あっ!1度目の お礼のご挨拶もまだだった~」
えっ?もう2回も使っていただけたんですか!才才-!!w(゚o゚*)w
それは知りませんでした♪早速お邪魔させていただきまっす♪ε=ε=ε=ヾ(э^・ェ・^)эニャホー
バッチリ設置できていましたね。スクロールバーの直前に<br style="clear:both;" />を入れておくと、画像と引用部分がきっちり分けられて見やすくなると思いますよ。

追伸j:記事で紹介してくださってありがとーございまっす♪ m(_ _)m

コメント

このコメントは管理者の承認待ちです

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。