無料ブログパーツサンプル集。ダウンロード不要、簡単設置。ひと味ちがうものもあるのだ！

ブログパーツをさがせ

最新の記事

かこんで楽しいスクロールバーの設定

とうとうスクロールバーの設定についてはカテゴリをひとつ作ってみましたよ。

このスクロールバーなんですが、ひとつ自分好みに作っておけば、あとはスクロールバーで囲みたいものを囲むだけで簡単に他のパーツにも応用できます。

ほんでもって、こんな風にただの文字をかこんでもよいわけです。
縦長になりがちなサイドバーもこれでスッキリ。 なが〜い記事もこれでスッキリ。

一度囲むとクセになるスクロールバー。

あなたも囲って囲んでみませんか

上と同じスクロールバーをつけるには下をコピーして貼り付け。（壁紙なし）サイドバーに貼り付けて表示が崩れる場合はwidth:170px;を思いきって外してしまうと、うまくいくもよう。

テンプレ変更したのにそのままの色にしてたのを修正しました。ごめんなさい！[2005/10/01]

  • overflow: auto; 簡単にいうと、これがスクロールバーにする指定。
  • （overflowは、決めたサイズの範囲より内容が大きい場合に、領域を越えた部分の表示方法を指定するプロパティ）
  • font-size:10px; フォントのサイズ
  • width:170px; 掲示板など囲むエリアの横サイズ（100%など）
  • height:130px; 掲示板など囲むエリアの縦サイズ
  • border: 1px; #67CB66 dotted; 囲み線の太さ、色、
  • スタイルはdottedの他にも、なしnone、実線solid、二重線doubleなど指定可能
  • scrollbar-・・・; ここからはスクロールバーの色指定

