FC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう！ 		FC2ブログジャンキー
「うちのブログ、アクセス数が全然伸びない…」 そんな悩みをブログジャンキーが解決します！ 		FC2マイサーチ
ブログに貼り付けるだけで最適化した検索結果を 表示してくれる検索エンジンを設置しよう！ 		FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう！
TOP > タグのお勉強 > title − スクロールバーで囲う
[Edit][NewEntry] [Admin]

スクロールバーで囲う

スクロールバーのつくり方



スクロールバーをつくるで紹介したものだと、この様なブログパーツなどは中に入れてスクロールさせる事ができないと思います。
そこで今回は、この様に囲う事ができるスクロールバーを紹介します。

では早速紹介したいと思います。

<div style="overflow: auto;
font-size:10px; width:170px; height:130px;
border:1px #66ccff solid;
scrollbar-base-color: #66ccff;
scrollbar-track-color: #dfffff;
scrollbar-arrow-color: #90dada;
scrollbar-face-color: #caffff;
scrollbar-3dlight-color: #70d0d0;
scrollbar-darkshadow-color: #78c0c0;
scrollbar-highlight-color: #f3ffff;
scrollbar-shadow-color: #70e0e0;">
囲いたい物をここにコピーする。
</div>
 

これをコピーして使えば、上と同じ色の物ならできます。

自分好みに変えるには・・・
・font-size:10px; 文字のサイズ 
・width:170px;　  全体の横サイズ
・height:130px; 　全体の縦サイズ 
・border:1px; #色 solid; 外枠の線の太さ、色、線の種類
(線の種類;実線-solid・二重線-double・点線-dotted・なし-none) 
●●●scrollbar-・・・・ここからはスクロールバーの色指定●●● 
・scrollbar-base-color:#色;  　　 スクロールの全体的な色を指定 
・scrollbar-face-color:#色;  　　 スライドさせる部分の色
・scrollbar-track-color:#色;  　  スライドさせる部分の背景の色
・scrollbar-3dlight-color:#色;    外側の立体の明るい部分の色
・scrollbar-highlight-color:#色;  内側の立体の明るい部分の色
・scrollbar-shadow-color:#色; 　  内側の立体の暗い部分の色
・scrollbar-darkshadow-color:#色; 外側の立体の暗い部分の色
・scrollbar-arrow-color:#色;      矢印部分の色を指定
スクロールバーの色の場所が、文字の説明だけではわかり辛いという人は、詳しい場所が画像付きでこちらで説明されています。

※注意点
・scrollbar-base-colorは上記の様に個々に細かく設定されていたら、細かい方が優先するので意味がなくなります。
・また、基本のscrollbar-base-colorだけや、個々の細かい設定は全部設定しなくても表示されるので、base-colorとarrow-colorだけでも大丈夫です。ちなみに何1つ指定しないとノーマルなものになります。
・スクロールバーへの色の設定は基本的にIEでしか反映されません。

簡単に色を設定するには

スクロールバーの色を変えたいけど、めんどくさいという方はスクロールバー専門街に行けば沢山のスクロールバーがあるので、該当部分を張り替えて外枠だけを自分で変えれば簡単にできますよ。

自分で選んで色を変えたいという方は、スクロールバー色設定に行けばそんなに苦労せずに目で確認しながら色を決めれます。


文字間隔を広げる方法

この方法を使えば、ブログパーツの他にもリンクやカテゴリーなどもスクロールバーで囲う事ができます。
プラグインの設定から、囲いたい物の設定の変更を選択。そして HTMLを編集するを選んで、そこに書かれているものを「囲いたい物をここにコピーする」の所に入れると出来上がりです。
文字と文字との行間を広げたければ、上で紹介したタグを例にしてみると<div style="overflow:auto;〜〜〜shadow-color: #70e0e0;">となっている最後の">の前に、:line-height: 150%;を付け加えると文字間隔が広がります。


ちなみに囲まれてる中身の物は、今日話題のキーワードランキングを表示してくれるブログパーツです。　　→kizasi.jp

関連ページ）
・スクロールバーをつくる
・スクロールバーで囲う


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★　　[アフィリエイトとは？]
リンクシェア
の詳細はこちら
 エーハチネット
の詳細はこちら
 ﾊﾞﾘｭｰｺﾏｰｽ
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
教えてください
はじめまして。ぽけっとです。
いつもあなたのブログを勝手に参考にさせてもらっています。
ありがとうございます。

ツリー化の記事を参考にして、おかげさまでカテゴリーのツリー化はできました。

今度は、ツリー化したカテゴリーをスクロールできないかと思いまして
上の記事を参考に以下を試してみました。
-----------ここから--------------
「囲いたい物をここにコピーする。」のところに
<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category-->
</ul>
</div>
を入れる。
-----------ここまで--------------

でも、これだとスクロールはうまくいくのですが、
ツリーが崩れてしまうのです。
どうしたらいいのでしょうか？

ちなみに、テンプレートはFC2の共有でダウンロードした、
ほしぱんださんの「flower3c_blue」を使用しています。
そこで以下試してみたのですが、だめでした。。

