2006年08月16日
プラグインや最新のコメントなどにスクロールバーを設置する
以前にもスクロールバーを設置する方法を記事にしましたが、サイドバーのプラグインやリンクリスト、最新のコメントなどにスクロールバーを設置する方法については、解説できていませんでした。うっかりすると忘れてしまいますので、ここに控えておこうと思います。
CSS編集なんて面倒なしで、簡単にスクロールバーをつけたい場合
- FC2にログインして、管理者ページの左サイドの「環境設定」の項目[プラグインの設定]をクリックします。
- スクロールバーを設置したいプラグインの「HTMLの変更 」をクリックし、下の例のように<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;">〜</div>で囲んで、[プレビュー]で確認してから、[変更]をクリックしましょう。最新のコメント部分につける場合
<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;"><div id="commentlist">{recent_comment_list}</div>
</div>プラグイン全体につける場合
<!-- ＆freeareaの中にHTMLが代入されます。 -->
<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;"><p class="plugin-freearea" &align>
&freearea
</p></div>
なお、プラグインに入れたものの一部につける場合は、スクロールバーを設置したいプラグインの「設定の変更」をクリックして、
設置したい部分にだけを<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;">〜</div>で囲めばOKです。もちろん高さの150pxやカラーコードの#ffffffは好みで変更してくださいね。
CSS編集してスクロールバーをつけたい場合
- FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定 ]をクリックします。
- 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
- 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の一番下にコードを記入します。必ずバックアップしましょう！いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
/*プラグインにスクロールバーを自動生成*/
.plugin-scroll
{
overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;
}
heightの値は自由に変更してください。heightで設定した高さ(この例では150px)を超えた場合にのみ、縦スクロールバーがつくことになります。また、scrollbar-base-color:□□□;にはお好みのカラーコードを記入してください。スクロールバーの色はInternetExplorerのみに有効です。また、ブログのスクロールバーすべてを同じ色にしたいときは下のコードを追加してください。
/*すべてのスクロールバーを白にする。*/
html
{
scrollbar-base-color:#ffffff;
} - 左サイドの「環境設定」の項目[プラグインの設定]をクリックします。
- スクロールバーを設置したいプラグインの「HTMLの変更 」をクリックし、下の例のように<div class="plugin-scroll">〜</div>で囲んで、[プレビュー]で確認してから、[変更]をクリックしましょう。最新のコメント部分につける場合
<div class="plugin-scroll">
<div id="commentlist">{recent_comment_list}</div>
</div>プラグイン全体につける場合
<!-- ＆freeareaの中にHTMLが代入されます。 -->
<div class="plugin-scroll">
<p class="plugin-freearea" &align>
&freearea
</p></div>
なお、プラグインに入れたものの一部につける場合は、スクロールバーを設置したいプラグインの「設定の変更」をクリックして、
設置したい部分にだけを<div class="plugin-scroll">〜</div>で囲めばOKです。
yozoからのお願い
私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New HTML4.01からXHTMLへ 図形のalign属性によるWin+IEの表示の不具合を直す。 | Top | DrecomRSSを使って他のブログ名／最新記事を表示する Old≫
トラックバックURL
トラックバック
≫ みんな大好きじゃがバター☆ from 四季
じゃがいも消費大作戦!!!みんなきっと大好きなじゃがバター♪これ・・・。簡単なのに美味しい優れもの♪皮のまま茹でて、柔らかくなったじゃがいもにバターと塩をかけて食べます♪旨いなぁー♪取れたてじゃがじゃがちゃ [Read More]
コメント
ありがとうねー・・・。とりあえず、簡単にスクロールバーをつけたい場合で、試してみたよー。出来たぁー♪嬉しいです☆
明日ゆっくり、CSS編集もしてみようかなぁーと思ってるの♪
ありがとうねー。ホントいつもお世話になりっぱなしで・・・。感謝♪感謝です。
yozoちゃんの記事を読んでると私でも出来るから・・・。スゴイなぁーと思う♪
他で出来なくても、ここに来ると出来ちゃうんだもん♪
ホントアリガトねー☆
CSS編集で、苦戦したらまたヘルプーーーお願いしに来るかも知れないけど・・・。私も勉強しなきゃなぁーと思った。アリガトねー☆
Posted by enu at 2006.08.16 21:41 | edit
コメント
＞ありがとうねー・・・。とりあえず、簡単にスクロールバーをつけたい場合で、
＞試してみたよー。出来たぁー♪嬉しいです☆
できましたか？(*^-ﾟ)vｨｪｨ♪ ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
簡単とはいえ、ケアレスミスが命取りになることには変わりはありませんから、
ミスなくできるというのが、ストレスをためずにすむことになりますね。
＞明日ゆっくり、CSS編集もしてみようかなぁーと思ってるの♪
(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ リラックスして、ゆっくりやれば簡単に出来ますよ。
いつでもいいから、がんばってね d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
＞yozoちゃんの記事を読んでると私でも出来るから・・・。スゴイなぁーと思う♪
それはありがたいですね。とても励みになりますよ。ヾ(〃^∇^)ﾉわぁい♪
enuちゃんがその気になって読んでくれているからですよ。わかるよって
思ってやれば、ここの記事の内容はできるはずですよ。自信もってね♪
＞CSS編集で、苦戦したらまたヘルプーーー
あはは・・・いつでも遠慮なくどうぞ。質問受けこそ、yozoのスキルUPにつながりますからね。こちらこそよろしくでっす m(_ _)m
失礼ながらenuちゃんのブログのソースを見させていただきました。左サイドはwidthが175pxのようですね。それと背景色は、#f8ead1でした。
また、横スクロールが出ると不細工なので、overflow-x:hidden;
overflow-y:auto;も追加して、
style="overflow : auto; height : 150px;width:150px; scrollbar-base-color : #f8ead1;overflow-x:hidden;
overflow-y:auto;"ということでやってみてくださいね。d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
Posted by enuちゃんへ at 2006.08.16 22:06 | edit
コメント
カスタマイズ、着々と進んでますね(・∀・)
こうやって記事を見てると自分トコにも手を入れたい衝動にかられます(笑)
プラグインにスクロールバーは試してみたいカスタムの一つではあるのですが、今のトコロあまり必要性をウチではあまり感じられなくて(・∀・；)
yozoさんトコみたいに賑わってくると便利ですもんね♪
これからも「あんな手・こんな手」期待してま〜す(ﾟーﾟ*)
Posted by Ｐａｖ at 2006.08.16 23:24 | edit
コメント
＞こうやって記事を見てると自分トコにも手を入れたい衝動にかられます(笑)
ふふふ・・・そうでしょ。人がやっているのを見ると、自分もやってみたいって
なっちゃうんですよね。よっくわかりますよΨ(｀∀´)Ψヶヶヶ
＞プラグインにスクロールバーは試してみたいカスタムの一つではあるの
＞ですが、今のトコロあまり必要性をウチではあまり感じられなくて(・∀・；)
あんまりやりすぎると、yozoんとこのブログのようにごちゃごちゃしちゃいますしね┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
＞これからも「あんな手・こんな手」期待してま〜す(ﾟーﾟ*)
はい♪ちょっと記事ネタがたまっていて、最近書ききれなくて困ってます。
がんばって記事にしていきまっすねー♪ m(_ _)m
Posted by Pavさんへ at 2006.08.17 00:31 | edit
コメント
あのね・・・。
overflow-y:auto;"
って、、、どこにつけたらいいんだろう・・・。
あのねー。CCS編集はしてみたんだけどね・・・。
横スクロールが出ると不細工なので・・・って、、私も思ってたの。
もうちょっとがんばらないとなぁーと思ってたから、、、すごく助かる!!!
今日、yozoちゃんに教えてもらった事、記事にして、TB入れさせてもらうねー♪多分、私みたいに興味があってもなかなか、うまく出来ないでいる人って多いと思うんだぁー。
いろいろありがとうねー☆
ブログのソースまで、見ていただいて・・・。うーん・・・。ありがとーーー☆ホント感謝しています♪また、TBもって来るねー♪
Posted by enu at 2006.08.17 08:45 | edit
コメント
div style=""のところのstyleのことですよ。でもCSS編集をするのなら、
下のようにしたらいけると思いますよ。がんばってねー♪d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
.plugin-scroll
{
overflow : auto;
height : 150px;
width : 150px;
scrollbar-base-color : #f8ead1;
overflow-x:hidden;
overflow-y:auto;
}
Posted by enuちゃんへ at 2006.08.17 10:23 | edit
コメント
スクロールバーの色が変えられるとすごく雰囲気が変わって素敵ですよね♪
きっとこれに挑戦したい人がたくさんいるんだろうなぁと思います♪
とってもいい記事だと思います♪(*'ｰ')
皆さんが楽しんでカスタマイズしてくれるといいですね!!
Posted by まゆび at 2006.08.17 13:02 | edit
コメント
今日もセミが大コーラスしてますよ〜曇ってるけど暑い暑い♪
この記事、またブックマークさせていただいちゃいましたー！
いざという時の小技、いつもながらすごいなぁと思って読ませていただきました。
こういう記事って、わからない人にもわかるように書くのか
わかる人のちょいとプラスになるように書くのか
きっと書く側も難しいところだと思いますが、yozoさんの記事は
何もわからないσ(･ω･*)にも「デキソウ♪」と思えるわかりやすい内容ですよね！
いつも感謝してまーす(´･ω･)(´-ω-)(´_ _)ﾍﾟｺﾘ
Posted by モンビッケ at 2006.08.17 14:10 | edit
コメント
＞スクロールバーの色が変えられるとすごく雰囲気が変わって素敵ですよね♪
＞きっとこれに挑戦したい人がたくさんいるんだろうなぁと思います♪
以前にも記事にした内容なのですが、ここでもう一度、基本の使い方を記事にしてもいいかなって思いましたよ。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
プラグインのスクロールバーは、どうだったっけ・・・と実は少し前になったんですよ。ちょっと苦労したことがトラウマになってるのかもしれませんね。┐(´-｀)┌
＞皆さんが楽しんでカスタマイズしてくれるといいですね!!
はい♪yozoにできることは、誰にでもできるように記事にしたいと思ってます。
ちょっとしたことで、楽しくカスタマイズできますからね。記事も大切ですが、そういうブログの外観に力をいれるのも、ブログの楽しみでしょうからね。(*^-^)
褒めていただいてありがとーございまっす♪励みになりますよ。m(_ _)m
Posted by まゆびさんへ at 2006.08.17 14:43 | edit
コメント
＞今日もセミが大コーラスしてますよ〜曇ってるけど暑い暑い♪
おーーー♪大コーラスですか？最近はちょっと離れてくれましたね。
しかも朝だけですよ。あとは気にならないし・・・ヾ(￣o￣;)ﾁｶﾞｳｯﾃﾊﾞ､､､
＞この記事、またブックマークさせていただいちゃいましたー！
いつもいつもありがとーございまっす♪m(_ _)m
じつはブックマークって何？というyozoに愛の手を(ﾟｍﾟ*)ﾌﾟｯ
(たぶんお気に入り記事のリンク集ですよね。ちゃんと勉強しますm(_ _)m)
＞こういう記事って、わからない人にもわかるように書くのか
＞わかる人のちょいとプラスになるように書くのか
えへへ・・・わからない人にわかるようにかくことが一番自分のためになるんですよ。だって、『わかること、自分でできること』と、『説明できること』とは、その知識やスキルが断然違いますからね。つまり、yozoは最も自分のために記事をかいているんですよ。っていいカッコしてますね(￣∀￣*)ｲﾋｯ
＞何もわからないσ(･ω･*)にも「デキソウ♪」と思えるわかりやすい内容
＞ですよね！いつも感謝してまーす(´･ω･)(´-ω-)(´_ _)ﾍﾟｺﾘ
何よりのお言葉ですよ。本当に励みになります。m(_ _)m
でも、忌憚なく、びしびし「ここがわかんない｣「これはちゃう」とか言って下さいね。それもyozoのスキルアップですからね。ありがたいんですよね。
(でもお礼はできませんよ。（ΦωΦ）ふふふ････ )
Posted by モンビッケさんへ at 2006.08.17 14:53 | edit
コメント
あ･･･ｙｚｏｏさん！こんにちは〜〜〜〜〜o(ﾟ▽ﾟo)(oﾟ▽ﾟ)o
こういうやり方もあるんですね〜〜(◎-◎;)!!
奥が深こうございます・・・m(_ _"m) 試してみましょ＾＾ｖ
これとアト･･･真似っこしたいのが、コメントのレスなんです。「○○さんへ」という
形のものです。
レスの確認に来た方に分かりやすいし、折角最近のコメントなんて物をプラグインに入れているわけで･･･チョットした思いやりがすごい効果だなぁと思っていたんです。
Ｐｏｓｔｅｄ ｂｙを宛名にする事で、ご挨拶から入ることが出来るんですよね〜
本当にｙｏｚｏさんの気遣いには頭が下がりますm(_ _"m)
で・・・真似していいですか・・・？
Posted by ウッキ at 2006.08.17 14:54 | edit
コメント
＞こういうやり方もあるんですね〜〜(◎-◎;)!!
＞奥が深こうございます・・・m(_ _"m) 試してみましょ＾＾ｖ
あはは・・・基本は同じなのですが、どこに設置するかによって、色々と細かいところは変更しなきゃいけませんよね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞これとアト･･･真似っこしたいのが、コメントのレスなんです。
＞「○○さんへ」という形のものです。
どうぞ♪どうぞ♪遠慮なく真似してくださいね。レス確認に来られた方が
すぐに見られるようになりますからお勧めですよー！
実は、誰に書いたレスコメントか自分でよくわかるようにしているだけかも・・・
ﾋｿﾋｿ(ﾉ･o･((｡_｡*)ﾌﾑﾌﾑ というのは半分本当かも・・・(￣∀￣*)ｲﾋｯ
基本はお友達がサッとレスコメントにたどり着けるようにしたかったからなのですよ。そうしたら、自分も楽になったというのが真実ですよ。(*^-^)
＞本当にｙｏｚｏさんの気遣いには頭が下がりますm(_ _"m)
＞で・・・真似していいですか・・・？
あはは・・・ありがとーございまっす♪そのように仰られると、
(〃∇〃) てれっ☆ ってなっちゃいますよ♪('-'*)ｴﾍ
遠慮なく真似してくださいね。(*^-ﾟ)vｨｪｨ♪
Posted by ウッキさんへ at 2006.08.17 18:17 | edit
コメント
今や整理整頓(笑)にかかせないスクロールの付け方を
ありがとうございます＾＾
ごちゃごちゃなっているのをすっきりできますね。
これをしたい人は、たくさんいると思います。
いつもためになるカスタマイズ方法をありがとう＾＾
Posted by ゆうゆ at 2006.08.17 19:56 | edit
コメント
＞今や整理整頓(笑)にかかせないスクロールの付け方を
＞ありがとうございます＾＾ごちゃごちゃなっているのをすっきりできますね。
そうですよね。コンパクトになりますから、とても便利ですよね。
でもあんまり付けすぎると、yozoのブログのようにごちゃごちゃに
なってきちゃいますのでご注意を・・・(￣∀￣*)ｲﾋｯ
＞これをしたい人は、たくさんいると思います。
そうおっしゃってくださると、とてもうれしいです。
ありがとーございまっす♪m(_ _)m
FC2に引越してきていろいろな記事のフォーマットを作り変えている
ところなのですよ。特にカスタマイズの記事には時間がかかってしまうので、
それでなくても遅い記事作りがさらに遅くなって┐(´-｀)┌でっす。って
関係なかったですね(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
Posted by ゆうゆさんへ at 2006.08.17 22:38 | edit
コメント
とり急ぎ、使用報告させて頂きました m(_ _)m
もし何かあればアドバイスのほうも、どうぞよろしくお願いいたします☆彡
Posted by ろんちゃん at 2006.08.21 13:47 | edit
コメント
スクロールバー設置できましたか！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
＞もし何かあればアドバイスのほうも、どうぞよろしくお願いいたします☆彡
えっ？っと、たった今、ε=ε=ε=ヾ(э^・ｪ・^)эﾆｬﾎｰってお邪魔しましたよ。（笑）
きれいにサイドバーの幅に納まってますね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
デザイン的なことは、あまりyozoの意見は気にしない方がいいと思いますが、
スクロールバーの色を折りたたみ開閉ボタンの#CCFF99にしてもいいかも・・・
って思ったりしますけど・・・自信ないでっす（;￣ー￣A ｱｾｱｾ･･･
お役に立てずに申し訳ありません。 m(_ _)m
Posted by ろんちゃんさんへ at 2006.08.21 15:26 | edit
コメント
yozoちゃんのアドバイスを受けて♪
無事広げる事に成功しました♪
テンプレートの編集を頑張って読んだりいじったりしててもさっぱり広がらなくて（スクロールバーの幅）困ったぁー・・・と思ってココに来てみたら♪
一発解消!!!ブラグインの編集から変更するんだねー♪アハハ☆
出来たぁ♪出来たぁー♪
ありがとーー☆
お陰で見やすくなったよー☆
いつもありがとうねー♪
やっぱりyozoちゃんの記事は分かりやすいよ♪
Posted by enu at 2006.09.11 12:22 | edit
コメント
＞yozoちゃんのアドバイスを受けて♪無事広げる事に成功しました♪
おおお・・・できましたか？ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
やりましたね。でも、うっかりテンプレートの編集をいじっていたのですか？
yozoもよくうっかりどうやったのか忘れることがあります。だから、こんなカスタマイズ記事を書くようにしてるのですよ。(￣∀￣*)ｲﾋｯ
＞いつもありがとうねー♪やっぱりyozoちゃんの記事は分かりやすいよ♪
お役に立てて何よりです。意外なことを忘れてしまって、やたら時間がかかっちゃうのはよくあることですよ。どうやったかの確認がすぐできるようにしておかなきゃいけませんよね。yozoもたくさんリンク先を参照するようにしてますよ。(*^-^)
Posted by enuちゃんへ at 2006.09.11 16:39 | edit
コメント
またヘルプに来ちゃった。
季節に逆行してテンプレート変えたんだけど、スクロールバーの設定何度もしなおしては見たものの、以前の肌色のままなの・・・。
どうしてだろう・・・。
せめて白にしようかと頑張ったのだけれど・・・。だめだったの・・・。
うーーん・・・。
ごめんね。全然急がないので、時間のあるときに教えてください・・・。
いつもごめんね・・・。頼りっぱなしだね・・・。
Posted by enu at 2006.10.17 18:48 | edit
コメント
えっと、スクロールバーの色ですか？失礼してソースを見させていただくと、確かに#f8ead1の色になってますね。プラグインの設定で変更した後に、欄の下の[変更]ボタンをクリックし忘れているなんてことはありませんか♪お試しあれ♪ 八(＾□＾*) うまくいきますよーに!!
ちなみに背景色は#DEEFF7ですね。＼(*⌒0⌒)ｂがんばっ♪
Posted by enuちゃんへ at 2006.10.17 19:15 | edit
コメント
背景色早速変更してみたんだけどダメみたい・・・。
更新ボタンも押してるんだけどね・・・。
以前使ってたテンプレートももう一度設定しなおしたり、それでもだめだったから削除したりしたんだけど、やっぱダメみたい・・・。
もうちょっと頑張ってみるね。
すぐにお返事頂けてありがとう☆
いつも本当に感謝しています。
Posted by enu at 2006.10.18 13:04 | edit
コメント
えっと？プラグインは全然変更されてませんが・・・
ちょいと失礼してCSSファイルも見せていただきまっすm(_ _)m
なぁ〜るほど、enuちゃんはCSS編集でスクロールバーの色を変更しているんですよね。
ところが、スクロールバーを設置しているプラグインには
下のように書かれている部分があるでしょ。
<div style="overflow : auto; height : 250px;width:180px; scrollbar-base-color :#f8ead1;">
これでスクロールバーが#f8ead1という色になっちゃうんですよ。
CSSで設定した色を有効にするには、上の部分を
<div class="plugin-scroll">に変更してください。
それでＯＫだと思いますよ。＼(*⌒0⌒)ｂがんばっ♪
Posted by enuちゃんへ at 2006.10.18 13:41 | edit
コメント
すぐにレスくれてありがとうね♪
早速変更したら、問題解決しちゃいました♪
本当にいつもありがとう☆
スーパーマンだわ♪やっぱり☆
いつも頼りっぱなしで、、、本当にありがとう☆
Posted by enu at 2006.10.18 16:32 | edit
コメント
＞早速変更したら、問題解決しちゃいました♪
おおお！うまくいきましたね♪今、見てきましたよ♪
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
これで、CSS編集すればいいってなんとなくわかってきますよね。
こういう経験の積み重ねですよ。慣れれば実に簡単ですから！
yozoもよく失敗してますよ。ﾋｿﾋｿ(ﾉ･o･((｡_｡*)ﾌﾑﾌﾑ
＞本当にいつもありがとう☆スーパーマンだわ♪やっぱり☆
えへへ・・・(///∇//)ﾃﾚﾃﾚ それほどでも・・・(*^-^)
いつでも相談してね←なぁ〜んて調子に乗ってみましたm(_ _)m
Posted by enuちゃんへ at 2006.10.18 17:02 | edit