その他にも
  • background-image:url(http://www・・・画像のURL); 背景に壁紙
  • background-color: #ff99cc; 背景に色
    などの指定があります。

スクロールバーの色についてはこちらが便利。

実際に色を確認しながらスクロールバーを自動生成してくれます。ライト版と、色数の多い通常版があるのでお好みでどうぞ。（新しいページが開きます）

Scrollbar Color Changer　スクロールバーチェンジャー　ライト版
Scrollbar Color Changer　スクロールバーチェンジャー

※好きな色が出来上がったら、scrollbar-・・・のとこだけコピーして貼り付けよう。
【配色の参考に】
背景と文字色の組み合わせ
WEB COLOR 216
背景と文字色の組み合わせ
Webパレット・カラーピッカー（216色）Java版
背景とボックスと文字色の組み合わせ
色見本のページ（配色のページもあります）
テーマカラーがひとつだけ決まっているときに（おすすめ）
Ohanasiya Color-Maker v3.1
[動作環境：FlashPlayer6.4以降]

【2005/08/23補足】

サイドバーのスクロールバーについては、だいたい同じ色で設定すると思うので、一括設定の説明です。続きをどぞー。

ブラウザの右側のスクロールバーが色付きで表示されてるテンプレの場合

囲みたいところをこんなに小さなタグではさむだけで同じ色のスクロールバー。（色とか縦横サイズは上を参考に調節してくだされ）
<div style="overflow:auto;width:100%;height:170px">
ここに囲みたいものを記述。ブログパーツのScriptなど。
</div>

スタイルシートの編集ができるブログの場合

無料ブログでは、ここFC2ブログ、Seesaaブログ、エキサイトブログ、livedoor Blog、JUGEM、ヤプログ！、アメーバブログ、はてなダイアリー、Doblogとか？

色付きスクロールバーではないテンプレの場合は、スクロールバーの色を全部一括で指定すると便利。
まずはスタイルシートに以下を追加。これでページ全体を含む全てのスクロールバーを一括で指定できます。
html {
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #67CB66;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #67CB66;
scrollbar-arrow-color: #67CB66;
}
次にスタイルシートに以下を追加
.scroll {
overflow:auto;width:100%;height:170px;
border: 1px #67CB66 dotted;
}
あとは普通に囲みたいところのhtml部分をこんなに小さなタグではさむだけ。色やサイズは上を参考に。
<div class="scroll">
ここに囲みたいものを記述。ブログパーツのScriptなど。
</div>
色付きスクロールバーだけど、サイドバーのスクロールは違う色で設定したい場合
まずはスタイルシートに以下を追加
.scroll {
overflow:auto;width:100%;height:170px;
border: 1px #67CB66 dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #67CB66;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #67CB66;
scrollbar-arrow-color: #67CB66;
}
あとは普通に囲みたいところのhtml部分をこんなに小さなタグではさむだけ。色やサイズは上を参考に。
<div class="scroll">
ここに囲みたいものを記述。ブログパーツのScriptなど。
</div>
がんばってみたけどできないよ。の場合は晴れときどき南風さんの「ブログ作りの便利ツール（テーブルタグなど）」へ行ってみよう。

125件のコメント

2005-06-30 [129]
一体全体何を囲ってしまうのでしょうｗ
これ使いたい〜!!試してみたい〜ってそんなのばっかりなブログですね。
相変わらず・・・ｗ
しかし、テンプレートのサイドバーって変えちゃったら駄目…なんですよね？

いつかはどっかで使ってやるぞ…という「野望を少々…」ご報告です♪

あとちょっとまた質問があるんですが〜…それはまた次回ｗ
（なんのこっちゃ）
2005-07-01 [130]
サイドバーは特にテンプレ作者さんが禁止してないかぎりは変更OKですよ。
うちもイメージは変えないように・・と思ってますが、どうしても縦長になっちゃってるんでスクロールバーつけまくりだし。

・・・それはまた次回なんだ ＾＾
なんだろう。そう言われると、なんだかはげしく気になるけど、なんでもお気軽にどぞー♪
2005-07-01 [131]
気にしてくれて感謝!!です。
でも解決しちゃいました♪
画像を載せたとき、ホラ、いつぞやのパンの写真をクリックしても別窓で開かないように設定してあるじゃないですか。
あれ、どうやるのかな〜と思ってたんです。
サポート掲示板、目を皿のようにして探したら載ってました♪

そして、こちらの高度な技術を要するスクロールバーの設置。
サイドバーをいじるにはやっぱり「テンプレートの設定」→「HTMLの編集」でいじるんですよね？
イマイチどこを囲めばいいのか…。
怖くていじれませんｗ
同じテンプレートをダウンロードしていじくってみたほうが安全なのか…。
ぅぅ…なんでも出来て羨ましいな…ｗ
2005-07-01 [132]
ちこさんの今のテンプレの場合は、例えば◆ RECENT COMMENTSのところにスクロールバーつけたければ以下のようにします。

<div class="menuBlockHead">◆ RECENT COMMENTS</div>
<div class="menuBlockBody">
の下から・・・

<div class="menuText">
<ul>
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_name></a> <span>(<%rcomment_month>/<%rcomment_day>)</span></li>
<!--/rcomment-->
</ul>
</div>

↑ここの部分をごそっと下に書き換え。

<!--スクロールバー開始-->
<div style="overflow: auto; height:100px;
border: none;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #f8f8ff;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #CCCCFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCFF;
scrollbar-arrow-color: #CCCCFF;">
<!--スクロールバー開始-->

<div class="menuText">
<ul>
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_name></a> <span>(<%rcomment_month>/<%rcomment_day>)</span></li>
<!--/rcomment-->
</ul>
</div>

<!--スクロールバー終了-->
</div>
<!--スクロールバー終了-->

要は
<div class="menuText">から見て最初の</div>までを、スクロールバーの設定で囲んであげれば他の場所にも応用可能ですよん♪

ちとわかりにくいかな〜
2005-07-01 [133]
ご説明をありがとうございます!!
よくわかりました♪
ちょっと頭こんがらがりそうになるけどｗ
今真剣にテンプレート探しをしているので（絵文字もそうなんですが、文字とかの画像をアップロードすると後ろの余白？が白く浮き出てしまうのが見苦しい為）そちらでチャレンジ!と思っています。
現在のテンプレートで説明していただいたのに申し訳ないです。
でも、凄いビックリしてしまいました！ありがとうございます♪
応用を教えていただいたので、これでチャレンジしてみます！
2005-07-22 [222]
こんにちは。
こちらを参考に囲わせて頂きました。
<(＿ ＿*)>ありがとうございました♪
そうそう、リンクも貼っちゃいました。
サイドバーの掲示板に書きたいと思ったのですが
表示されなかったので、こちらに書かせて頂きました。
2005-07-23 [224]
>ミセスケイさん
あーなるほど！そういう囲み方もあったのか〜。タイトルあるといいですねー。
こちらこそ、参考になりました。ありがとございました♪
2005-07-29 [244]
度々お邪魔しています。もときちです。

突然ですみませんが、スクロールバーが表示されないので困っています。
サイドバーの最近のコメントを囲うつもりで作ったのですが枠しかできませんでした。
私のソースが悪いのかココログでは表示できないのかもわからないのです。

いつでも構いませんので原因がありましたら教えて頂ければ助かります。
コードは次の通りに作りました。

<div style="overflow: auto;
font-size:10px; width:150px; height:170px;
border: 1px #B0E0E6 dotted;
scrollbar-base-color:white;
scrollbar-shadow-color:lavender;
scrollbar-darkshadow-color:skyblue;
scrollbar-track-color:paleturquoise;
scrollbar-face-color:whitesmoke;
scrollbar-highlight-color:lavender;
scrollbar-3dlight-color:skyblue;
scrollbar-arrow-color:blue;
background-color:white;">
最近のコメント
</div>

どうぞ宜しくお願いします。
2005-07-29 [251]
＞もときちさん
今スクロールする中身が「最近のコメント」という文字だけの状態なので、スクロールバーになってないようです。
で、最近のコメントということは、実際はサイドバーの右上のほうの「最近のコメント」を囲みたいわけですよね？！
テンプレの中身まで見れないから、わかりやすく説明しにくいのですが、多分以下のようにやってみると、できるんではないかと。にゃー、わかりにくくてごめんなさいね。
ちなみに「最近のコメント」という表題自体はスクロールさせない、という想定で書いてます。
※わかりやすいように前後一行空けてますが、本当は空けないほうがよいです。

<div id="recent-comment" class="module">
<h2><span>最近のコメント</span></h2>
<div class="module-top"></div>
<div class="module-body">

ここにスクロールバーの設定（<div style・・ではじまる長いほう）

<ul>
<li>（多分ここにはコメントの変数が入ってると思いますが、見えないので略）</li>
</ul>

最後の閉じるタグ（</div>）


どでしょうか？？
「最近のコメント」近辺のHTML部分（テンプレかな？）を「秘密にする」でよいので書いていただけると、こことここを差し替えってな風にできるかもです。
2005-08-02 [255]
satokotoさん、いつも丁寧な解説でありがとうございます。

せっかくレクチャーしてもらったのですが、
今使っているブログはＨＴＭＬ編集か゛出来ない無料プランなので
タグを見ることが出来なかったんです＼(◎o◎)／ガーン!!
プロバイダーのニフティにタグを書きたいと相談したら
有料プランに変更するしかないですよと連絡があって・・・
なんでもっと早く気がつかなかったのか、もう本当にゴメンナサイm(_ _)m。

でもスクロールバーは取り付けたいので「最近のコメント」を囲むのはやめて
「お知らせ」欄を作ることにしました。
確かに１行だけではバーが表示されませんが数行入れると
ちゃんと表示されました。
まったくのド素人で、ここに書いているのも恥ずかしくて~(o＞ェ＜)Ｕゝ
ちょっとブログの本でも買って勉強します。
大変お騒がせしてスミマセンでした。〜〜(m--)m反省。
2005-08-02 [256]
そうだったんですか〜。こちらこそごめんなさい。そかそか。そういう区分けがあるんですね。他のブログの環境はなかなか外からわからないから、こちらこそよい勉強になりました。
そういわずに、ほら、お互い中毒患者だし ｗ なんでもお気軽にどぞ〜♪
2005-08-21 [360]
スクロールバーの設定を参考にさせていただきました。
とても分かりやすい説明ですぐにできましたぁe-319
ありがとうございますe-68
2005-08-21 [363]
>わんこさん
よかったです〜e-68
本当はスクロールバーも同じタイプを付けることが多かったらスタイルシートで一括設定してあげたほうがよいのですが、編集できるブログも少ないようだし、この記述にしてます。今後折を見てCSSの方もアップしなければ。。
2005-08-22 [368]
はじめまして、satokotoさん！

サイドバーにずっとスクロールバーを付けたくて
検索しても『？？？』状態でして、
諦めかけてたんですが・・
たまたま、こちらに辿りつきまして
非常に分かりやすい説明で
嬉しいかぎりです♪

satokotoさん
これからも頑張ってくださいね〜
本当にありがとうございました！！
2005-08-23 [371]
>ikuさん
はじめまして！
divタグで「overflow: auto」で中にはさむものが長ければ、即、スクロールバー。そこらへんも説明せねばと思いつつ・・・。なんか詳しくしようとすればするほど、パッと見、むずかしそうになるので、そのまま放置しててごめんなさい。嬉しいコメント、ほんとにありがとございました。
えぇ、もう、がむしゃらに、がんばりますとも ｗ
2005-08-23 [377]
はじめましてー＾＾
初めてお邪魔したんですが、ブログパーツの充実さにかなりほくほくしてます＾＾

えと、ちょっと質問なんですが、お暇なときでよいので教えていただけたら・・・と思いまして。
ためしにこちらのと同じスクロールバーを設置してみたのですが、どうしてだか点線の枠のみ表示されてまして、スクロール部分が出ないんです。
どうしてそうなってしまったのでしょうか？
私も掲示板を囲って使いたかったので、ためしに新しく掲示板に書き込んでみたのですが、新しいコメントのみ表示されてしまいました。

ちなみにテンプレートはこちらと同じかたが作られたコーヒーバージョンです。
よろしくお願いします。
2005-08-23 [379]
>hanaさん
こんばんは！
このcomitia掲示板じたいがオチてる時があって、それで真っ白に見えることはありますが、それにしてもスクロールバーが出ないってのはおかしいな。うーん。点線かぁ・・もう少し情報が欲しいですね。

もし差し支えがあれば「管理者にだけ表示を許可する」にチェックを入れて、URLを教えていただけますか？？多分直接ブログを拝見したほうが早いと思います。お気軽にどぞ♪
2005-08-28 [439]
satokotoさんこんばんわぁ（＾＾）
やっと！掲示板のスクロールバー＆囲みに成功♪
なんでだか、右のラインが消えるんで
さんざん試行錯誤(^-^;)
はぁ〜やっとできましたぁー！！
ありがとうでした（＾＾）/
2005-08-29 [441]
>葵さん
確かにテンプレによって、微妙に調整が必要だったり。ほんと、お疲れ様でした〜！そしてここあビンゴおめでとーございました♪あとは抽選が・・・(笑)あたりますように！
2005-08-29 [444]
satokotoさんっ
ありがとうですぅ〜（＾＾）/

ぎく！？（笑）
ここあビンゴ者は1000人超えそうな勢いなんですよぉ。
抽選参加権は手に入れたけど・・・私のクジ運が・・(^-^;)

ほぉ〜んと、どこをどうすればいいんだか
satokotoさんのは出来てるのに何故？何故？で・・・
私のエントリー部の余白の設定がダメだったようです。
今思えば、良い思い出。（すでに思い出）（笑）

2005-08-30 [447]
>葵さん
おもいでになってよかったな〜。そうそう、過ぎたことは忘れよう(笑)ほんと、表示できてよかったです♪
はじめまして
2005-09-08 [489]
楽しく読ませていただいております。
ブログの記事を参考にスクロールバーを付けようと頑張っていますが、パソコンは初心者なので上手く付ける事が出来ません。
もしよろしかったらアドバイスして下さい。
お願いします。
（専門用語がさっぱり分かりません（泣））
>じゅんいちさん
2005-09-10 [497]
多分サイドバーの辺りをスクロールバーで短く整理したいんですね？お返事遅くなってごめんなさい。
私がそちらのブログの管理画面がよくわからないんですが、多分ライブドアならHTMLを直接編集する管理画面がありますよね？はさみたい箇所をスクロールバーの設定で書いてるタグで囲むだけなんですが、どこからどこまでをはさみたいかを見極められないと、せっかくのテンプレや表示が崩れてしまったり、表示できなくなる可能性があります。
テーマに「カスタマイズ」という項目もあるようなので、同じブログの方に聞いてみたほうがよいかもしれません。

とりあえず長そうなトラックバックの項目あたりでご説明すると、

<div class="sidebottom"></div><div class="sidetitlebody">
<div class="sidetitle">トラックバックしてね</div>
</div>
<div class="sidetop"></div>
<div class="side"><div class="sidebody"><a href="http:・・・・・・途中を省略しています・・・・・・愛読書？</a></div>
</div>

　　　　　　これを下記に書き換え↓

<div class="sidebottom"></div><div class="sidetitlebody">
<div class="sidetitle">トラックバックしてね</div>
</div>
<div class="sidetop"></div>
<div style="overflow: auto;
font-size:10px; width:170px; height:130px;
border: 1px #67CB66 dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #67CB66;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #67CB66;
scrollbar-arrow-color: #67CB66;">
<div class="side"><div class="sidebody"><a href="http:・・・・・・途中を省略しています・・・・・・愛読書？</a></div>
</div>
</div>

青字部分が新たに追加した「スクロールバーを表示させるもの」です。「・・・途中を省略しています・・・」部分はリンク先が貼ってあるので、30行近く省略してます。うーん、わかりづらいな。

例えばフリースペースになにか貼り付けてるものってありますか？掲示板はフリースペースでしょうか？？
そのフリースペースに貼り付けたタグ（プログラムみたいな、これを貼り付ければ表示できます。と配布されたコード）を上の青字部分ではさんで、再構築あるんだったら、再構築する。で、基本的には完了です。簡単そうなのもので試してみるとよいかも。あとは色がここと同じになってしまうので、上の参考サイトで色をちょこまか変更してゆきます。

この説明でさらに具体的にわからない部分が出てきたら、お気軽にどぞ♪
（でも、この説明の長さになんだかいやけがさしてしまうような・・・^^;）
no title
2005-09-10 [501]
アドバイス、ありがとうございました。

いろいろ試してみたいと思います。
>じゅんいちさん
2005-09-10 [503]
これで、わかりますか？！読み返してみてもなんだか説明が下手でほんと、ごめんなさい。無事できるといいなぁe-68
no title
2005-09-13 [519]
質問ですがこのスクロールにブログ足あとを囲む事は出来ないのでしょうか？
>菜乃葉さん
2005-09-14 [527]
アメブロは私がブログもってないので、なんともいえないのですが、上のソースに「ここに囲みたいものを記述。ブログパーツのScriptなど。」って書いてますが、ここにその「ブログ足あと」を表示させるタグを置けば大丈夫だと思いますよ。っていうかブログ足あとってなんだろ・・(笑)
要は縦サイズがはみだすほど大きければスクロールバーが出現します。反対にいうと、スクロールバーが出なくて枠だけしか表示できない場合はheight:130px;の130を80とか極端に短くすると要領がわかるかと思いますよ。

【追記】
もう、全然、よくわかるんですよ。私もはじめはそうだったので、まったく問題なし。
うーむ、でも、ほんと、私が見れる状態にしていただかないと想像だけではサポートのしようがないんですよね。
小さくするには、極端なこと言うと、0pxにだってできますが、それだとスクロールバーが見えなくなります。だから例として80とかって書きましたが、ここを30とか20とか、まぁとにかく貼ってみてください。長さはある意味、各個人の好みの問題なんですよ♪
わたしはアメブロの管理画面を見ることができないので、その管理画面の中でのお話はなんのことだろ状態になってしまいます。サポートさせていただくにも、まずは、取り付けてみて、ほら、こんな風に変なんだよ。なんとかならないのって言っていただくしか方法がないんです。。その間、私がすぐお返事できるわけではないので、確かに、かっこ悪いんですけどね。。困りましたね。いつ、時間が空くってわけでもないしなー。

【再追記】
なるほど！！今、見ましたよ。はさまれてないから枠だけ表示になってるようです。早速MyClipで配布されるスクリプトをスクロールバーのタグではさんだものを書いておきます。
で、そちらで表示されてるちっちゃい四角い、この枠の中にMyClipが表示されることになるから、やっぱりこのままだと小さすぎると思います。少し大きくして書いてるから、無事表示されたら、あとは横と縦、自分のお好みに調節してくださいね。
※茶色の文字部分はMyClipの「コード生成」でペーストしてくださいって書いてあるものを、まるごと貼り付けるのですが、問題あるといけないので、ここでは一部省略して書いてます。ご自分のものにペーストしなおしてください。

今はりつけてあるタグ
<div style="border: 1px dotted rgb(103, 203, 102); overflow: auto; font-size: 10px; width: 30px; height: 30px;"></div>

上↑（スクロールバー）と下↓（MyClip）が、バラバラに置いてある状態。

<script language="javascript" type="text/javascript" src="http://clipdata.myblog.jp/list/js?code=e404b一部省略9bfc1882" charset="EUC-JP"></script>

　　　　　　　　　　　　　　　　　　　　　　↓

これからやってみる方法
<div style="border: 1px dotted rgb(103, 203, 102); overflow: auto; font-size: 10px; width: 160px; height: 80px;">
<script language="javascript" type="text/javascript" src="http://clipdata.myblog.jp/list/js?code=e404b一部省略9bfc1882" charset="EUC-JP"></script>
</div>


青字の部分がスクロールバーを表示させるもの。要はMyClipからペーストしてねって配布されるスクリプトをはさんでるだけなんですが、「はさむ」っていうのが、どうもわかりづらいのかな？どんな風に書いてあったらわかりやすいでしょうか？！記事訂正しようと思うのでよい案があったら教えてください♪

さらに、IEで見たときのスクロールバーおしゃれバージョン

<div style="border: 1px dotted rgb(103, 203, 102); overflow: auto; font-size: 10px; width: 160px; height: 80px;scrollbar-base-color: #FFFFFF;scrollbar-track-color: #FFFFFF;scrollbar-face-color: #FFFFFF;scrollbar-shadow-color: rgb(103, 203, 102);scrollbar-darkshadow-color: #FFFFFF;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: rgb(103, 203, 102);scrollbar-arrow-color:#FF9900;">
<script language="javascript" type="text/javascript" src="http://clipdata.myblog.jp/list/js?code=e404b一部省略9bfc1882" charset="EUC-JP"></script>
</div>


うまくいきますようにe-53
no title
2005-09-17 [545]
ごめんなさいエンターキーを押すとココでの文字消えて・・・

参考に試みてはものの上手くいかずにいます
消してしまいましたが上記は、メモ帳にて保存してありますので
ユックリ時間のあるときに挑戦してみますので今しばらくお待ちください
待っていないか(笑)
>菜乃葉さん
2005-09-17 [546]
いやいや、お待ちしてますよ♪この通りで、ダメですか？そうなると、もしかするとアメブロが一部のタグの貼り付けが不可なのかもしれません。アメブロのヘルプセンターや、同じユーザーさんに聞いてみたほうが、解決が早いかもしれませんね。
でもchobiが貼り付けられてるわけだから、これがダメって考えにくいんですけどね〜。
>あきちゃんさん
2005-10-20 [740]
ご質問なので先に。
わたしはアセラユーザーではないので、少し調べてみました。

「マイブログ」−「デザイン」−「コンテンツ」−「新しいコンテンツの追加」の種類で「お気に入りリンク」を使用している場合は、スクロールバーで囲むのは別の場所で行うことになると思います。（プラグインの機能になるため）HTMLを自由に編集できる環境がアセラにあれば大丈夫ですが、そうでない場合はむずかしかも。

スクロールバーの設定は、いわゆる「自由形式」で使うことができる方法です。
もちろん普通にタグでリンクを自由形式で書いてもよいのですが、もし初心者さんならむずかしいだろうし、そういう場合はリンクもBlogPeapleやMyBlogListなどのブログツールを利用します。
「アセラのヘルプ」
http://help.a-thera.jp/article/28027.html

どでしょうか？ひっかかってた部分の糸口が見つかるとよいのですが。
no title
2005-10-20 [741]
すみません！
いろいろやってみてようやくできました！！
素早い対応ありがとうございました。
>あきちゃんさん
2005-10-20 [742]
あとはリンクが沢山になって、その枠からはみ出すぐらいの長さになると自動的にスクロールバーが出現します♪
・・・なんか最初っから質問の意味を勘違いしていたかも。そうだったらごめんなさい。
no title
2005-11-24 [1001]
こんにちは。comitiaの掲示板をお借りして、普通に設置はできたのですが、スクロールバーをつけたいと思い、いろいろ探していてこちらにたどり着きました。土素人の私には丁寧にかいてくださっているにもかかわらず、つけることができません。そのうちぐちゃぐちゃになってしまい、今、はずしてあります。comitiaのページも今、表示されていないので再び設定することもできず、こまっております。長さが７cm程でスクロールできるのをつけたいのですが、教えて頂けるとありがたいです…。
＞ちわさん
2005-11-24 [1002]
どうも今日はcomitiaじたいがオチてるようで、掲示板も何もかも真っ白表示ですね。。。
一応後日、ペタッと貼れるように。

<span style="font-size:10pt;">
<div style="text-align:center;"><span
style="color:#986532;">
お気軽に書き込みしてくださいね♪OPENをクリックすると書き込みウインドウが表示されます</span></div></span>

↑ここを目印。ここの前か後に・・・。

<div style="overflow: auto;
font-size:10px; width:170px; height:130px;
border: 1px #6699FF dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #6699FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: orange;">
comitiaから配布されたタグ全部をこの文章と置き換えてください。
</div>


7cm・・という概念はないので、長さはheightの値を適宜調節してくだされ。
あと、スクロールバーは、中身が長くなってはみ出してしまうようになると表示されます。
スクロールバーの長さだけ長くしても、中に置いたものが短いと枠だけ表示になってしまいます。

今回の場合は、中身である掲示板自体が見た目の7cm？以上でなければいくらスクロールバーだけ長くしても枠しか表示されません。

comitiaの掲示板に長さの設定があったかどうだか、今なにせサーバーエラーで見れないのでどぞご了承くだされ。

後日、うまくゆくといいのですが・・
no title
2005-11-24 [1004]
早々にお返事ありがとうございます！昨日からサーバーエラーなんです…。早く復活してくれるとよいのですが…。頑張ってやってみます。ありがとうございました。
＞ちわさん
2005-11-26 [1011]
あちゃー。まだオチてますね。ちょっと長すぎるなぁ。。。
アナウンスだけでも出す手立てはあるはずなんでオチてるというよりもしかして？
no title
2005-11-26 [1016]
そうなんです。なので、あきらめてSAMIC-BBSさんのをお借りする事にしました。こちらの方は無事に設置できたみたいです。また遊びに来て見てください！本当にありがとうございました。またわからないことがありましたら教えてくださいね〜。
＞ちわさん
2005-11-27 [1022]
SAMIC-BBSさんは個人さん運営なのですが、どこにもないきめ細やかなサービスでほんとにおすすめです。
ナイスな選択、おめでとございました♪
no title
2005-12-02 [1047]
はじめまして！
とても丁寧な解説、初心者の私にとってはありがたいです。
なんとかスクロールバー設置できました。ちょっとアレンジしてしまいましてごめんなさい。m(__)m
素敵な記事がいっぱいなので、またお邪魔します。
どうもありがとうございました♪
＞てんてんさん
2005-12-03 [1051]
こちらこそ、ありがとうございます。
てんてんさんも猫お好きなんですねー♪うちの猫はアホなので、こうやってコメント書く間も間にわりこんで邪魔しています。
スクロールバーばっちり設置、おめでとうございました。
はじめまして。
2005-12-20 [1143]
スクロールバー設置をしたいと思っていたのですが、全くの初心者でなかなか設置できずにいました。
satokotoさんの親切で丁寧な設置方法で、無事設置する事が出来ました。有難うございます。
これからもブログ運営頑張ってください＾＾
貴絵さん
2005-12-20 [1148]
嬉しいコメントありがとうございます。ばっちり設置ですね！おめでとうございました〜
はじめまして！
2005-12-25 [1171]
スクロールバーを記事の中に設置できるとは驚きです！！さっそく使わせていただきました☆
タグ等に疎い私にもできました(つД；)本当に感謝です！！*＞＜*
こちらの記事をリンクさせていただきます(・∀・)
事後報告ですみません！もし問題がありましたら、外します！
またこれからもいろいろ参考にさせていただくこともあると思いますが、よろしくお願いします！
ブログ運営応援しています！！本当にありがとうございました！！！
ボブさんへ
2005-12-25 [1175]
メリークリスマスv-255紹介までいただいて本当にありがたや。サンプルばっちりですね！わかりやすい説明だなー。うちも見習わねば・・・。
すんげ〜
2005-12-26 [1198]
やってみたいけど
チンプンカンプンですv-404
足りない脳みそが憎いﾃﾞｽe-262

憧れのサイドバーのスクロールバーe-303
はるさん
2005-12-27 [1206]
基本的には記事内の一番最初の方のソースをペタリで大丈夫ですが、中身、たとえば掲示板とか、沢山のリンクだとか、少し長めのものが必要です。いわばこれはスペースを空けるための苦肉の策^^;
長くてサイドバーがどうしようもなくなってくると便利ですよ。
TBさせて頂きました
2006-01-05 [1257]
この記事にコメントを書かせて頂くのは５カ月ぶりo(*^o^*)o
今回はＴＢさせて頂きましたので報告に上がりました。それではどうぞよろしくお願い致しますm(*_ _)m
もときちさんへ
2006-01-05 [1259]
おぉ！こりゃ便利。最後の最後だけど記事内にリンクさせていただきましたー
初めまして
2006-01-08 [1296]
satokotoさん初めまして！
整然としていてすばらしいサイトですね〜。ずっ〜と探していた「スクロールバー」があったので感動しています。長くなりそうなBlog Peopleのリストを囲みたいです。お借りします。ありがとうございます！
satokoto
2006-01-09 [1301]
ほんとにおきなわさんだ！おはようございます。うまくゆかなかったらお気軽にどぞ。
  • おきなわさんへ
  • URL
  • 編集
始めまして。
2006-02-02 [1456]
いつも拝見しているだけでコメントも残せずごめんなさい。
私もblogpeopleのトラックバック利用しているんですがこのテーブルがあったら長さを短縮できますね。
是非お借りします。
又ちょくちょくお邪魔させていただきますのでよろしく御願い致します。
satokoto
2006-02-02 [1461]
いえいえ、そんな。ありがとうございます。BlogPeopleはCSSのクラス名を公開してあるので直接設定する手もありますが、ブログ内のスクロールバーを全部同じで設定したければこっちの方が早いかもしれませんね。
  • FujiLoveさんへ
  • URL
  • 編集
出来ました
2006-02-21 [1596]
satokotoさんにコメントしてから２ヶ月も経ってたんですねe-263
コピペだけでしたので簡単に貼れました！ありがとうございます

自分好みの背景はどうしたら設定できますか？
ヨロシクお願いします
satokoto
2006-02-21 [1599]
今ソース見たらurl(http://www・・・画像のURL)ってちゃんと入ってるので準備は完了ですね。
あとはちっちゃな背景素材を見つけてきたら、管理画面＞ツール＞ファイルアップロード。無事一覧に表示されたら「表示」で開いた画面のURLを下線の部分と書き換えするだけです。

あるいはココと同じ灰色の丸画像でよければこれを使ってもらっても構いませんよ。
http://blog10.fc2.com/s/satokoto/file/dot2.gif

うまくいきますように。
  • はる。さんへ
  • URL
  • 編集
ありがとうございます
2006-03-03 [1671]
スクロールなやんでたんですが、
このブロクですぐ設定できました。
ありがとうございます。

勝手にリンクさせてもらいます。
もし不都合がありましたら、ご連らく下さい。
satokoto
2006-03-05 [1682]
紹介いただいて不都合だなんて。嬉しいコメント本当にありがとうございました。
設置させていただきました
2006-03-22 [1765]
お世話になります。
スクロールバー参考にして設置し、参照ﾘﾝｸをはらせて頂きました。
ただ、1点困っています。
スクロールバーを設置したいのはひとつのカテゴリなのに、設置したカテゴリより下のカテゴリもスクロールに含まれてしまいます。
困ったあげく、設置したいカテゴリを一番下に持ってきたのですが、
何が悪いのでしょうか。
お忙しいなか、お手数かけます。
satokoto
2006-03-22 [1766]
なるほど、原因は挟まれていないことにあるようですよ。終わりたい場所に</div>を足すだけで解決すると思います。

<div スクロールバーの設定>
ここにリンク
</div> ←★重要★これがヌケています★

HTMLが自由に扱えるかどうかがちょっとわからないのですが、もうちょっと具体的に説明すると場所は以下のようになります。黒字はもともとあるタグ。青字の部分が今回追加するタグです。poweredを目安に検索すると早いかもしれません。

</div></div>

<div class="powered">

うまくいくとよいけどなー
  • chikilibabyさんへ
  • URL
  • 編集
御礼
2006-03-22 [1767]
早速のご回答、ありがとうございました！
終わりのほうに、<% content.footer -%>というのがあったので、</div>をいれてみたら、、、できました！
ありがとうございました。

satokoto
2006-03-22 [1768]
あれ？サイドバーが記事の下に落ちてしまってますねー。閉じタグはちゃんと間違いない場所に入ったようなんですが・・・。
わかりました！！記事に</div>って書いてあるのが有効タグとして認識されてるもようです。これを＆ｌｔ；/div＆ｇｔ；に置き換えてください。
※ここでも置き換えされてしまうので全角で記入してますが、実際は全て半角英数にしてください。

うまくいきますように！！
  • chikilibabyさんへ
  • URL
  • 編集
うまくいきました！
2006-03-22 [1769]
お礼の記事で、ご迷惑をかけてしまいました。
こんどこそ本当にありがとうございました！！
satokoto
2006-03-22 [1770]
テンプレが崩れるのは心臓に悪いから＾＾ ほんと解決できてよかったです。
  • chikilibabyさんへ
  • URL
  • 編集
ツルっぺ
2006-04-19 [1936]
こんちには、ブログリストをスクロールできるようにしたくて、コチラで教えていただいた方法を試したんですが…何度試してもテンプレが崩れて下に落ちてしまいます(T∇T)
width:170px←コレを外してもダメでした…(x_x；)
もしよければ、良い方法を教えてください☆
satokoto
2006-04-20 [1938]
わかりましたよー！タグが重なってうまく表示できなかったようです。ローカルではこれでばっちり解消できました。（ドリコムは現在サーバーがオチてますね・・）
あと、BlogPeopleも表示できてないですよね。これ表示させてしまってよいですか？よいのであれば、それぞれ以下と貼り付けなおしてみてください。
※青色部分はそちらのブログの「自由形式」で表示されてない部分かもしれません。その時は青色部分は省いて追加してください。

こっちはドリコム。

<div class="sidetitle"><span style="font-size:10px;text-align:center;">ﾟ+.friend's blog.｡ﾟ+.</span></div>
<div class="side">
<div style="overflow: auto;
font-size:10px; width:100%; height:130px;
border: 1px #6699FF dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #6699FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: orange;">
<script language="javascript" src="http://list.blog.rss.drecom.jp/ご自分のID/" charset="UTF-8"></script>
</div></div>


ここからBlogPeople。

<div class="sidetitle"><span style="font-size:10px;text-align:center;">ﾟ+.friend's hp&blog.｡ﾟ+.</span></div>
<div class="side">
<div style="overflow: auto;
font-size:10px; width:100%; height:130px;
border: 1px #6699FF dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #6699FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: orange;">
<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/ご自分のID.js" charset="Shift_JIS"></script>
</div></div>

オレンジ色部分はドリコムとBlogPeopleから配布されたタグ部分です。
なお、スクロールバーは上の例とまったく同じものです。あとから色はカスタマイズしてくださいね。うまくいきますように！
  • ツルっぺさんへ
  • URL
  • 編集
ありがとうございます
2006-04-20 [1939]
(○・ω・人・ω・●)ありがとうございます☆
スゴい( ゜口゜)なんで下も表示出来てないってわかったんですか？？天才？？
mailもありがとうございました☆:*(人´ω｀*)
だいぶ前の記事なので、お返事半分諦めてました☆

さっそく試してみます(o^艸^o)
何度もすみません
2006-04-20 [1940]
何回か試したんですが、スクロールできるようにはなったんですが、横のボタン?（△の）バーが表示されません(x_x；)？？
satokoto
2006-04-20 [1941]
あれ？ほんとですね。現在ソースを見る限りではスクロールバーの設定は何も指定されていない状態になっています。
ではちょっとシンプルにスクロールバーの色部分は省いてテストしてみましょうか。
※サイドバーのタイトル部分は今回は省略しています。

こっちはドリコム。

<div class="side">
<div style="overflow: auto;
font-size:10px; width:100%; height:130px;">
<script language="javascript" src="http://list.blog.rss.drecom.jp/ご自分のID/" charset="UTF-8"></script>
</div></div>


ここからBlogPeople。

<div class="side">
<div style="overflow: auto;
font-size:10px; width:100%; height:130px;">
<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/ご自分のID.js" charset="Shift_JIS"></script>
</div></div>

ところで青色の部分は「自由形式」には表示されていますか？それともテンプレを直接いじってあるのかなー。
よかったら教えてくださいまし。
  • ツルっぺさんへ
  • URL
  • 編集
2006-04-20 [1942]
すみません、こんなに早くお返事もらえるなんて(*ﾟﾛﾟ)!!
さっそく試してみます(o^艸^o)
2006-04-20 [1943]
あぁ！！ゴメンなさい！質問の答えですが、
青色の部分、前にアセラの方に教えてもらった時に必要ないようにしていただきました（たぶん…）(^^ゞ
やっぱり？
2006-04-20 [1944]
スクロールは出来るんですが、やっぱり△が表示されません(T∇T)
ドボジデ…
satokoto
2006-04-20 [1945]
なるほど。少しはみだしてるのかな？？
ではwidthの幅がいま100%となっているところを90%、あるいは160px、あるいは170pxに変えてみてください。どれかでうまく表示されるとよいのですが・・・。
わたしの環境ではしっかり見えてるので、解像度の違いかな？？

あらもうこんな時間。おはようございます（笑）そしておやすみなさい。またおかしかったらコメント書いておいてくださいね。夕方以降にお返事できると思います。
  • ツルっぺさんへ
  • URL
  • 編集
2006-04-20 [1946]
おはようございます(o･ｪ･o)
出来ました！！！！ピッタリにするのに９３％にしてみました（笑）
嬉しい〜！！！！！！！
何回も何回も、本当にありがとございました☆
追記
2006-04-20 [1947]
調子にのって色変えてみました(o^艸^o)

リンクさせていただきました〜☆
（事後報告お許しを〜♪）
satokoto
2006-04-21 [1952]
ツルっぺさんへ
おぉぉ！すばらしい。ばっちりですね。よかったー

秘密さんへ
結構簡単に直りそうです。直接お邪魔しました＾＾
まだ表示がおかしかったら秘密でも何でもよいので書いておいてくださいね。
  • ツルっぺさん、秘密さんへ
  • URL
  • 編集
2006-04-21 [1955]
わざわざサイトのコメントに書いてくださってありがとうございます！！
すぐ、直りました！直ったときはちょっと感動でした(^^ゞ
あの別の質問なんですが、ここのコメントの『画像を載せたとき写真をクリックしても別窓で開かないように設定してあるじゃないですか』というのを読んだんですが、お時間ありましたら、別窓が開かなくなるようにするやり方を教えていただけませんでしょうか？
satokoto
2006-04-21 [1956]
直ってたー＾＾よかったよかった。

あと画像の件は、普通画像を投稿するとこんなタグが挿入されますよね。

<a href="http://blog10.fc2.com/s/satokoto/file/20060412213344.jpg">
<img src="http://blog10.fc2.com/s/satokoto/file/20060412213344s.jpg" alt="20060412213344" align="left" border="0">
</a><br clear="all">

この青色の部分が「画像にリンクするタグ」なので、これを消して以下のようにするだけです。

<img src="http://blog10.fc2.com/s/satokoto/file/20060412213344s.jpg" alt="20060412213344" align="left" border="0">
<br clear="all">

最後の<br clear="all">というタグは改行＋回り込み解除のタグなので、画像の横に文章を表示させたいときはその間に文章を書きます。

<img src="http://blog10.fc2.com/s/satokoto/file/20060412213344s.jpg" alt="20060412213344" align="left" border="0">
なんたらかんたら・・・・・
<br clear="all">

どでしょうか。参考になるとよいけどなー。
  • ゆっぴっちさんへ
  • URL
  • 編集
できました♪
2006-04-23 [1972]
別窓、開かないように設定できました！！
ありがとうございます(~o~)

また一つ教えてほしいんですが、
画像の横に文章を表示させたいときは<br clear="all">の前に文章を書けばいいとのことなんですが、一行しか回り込みされません(>_<)(例えば、わたしのブログの英雄オンラインという記事なんですが)
お時間のありでしたら教えてください<(_ _)>
satokoto
2006-04-24 [1974]
<img src="http://blog-中略-/eiyuu.gif" alt="eiyuu.gif" border="0" align="left">「英雄オンライン」は・・・・・<br clear="all">

上記のように、タグの中に半角スペースを一個入れて「□align="left"」というのを入れれば解決すると思いますよ~（□と書いてるのは半角スペースの代わりです）またおかしかったら書いて置いてくださいまし。
  • ゆっぴっちさんへ
  • URL
  • 編集
2006-04-24 [1977]
ありがとうございます<(_ _)>
とっても親切に説明してくださるので、すぐわかりました！！
ほんとに感謝、感謝ですヽ(^o^)丿

事後報告になってしまいましたが、参考サイトとしてリンクを貼らせて頂きました。
とってもわかりやすいので、困ってる人がいたらぜひ参考にしてほしくて(^^ゞ
もし不都合がございましたら、おしゃってください。

またわからないことがあったら、聞きに来てもよろしいでしょうか？

どうもありがとうございました♪
satokoto
2006-04-25 [1981]
リンクはどの記事でも大歓迎です。ありがとーございます。ご質問は多少時間かかるときもあるかもしれませんが、今後もお気軽にどぞ！
  • ゆっぴっちさんへ
  • URL
  • 編集
2006-06-18 [2173]
初めまして！

この冬あたりに、ここのサイトに来たんですが、すごいたくさんパーツがあってすごいと思いますｗ

あと、お聞きしたいことがあります！
satokotoさんみたいに、サイト全体のスクロールバーを変えたいんですが、どうすればいいでしょうか？
satokoto
2006-06-18 [2174]
「スタイルシートの編集ができるブログの場合」で説明していますがちょっとわかりづらかったですね。

「まずはスタイルシートに以下を追加。これでページ全体を含む全てのスクロールバーを一括で指定できます。」のすぐ下にある html から始まるタグで指定できると思います。がんばってくださいねー。
2006-06-18 [2175]
私のはJUGEMなんですが、出来ますか？

あと、サイト全体なんですが、リンクやコメントのところにはスクロールバーをつけないようにしたいんです。
すみません(>_<)分からなくって；
satokoto
2006-06-18 [2176]
あのー、質問前によく読んでいただけると助かります。一覧に載せてるようにJUGEMもスタイルシートの編集はできるはずです。

ともかく実現したいことは、多分ページ全体のスクロールバーの色を変えたいだけなんですよね？！
まずはご自分のテンプレートのスタイルシート編集できる箇所で html の { から } までのタグを 追加してみてください。※追加してもページ全体のスクロールバーの色が変わるだけなので。で、記事を参考に自分の好きな色にカスタマイズ。という流れになると思います。

リンクやコメント欄がいま現在スクロールバーがないのだったら、特にスクロールバーが出現することもありませんよー
ありがとうございます！
2006-06-19 [2184]
今頑張ってます！

あまりにも初歩的な質問をしてすみません；
まだ、完成してませんが、これから頑張ります！
なんか失敗しちゃうんですよね〜↓

いろいろとありがとうございました！
satokoto
2006-06-21 [2201]
その後どうなったかなー。とりあえず色は変わったけどここがおかしい、というところなんかがあったら秘密でよいのでURL付きで書き込んでください。少し時間かかるかもしれませんがお手伝いに参りますよ。（土日あたり？！）
ありがとうございました
2006-06-22 [2209]
丁寧に説明していただきありがとうございました。
できました。
また、他にもいろいろ参考にさせていただきます。
satokoto
2006-06-24 [2215]
おぉ。ばっちり表示されてますね。ざっくりの説明だったのに理解していただいて感謝。ともかくよかったよかった＾＾
  • Kよっちさんへ
  • URL
  • 編集
御礼
2006-06-29 [2231]
はじめまして、saoriといいます。
スクロールバーが設置したくてこちらにたどりつきました。
おかげさまで無事設置できました。
ありがとうございます。

事後報告なのですが・・・
下記URLの記事中に参照先の紹介と
リンクをはらせていただいています。
satokoto
2006-06-29 [2233]
紹介までいただいて本当にありがとうございます。無事設置おめでとうございました！
うーん･･
2006-07-26 [2350]
はじめまして♪
スクロールバーをコピペして貼ってみたものの、
点線枠だけしが出ないのです(T-T)
スクロール部分はどいずこへ・・

何が悪いのでしょうか？
よろしくお願いします。
satokoto
2006-07-27 [2353]
このタグは何か長いものを「はさむ」必要があります。「はさんだ何か」が短ければただの点線枠だけに。
れいさんのブログの場合は「わんこリンク」なんかをこのタグではさめばスクロールバーが出現すると思われます。
それでもスクロールバーが出現しない場合はheightの「170」を極端に短く「50」とかに変えてみてください。意味がつかめるのではないでしょか。うまくゆきますように！
れい
2006-07-28 [2357]
こんばんは☆
ありがとうございます^^
なんとか表示されるようになりました^^
これからちょこちょこ変えてみたいと思います☆
うれしい♪
satokoto
2006-07-28 [2358]
スクロールバー出現してましたね！やったー。
あとは横幅調整（多分widthの値を「180px」でぴったりになると思います）とか、色のカスタマイズですね。がんばってください！
感謝です^^
2006-07-28 [2359]
えっとですね・・
180にすると構成がバラバラになってしまうのですv-12
今は145にしてみたのですが、これだとちゃんと見えるのです。なんでだろ・・。
アセラの何かが関係してるのかな？
でもスクロールしてるんですv-353

もう少し大きくできそうなので後でトライしてみますv-218
ホントにうれしいv-411
satokoto
2006-07-29 [2364]
そかそか。CSSのサイドバー幅いっぱいで書いてしまったのでカラムが落ちてしまうんですね。（ごめんなさい）
いま拝見したところ、ばっちりフィット！無事設置おめでとうございました。
なんでだろ・・
2006-07-30 [2369]
こんばんは☆
180に少しずつ更新してみたら、でけました♪
なんでだろ・・。
ありがとうございました☆
素晴らしい♪
2006-09-01 [2436]
scriptはiframeで囲めないし・・・。
と悩んでいたところに素晴らしいものを作っていただいてありがとうございます！！！
感謝♪感謝♪
satokoto
2006-09-02 [2439]
ねこへそって初めて聞きましたー。早速うちのピーをひっくりがえして探してみたけど、ついに見つからず・・。また機嫌の良いときに挑戦してみます！
  • ねこへそさんへ
  • URL
  • 編集
2006-09-22 [2499]
fc2にこれをつける場合はどうやったらよいのでしょうか。。。全くわからないので教えていただけるとありがたいです☆
satokoto
2006-09-22 [2500]
ええと教えて差し上げたいのは山々なんですが、そのご質問だと、わたしも何からお教えすればよいのか検討がつかないのですが・・。

きっとサイドバーに取り付けたいんですよね？いろいろ考えたんですが、共有プラグインで公開されてる方がいらっしゃるので、そちらを取り付けたほうが早いように思います。

管理画面＞プラグインの設定＞プラグインサーチ
ここのキーワードの入力欄に「スクロールバー付き」と入れて検索してみてください。
「スクロールバー付きのBOX」というプラグインが表示されると思うので、そちらを使ってみてはどうでしょうか。うちで紹介してるものと種類は同じなのですが、「追加」を押すだけで表示されるので簡単ですよー。
サイドバーが崩れてしまいました！
2006-10-04 [2518]
はじめまして。
スクロールバーを探していて、こちらにたどり着き早速利用させていただいています。
ありがとうございます。
ＦＣ２のブログのサイドバーに１つ貼り付けて成功して喜んでいたのですが、２つめを貼り付けたところサイドバーが記事の下部に移動してしまいました。
ＰＸ寸法などを縮小したりいろいろと試みましたが。
どうしても正しく復帰できません。
ブログ初心者ですが、どうしたらよいのか教えていただけないでしょうか？
回答お待ちしています。
satokoto
2006-10-05 [2519]
いまは２つ目のスクロールバーは付けてない状態ですよね。
ソース見てみましたが一部あれ？というところがあったので、そちらにお邪魔＆秘密でコメントさせていただきました。
これが原因だったら解決すると思うのですが・・。うまくゆくといいけどなー。
[参考まで]
FC2ブログには共有プラグインに「スクロールバー付きのBOX」というのがあるので、そっちを導入したほうが早いかもしれません。

まだサイドバーが崩れてしまうようだったら、お気軽にどうぞ。
  • letasu02さんへ
  • URL
  • 編集
ありがとうございます（_　_*）））
2007-01-19 [3042]
はじめまして。今晩は。

スクロールを探していました。

とっても嬉しいです。

解りやすくて感激ｯ(ﾉω･､)ﾟ.+°致しました。

早速使用させて頂きます。

ありがとうございます。

ご活躍をお祈り致します。<(_ _)>
  • のりもくれん
  • URL
  • 編集
satokoto
2007-01-19 [3043]
うまく設置できたでしょーか。嬉しいメッセージをありがとうございました！
  • のりもくれんさんへ
  • URL
  • 編集
上手く出来ました。^▽^
2007-01-22 [3054]
ご心配頂まして感謝（＾人＾*）です。

とっても　良くわかりました。

こちらこそ、上手くできて嬉しかったです。

ありがとうございました。┏●ﾞ
  • のりもくれん
  • URL
  • 編集
こんにちは
2007-03-02 [3186]
メロでお世話になっております。

　さっそくですが、過去記事のリストにスクロールバーをつけようと、色々奔走しています。
どこをどう頑張っても、左メニュー全部についてしまう状態。

　gooブログの無料版を使っているのですが、やはりHTML編集まで出来ないと、過去記事だけにスクロールバーというのはムリなのでしょうか。
ちなみに、gooスタッフブログでは、出来てて。。。

　ここのタグ（というのでしょうか）をそのまま貼り付けると、ほかの方法よりかわいらしくなるので、枠だけを消して使わせていただこうか、それとも使わずそのままにするか、迷っています。
　何か方法をご存知であれば、御教授ください。
　　よろしくお願いいたします。
satokoto
2007-03-03 [3187]
gooブログでできるかどうか、となるとブログサービスの領域なので、わたしはgooブログユーザーではないのでわかりません。ただ、無料版だとHTML編集ができないんですね？
・・・うーん、となると無理のような気がします。
ブログサービスの管理者さんにお尋ねいただくと確実だと思います。お役にたてずにごめんなさい。
  • ちゃくれさんへ
  • URL
  • 編集
すみません
2007-04-19 [3273]
すみません質問なんですけど
サイドバーのカテゴリーの所をスクロールバーにしたいと思っているのですが。。。
どうすればいいのでしょうか？？？
CSS側でやるのでしょうか？？
こういうのいじった事がなくて…
ブログはseesaaを使ってます。
satokoto
2007-04-22 [3277]
ご質問なのに遅くなってごめんなさい！

Seesaaの場合は「デザイン＞コンテンツ」から「カテゴリ」というところを選んでクリック。
開いた画面の右隅あたり、「コンテンツHTML編集」を開くと、こんなタグが出てくると思います。
もしかしたらテンプレートによって若干タグが違うかも。はさむ部分はオレンジ色の部分になります。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>

それをバシッと下記に置き換え。青字の部分が今回追加した新たなタグです。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<div style="overflow: auto;
font-size:10px; width:100%; height:130px;
border: 1px #6699FF dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #6699FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: orange;">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>
</div>

置き換えたらまだ保存せずに、下の方の「トップページをプレビュー」を使って実際の表示を確かめてみてください。思いどおりになったら「保存」ボタン。
どでしょうか。うまくゆきますように！
ありがとうございます
2007-04-24 [3282]
出来ました〜！
うまくゆきましたよ♪
教えていただき本当にありがとうございますm(__)m
satokoto
2007-04-28 [3285]
まじですかー！！よかった。ご報告ありがとうございました^^
スクロールバーでご相談です。
2008-02-21 [3925]
インターネットエクスプローラーである、お気に入り欄のスクロールバーのようなものを作りたいのですが中々うまくいきません。。
もしよかったら教えていただけないでしょうか。。
satokoto
2008-02-21 [3926]
わたしでわかることなら喜んでと言いたいところなのですが、インターネットエクスプローラーの「お気に入り」欄にスクロールバーは見当たらないので、よく状況が飲み込めてません。もう少し具体的にお願いできますか？

ここではブログに簡単に貼り付けられるスクロールバーをご説明しています。IE（インターネットエクスプローラー）など、ブラウザ自体の設定説明ではないのでどーかあらかじめご了承ください。
あの…
2008-03-07 [3956]
あの、私ブログ始めたばっかりなんですよ。e-274
それで、全然知らないんです。
スクロールバー付けたいんですけど、どうやったら出来ますかね??
はじめまして
2008-05-22 [4032]
スクロールバーをつけようと探していたら
たどり着きました。
いきなり失礼かと思いましたが
どうしても設定することができなく
質問させていただきました。
もし、よろしければお答えいただけたらと思います。

枠はサイドバーにつけることはできたのですが
(いまつけっぱなしにしています。)
この中にカテゴリーなどを表示することができません。
わたしの使っているのはjugemの「cmsp-シンプル」
という公式プレートを加工して使っています。
ちなみにアーカイブは
<!-- BEGIN archives -->
<dt>■ Archive</dt>
<dd class="hover">
<ul>
<!-- BEGIN archives_items -->
<li><a href="./?month={archives_item_id}">{archives_item_eng} ({archives_item_num})</a></li>
<!-- END archives_items -->
</ul>
</dd>
<!-- END archives -->

こんな感じになっています。
適当に、↑のhtml内を全部入れてみたり一部を
『ここに「これをペーストしてください」って配布された各サービスのタグを貼る。』
いれてみたりして実験してみたんですがうまくいきません。
よかったらアドバイスよろしくお願いします。
(ё_ё)







satokoto
2008-05-22 [4033]
こんにちは！
テストブログですが、カテゴリーをスクロールバー化しています。イメージ的にはこんな感じでしょうか？
http://satokoto.jugem.jp/

この場合は「テンプレートの編集」へ、スクロールバーのタグを直接貼る必要があります。

アーカイブの例をあげていただいてるので、アーカイブ部分で説明すると、下記のような感じです。

<!-- BEGIN archives -->
<dt>■ Archive</dt>
<div style="overflow: auto;
font-size:10px; height:60px;
border: 1px #6699FF dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #6699FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: orange;">
<dd class="hover">
<ul>
<!-- BEGIN archives_items -->
<li><a href="./?month={archives_item_id}">{archives_item_eng} ({archives_item_num})</a></li>
<!-- END archives_items -->
</ul>
</dd>
</div>
</dl>
<!-- END archives -->

横幅のwidth部分は削除したほうがよさげ。縦幅のheight部分「60px」はかなり短めになっちゃうので、100pxや150pxなどお好みで調節してみてくださいませ。
うまくいきますよーに！
  • hiropon*さんへ
  • URL
  • 編集
（＾∀＾）
2008-05-22 [4034]
早速お返事ありがとうございます〜！！
テストブログを拝見したんですが
その点線の四角の中にカテゴリ１、カテゴリ２
を入れて長くなったカテゴリーをさっぱりさせたかったんです
試しにやってみたら同じような感じになってしまいました。
(T∩T)難しいです〜〜〜
satokoto
2008-05-23 [4035]
うわ、ごめんなさい。IEで見るとスクロール部分が空白でしたね。「div」で挟む場所を「dd毎」ではなく「ul毎」へ変えるとうまくいきました。

<!-- BEGIN archives -->
<dt>■ Archive</dt>
<dd class="hover">
<div style="overflow: auto;
overflow-x:hidden;
font-size:10px; height:60px;
border: 1px #6699FF dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #6699FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: orange;">
<ul>
<!-- BEGIN archives_items -->
<li><a href="./?month={archives_item_id}">{archives_item_eng} ({archives_item_num})</a></li>
<!-- END archives_items -->
</ul>
</div>
</dd>
</dl>
<!-- END archives -->

わたしからはこれでアーカイブの中身はスクロールされてますが、どーでしょか？

※「overflow-x:hidden;」を新たに追加してますが、これは横方向のスクロールバーを消す指定です。
  • hiropon*さんへ
  • URL
  • 編集
ゎーィ♪ヽ(*´∀｀)ノ
2008-05-23 [4036]
出来ました〜〜昨日は朝から
何時間も格闘してダメだったのに
すんなりできちゃいました。
色々な場所に入れてみたんですけどねぇ・・・
簡単にできて感動してますー（；∀；）
思いきって聞いてみてよかったです♪

ﾎﾝﾄーーにどうもありがとうございました。
リンクしましたので
またお世話になるかもしれませんが・・・("▽"*)
よろしくお願いします！！！
satokoto
2008-05-23 [4037]
よかったー！ばっちりスクロールで