<div style="overflow: auto;
font-size:12px; width:100%; height:100px;">

<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category-->
</ul>
</div>

</div>

すいません。長くなってしまいました。
手間がかかるかもしれませんが、
もし、お時間があったら教えていただけないでしょうか？
  • 20061107 |
  • ぽけっとさん ＠管理人 #-
  • [Edit]
あまり自信ないけど・・・
ぽけっとさん。こんばんは。
ぽけっとさんのブログを見せていただいたのですが、ツリーが崩れてしまうというのは全くツリー状にならずにふつうの状態として表示されるのでしょうか？

スクロールカテゴリーツリー化を作る時に、今ある普通のカテゴリーのツリーとスクロールの中のカテゴリーツリーを両方一緒に表示させて確認しましたか？
もしそうなら1回、普通のカテゴリーのツリーの方を非表示にしてスクロールの中のカテゴリーツリーだけを表示させてみて下さい。
もしかしたらこれでうまくツリーが表示されるかもしれません。
  • 20061108 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
できました。
おっしゃるとおりの操作で解決しました。
感動です。

まだはじめたばかりですが、
るるんばさんのHPを参考に勉強していきます。
とても分かりやすいので。

本当にありがとうございました。
  • 20061108 |
  • ぽけっとさん ＠管理人 #-
  • [Edit]
よかった。
無事ツリー化できてよかったです。
これからもよろしくお願いしますね。
  • 20061109 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
リンク
テンプレートにすでに付いてるリンクとは別に、
フリースペースにスクロールを使ってリンク集を作りたいんです。
ここで紹介されてる「スクロールバーを作る」と「囲う」の
試しに両方ともやってみたのですが、
「作る」→リンクが表示されない(アドレスが表示されるだけでページにとべない)
「囲む」→リンクが出来ても改行されない
と、こんな感じになってしまいます。
リンクを作るためには別の方法があるのでしょうか？
JUGEMのnanago「clover」ってテンプレート使ってるのですが、
JUGEMでも大丈夫ですかね？
  • 20061122 |
  • おかちゃんさん ＠管理人 #-
  • [Edit]
スクロールバー
自分はJUGEMを使った事がないのでどの様な仕組みなのか良くわからないので、
あまり自信はありませんが、たぶんできると思います。

「囲む」の方でリンク集を作って下さい。
改行できないというのは、
本文と違って自動改行されないので自分で改行タグをいれる必要があります。
改行のタグは<br>です。
<a href="http://〜〜〜〜〜">リンク1</a><br>
<a href="http://〜〜〜〜〜">リンク2</a><br>
この様にすれば改行できると思います。

もしくは、おかちゃんさんの今のブログのリンク集の様にリスト形式にしたい時は、
リストをつくる・・・http://rgrg.blog61.fc2.com/blog-entry-114.html
のページの様にして下さい。
  • 20061122 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
お返事ありがとうございます。
おかげでちゃんとスクロールバーできました。
ブログいじるときになったらまた参考にさせてもらいますね!!!
  • 20061125 |
  • おかちゃんさん ＠管理人 #DdiHOXp.
  • [Edit]
よかったですね。
結局リスト形式で、リンク集を作ったのですね。
ちゃんとスクロールバーができてホッとしました。
また参考にして下さいネ。
  • 20061126 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20070616 |
  • さん ＠管理人 #
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20070616 |
  • さん ＠管理人 #
  • [Edit]
横スクロールバーを使いたい
はじめまして。　
「ブログパーツ　スクロールバー」で検索したところ、
こちらにたどり着きました。

いろいろとスクロールバーについて調べたのですが、
どこでも上下のスクロールバーしか出ていませんでした。

私は、上下に動かすスクロールバーではなく
左右に動かすことの出来るスクロールバーを使いたいのですが
それは出来るのでしょうか？


  • 20070629 |
  • 歩人さん ＠管理人 #gQ4vMuXA
  • [Edit]
歩人さんへ
横スクロールバーはできますよ！見本のスクロールバーにも横スクロールバーができるように変えてみました。

基本的に「auto」なので自分で指定した縦と横の長さよりも、中に入れるブログパーツの方が大きければ自動で縦と横の両方ともスクロールバーはできます。
例えば横を150pxと指定して中身が200pxならば50px分のスクロールバーができます。
中身が100pxならばスクロ−ルバーもできません。

しかし自動で横に伸縮するブログパーツの場合、ブログパーツ自身が横に短くなるので横スクロールバーができません。この見本のブログパーツもこのタイプのブログパーツでした。
そんな時は、height:数字px;の後ろなどにwhite-space: pre;
を付け加えると自分の指定した大きさよりも中身の方が大きければ見本の様に横スクロールバーができます。
  • 20070630 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
ありがとうございました。
お返事ありがとうございます。

念願の横スクロールバーが出来ました。

最初は縦だけで横には出なかったのですが、
「white-space: pre;」を付け加えたら出てきました。
とてもわかりやすく説明していただいてありがとうございました。

  • 20070630 |
  • 歩人さん ＠管理人 #gQ4vMuXA
  • [Edit]
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/70-17e0f4ab   

HOME | ▲

Template Designed by DW99