--年--月--日

スポンサーサイト

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

プラグインや最新のコメントなどにスクロールバーを設置する

 以前にもスクロールバーを設置する方法を記事にしましたが、サイドバーのプラグインやリンクリスト、最新のコメントなどにスクロールバーを設置する方法については、解説できていませんでした。うっかりすると忘れてしまいますので、ここに控えておこうと思います。


CSS編集なんて面倒なしで、簡単にスクロールバーをつけたい場合


  1. FC2にログインして、管理者ページの左サイドの「環境設定」の項目[プラグインの設定]をクリックします。


  2. スクロールバーを設置したいプラグインの「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編集してスクロールバーをつけたい場合


  1. FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定 ]をクリックします。


  2. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。


  3. 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の一番下にコードを記入します。

    必ずバックアップしましょう!
    いつも書いてますが、編集する前に、必ず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;
    }


  4. 左サイドの「環境設定」の項目[プラグインの設定]をクリックします。


  5. スクロールバーを設置したいプラグインの「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
人気blogランキング

スポンサーサイト

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

メイン

≪New HTML4.01からXHTMLへ 図形のalign属性によるWin+IEの表示の不具合を直す。 | Top | DrecomRSSを使って他のブログ名/最新記事を表示する Old≫

トラックバックURL


コメント

こんばんはー。yozoちゃん。
ありがとうねー・・・。とりあえず、簡単にスクロールバーをつけたい場合で、試してみたよー。出来たぁー♪嬉しいです☆
明日ゆっくり、CSS編集もしてみようかなぁーと思ってるの♪
ありがとうねー。ホントいつもお世話になりっぱなしで・・・。感謝♪感謝です。
yozoちゃんの記事を読んでると私でも出来るから・・・。スゴイなぁーと思う♪
他で出来なくても、ここに来ると出来ちゃうんだもん♪
ホントアリガトねー☆
CSS編集で、苦戦したらまたヘルプーーーお願いしに来るかも知れないけど・・・。私も勉強しなきゃなぁーと思った。アリガトねー☆

コメント

>enuちゃん、こんばんはー♪

>ありがとうねー・・・。とりあえず、簡単にスクロールバーをつけたい場合で、
>試してみたよー。出来たぁー♪嬉しいです☆
できましたか?(*^-゚)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(@^∇゚)/ファイトッ♪

コメント

yozoさん、こんばんわ♪(゚▽゚*)

カスタマイズ、着々と進んでますね(・∀・)
こうやって記事を見てると自分トコにも手を入れたい衝動にかられます(笑)

プラグインにスクロールバーは試してみたいカスタムの一つではあるのですが、今のトコロあまり必要性をウチではあまり感じられなくて(・∀・;)
yozoさんトコみたいに賑わってくると便利ですもんね♪

これからも「あんな手・こんな手」期待してま~す(゚ー゚*)

コメント

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

>こうやって記事を見てると自分トコにも手を入れたい衝動にかられます(笑)
ふふふ・・・そうでしょ。人がやっているのを見ると、自分もやってみたいって
なっちゃうんですよね。よっくわかりますよΨ(`∀´)Ψヶヶヶ

>プラグインにスクロールバーは試してみたいカスタムの一つではあるの
>ですが、今のトコロあまり必要性をウチではあまり感じられなくて(・∀・;)
あんまりやりすぎると、yozoんとこのブログのようにごちゃごちゃしちゃいますしね┐( ̄ヘ ̄)┌ ヤレヤレ・・・

>これからも「あんな手・こんな手」期待してま~す(゚ー゚*)
はい♪ちょっと記事ネタがたまっていて、最近書ききれなくて困ってます。
がんばって記事にしていきまっすねー♪ m(_ _)m

コメント

おはよーー。yozoちゃん。また来ちゃった☆
あのね・・・。
v-133style="overflow : auto; height : 150px;width:150px; scrollbar-base-color : #f8ead1;overflow-x:hidden;
overflow-y:auto;"
って、、、どこにつけたらいいんだろう・・・。
あのねー。CCS編集はしてみたんだけどね・・・。
横スクロールが出ると不細工なので・・・って、、私も思ってたの。
もうちょっとがんばらないとなぁーと思ってたから、、、すごく助かる!!!

今日、yozoちゃんに教えてもらった事、記事にして、TB入れさせてもらうねー♪多分、私みたいに興味があってもなかなか、うまく出来ないでいる人って多いと思うんだぁー。
いろいろありがとうねー☆
ブログのソースまで、見ていただいて・・・。うーん・・・。ありがとーーー☆ホント感謝しています♪また、TBもって来るねー♪

コメント

>enuちゃん、 おはよーございまっす♪
div style=""のところのstyleのことですよ。でもCSS編集をするのなら、
下のようにしたらいけると思いますよ。がんばってねー♪d(@^∇゚)/ファイトッ♪
.plugin-scroll
{
overflow : auto;
height : 150px;
width : 150px;
scrollbar-base-color : #f8ead1;
overflow-x:hidden;
overflow-y:auto;
}

コメント

yozoさん、こんにちは♪(o^∇^o)ノ
スクロールバーの色が変えられるとすごく雰囲気が変わって素敵ですよね♪
きっとこれに挑戦したい人がたくさんいるんだろうなぁと思います♪
とってもいい記事だと思います♪(*'ー')
皆さんが楽しんでカスタマイズしてくれるといいですね!!

コメント

yozoさん(。・ω・。)ノコンチャ☆・゚:*:゚
今日もセミが大コーラスしてますよ~曇ってるけど暑い暑い♪

この記事、またブックマークさせていただいちゃいましたー!
いざという時の小技、いつもながらすごいなぁと思って読ませていただきました。
こういう記事って、わからない人にもわかるように書くのか
わかる人のちょいとプラスになるように書くのか
きっと書く側も難しいところだと思いますが、yozoさんの記事は
何もわからないσ(・ω・*)にも「デキソウ♪」と思えるわかりやすい内容ですよね!
いつも感謝してまーす(´・ω・)(´-ω-)(´_ _)ペコリ

コメント

>まゆびさん、こんにちはー♪

>スクロールバーの色が変えられるとすごく雰囲気が変わって素敵ですよね♪
>きっとこれに挑戦したい人がたくさんいるんだろうなぁと思います♪
以前にも記事にした内容なのですが、ここでもう一度、基本の使い方を記事にしてもいいかなって思いましたよ。(゚-゚*)(。。*)ウンウン
プラグインのスクロールバーは、どうだったっけ・・・と実は少し前になったんですよ。ちょっと苦労したことがトラウマになってるのかもしれませんね。┐(´-`)┌

>皆さんが楽しんでカスタマイズしてくれるといいですね!!
はい♪yozoにできることは、誰にでもできるように記事にしたいと思ってます。
ちょっとしたことで、楽しくカスタマイズできますからね。記事も大切ですが、そういうブログの外観に力をいれるのも、ブログの楽しみでしょうからね。(*^-^)
褒めていただいてありがとーございまっす♪励みになりますよ。m(_ _)m

コメント

>モンビッケさん、(。・ω・。)ノコンチャ☆・゚:*:゚(真似しちゃいました)

>今日もセミが大コーラスしてますよ~曇ってるけど暑い暑い♪
おーーー♪大コーラスですか?最近はちょっと離れてくれましたね。
しかも朝だけですよ。あとは気にならないし・・・ヾ( ̄o ̄;)チガウッテバ、、、

>この記事、またブックマークさせていただいちゃいましたー!
いつもいつもありがとーございまっす♪m(_ _)m
じつはブックマークって何?というyozoに愛の手を(゚m゚*)プッ
(たぶんお気に入り記事のリンク集ですよね。ちゃんと勉強しますm(_ _)m)

>こういう記事って、わからない人にもわかるように書くのか
>わかる人のちょいとプラスになるように書くのか
えへへ・・・わからない人にわかるようにかくことが一番自分のためになるんですよ。だって、『わかること、自分でできること』と、『説明できること』とは、その知識やスキルが断然違いますからね。つまり、yozoは最も自分のために記事をかいているんですよ。っていいカッコしてますね( ̄∀ ̄*)イヒッ

>何もわからないσ(・ω・*)にも「デキソウ♪」と思えるわかりやすい内容
>ですよね!いつも感謝してまーす(´・ω・)(´-ω-)(´_ _)ペコリ
何よりのお言葉ですよ。本当に励みになります。m(_ _)m
でも、忌憚なく、びしびし「ここがわかんない」「これはちゃう」とか言って下さいね。それもyozoのスキルアップですからね。ありがたいんですよね。
(でもお礼はできませんよ。(ΦωΦ)ふふふ・・・・ )

コメント

〆(・_・。)カキカキッρ('-'* )フムフム□_ρ゙(・・ ) ポチッ
あ・・・yzooさん!こんにちは~~~~~o(゚▽゚o)(o゚▽゚)o
こういうやり方もあるんですね~~(◎-◎;)!!
奥が深こうございます・・・m(_ _"m) 試してみましょ^^v
これとアト・・・真似っこしたいのが、コメントのレスなんです。「○○さんへ」という
形のものです。
レスの確認に来た方に分かりやすいし、折角最近のコメントなんて物をプラグインに入れているわけで・・・チョットした思いやりがすごい効果だなぁと思っていたんです。
Posted byを宛名にする事で、ご挨拶から入ることが出来るんですよね~
本当にyozoさんの気遣いには頭が下がりますm(_ _"m)
で・・・真似していいですか・・・?

コメント

>ウッキさん、こんばんはー♪

>こういうやり方もあるんですね~~(◎-◎;)!!
>奥が深こうございます・・・m(_ _"m) 試してみましょ^^v
あはは・・・基本は同じなのですが、どこに設置するかによって、色々と細かいところは変更しなきゃいけませんよね。(゚-゚*)(。。*)ウンウン

>これとアト・・・真似っこしたいのが、コメントのレスなんです。
>「○○さんへ」という形のものです。
どうぞ♪どうぞ♪遠慮なく真似してくださいね。レス確認に来られた方が
すぐに見られるようになりますからお勧めですよー!
実は、誰に書いたレスコメントか自分でよくわかるようにしているだけかも・・・
ヒソヒソ(ノ・o・((。_。*)フムフム  というのは半分本当かも・・・( ̄∀ ̄*)イヒッ
基本はお友達がサッとレスコメントにたどり着けるようにしたかったからなのですよ。そうしたら、自分も楽になったというのが真実ですよ。(*^-^)

>本当にyozoさんの気遣いには頭が下がりますm(_ _"m)
>で・・・真似していいですか・・・?
あはは・・・ありがとーございまっす♪そのように仰られると、
(〃∇〃) てれっ☆ ってなっちゃいますよ♪('-'*)エヘ
遠慮なく真似してくださいね。(*^-゚)vィェィ♪

コメント

yozoさん、こんばんは^^
今や整理整頓(笑)にかかせないスクロールの付け方を
ありがとうございます^^
ごちゃごちゃなっているのをすっきりできますね。
これをしたい人は、たくさんいると思います。
いつもためになるカスタマイズ方法をありがとう^^

コメント

>ゆうゆさん、こんばんはー♪

>今や整理整頓(笑)にかかせないスクロールの付け方を
>ありがとうございます^^ごちゃごちゃなっているのをすっきりできますね。
そうですよね。コンパクトになりますから、とても便利ですよね。
でもあんまり付けすぎると、yozoのブログのようにごちゃごちゃに
なってきちゃいますのでご注意を・・・( ̄∀ ̄*)イヒッ

>これをしたい人は、たくさんいると思います。
そうおっしゃってくださると、とてもうれしいです。
ありがとーございまっす♪m(_ _)m
FC2に引越してきていろいろな記事のフォーマットを作り変えている
ところなのですよ。特にカスタマイズの記事には時間がかかってしまうので、
それでなくても遅い記事作りがさらに遅くなって┐(´-`)┌でっす。って
関係なかったですね(=⌒▽⌒=) ニャハハハ♪

コメント

yozoさんのこの記事を参考に、1番簡単そうな囲むだけのスクロールバーを設置させて頂きました。
とり急ぎ、使用報告させて頂きました m(_ _)m

もし何かあればアドバイスのほうも、どうぞよろしくお願いいたします☆彡

コメント

>ろんちゃんさん、こんにちはー♪
スクロールバー設置できましたか!オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
>もし何かあればアドバイスのほうも、どうぞよろしくお願いいたします☆彡
えっ?っと、たった今、ε=ε=ε=ヾ(э^・ェ・^)эニャホーってお邪魔しましたよ。(笑)
きれいにサイドバーの幅に納まってますね。(゚-゚*)(。。*)ウンウン
デザイン的なことは、あまりyozoの意見は気にしない方がいいと思いますが、
スクロールバーの色を折りたたみ開閉ボタンの#CCFF99にしてもいいかも・・・
って思ったりしますけど・・・自信ないでっす(; ̄ー ̄A アセアセ・・・
お役に立てずに申し訳ありません。 m(_ _)m

コメント

こんにちはー。yozoちゃん。
yozoちゃんのアドバイスを受けて♪
無事広げる事に成功しました♪
テンプレートの編集を頑張って読んだりいじったりしててもさっぱり広がらなくて(スクロールバーの幅)困ったぁー・・・と思ってココに来てみたら♪
一発解消!!!ブラグインの編集から変更するんだねー♪アハハ☆
出来たぁ♪出来たぁー♪
ありがとーー☆
お陰で見やすくなったよー☆
いつもありがとうねー♪
やっぱりyozoちゃんの記事は分かりやすいよ♪

コメント

>enuちゃん、こんにちはー♪

>yozoちゃんのアドバイスを受けて♪無事広げる事に成功しました♪
おおお・・・できましたか?オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
やりましたね。でも、うっかりテンプレートの編集をいじっていたのですか?
yozoもよくうっかりどうやったのか忘れることがあります。だから、こんなカスタマイズ記事を書くようにしてるのですよ。( ̄∀ ̄*)イヒッ

>いつもありがとうねー♪やっぱりyozoちゃんの記事は分かりやすいよ♪
お役に立てて何よりです。意外なことを忘れてしまって、やたら時間がかかっちゃうのはよくあることですよ。どうやったかの確認がすぐできるようにしておかなきゃいけませんよね。yozoもたくさんリンク先を参照するようにしてますよ。(*^-^)

コメント

こんばんはー。yozoちゃん。
またヘルプに来ちゃった。
季節に逆行してテンプレート変えたんだけど、スクロールバーの設定何度もしなおしては見たものの、以前の肌色のままなの・・・。
どうしてだろう・・・。
せめて白にしようかと頑張ったのだけれど・・・。だめだったの・・・。
うーーん・・・。
ごめんね。全然急がないので、時間のあるときに教えてください・・・。
いつもごめんね・・・。頼りっぱなしだね・・・。

コメント

>enuちゃん、こんばんはー♪
えっと、スクロールバーの色ですか?失礼してソースを見させていただくと、確かに#f8ead1の色になってますね。プラグインの設定で変更した後に、欄の下の[変更]ボタンをクリックし忘れているなんてことはありませんか♪お試しあれ♪  八(^□^*) うまくいきますよーに!!
ちなみに背景色は#DEEFF7ですね。\(*⌒0⌒)bがんばっ♪

コメント

こんにちはー。yozoちゃん。
背景色早速変更してみたんだけどダメみたい・・・。
更新ボタンも押してるんだけどね・・・。
以前使ってたテンプレートももう一度設定しなおしたり、それでもだめだったから削除したりしたんだけど、やっぱダメみたい・・・。
もうちょっと頑張ってみるね。
すぐにお返事頂けてありがとう☆
いつも本当に感謝しています。

コメント

>enuちゃん、こんにちはー♪
えっと?プラグインは全然変更されてませんが・・・
ちょいと失礼してCSSファイルも見せていただきまっすm(_ _)m
なぁ~るほど、enuちゃんはCSS編集でスクロールバーの色を変更しているんですよね。
ところが、スクロールバーを設置しているプラグインには
下のように書かれている部分があるでしょ。
<div style="overflow : auto; height : 250px;width:180px; scrollbar-base-color :#f8ead1;">
これでスクロールバーが#f8ead1という色になっちゃうんですよ。
CSSで設定した色を有効にするには、上の部分を
<div class="plugin-scroll">に変更してください。
それでOKだと思いますよ。\(*⌒0⌒)bがんばっ♪

コメント

yozoちゃん。
すぐにレスくれてありがとうね♪
早速変更したら、問題解決しちゃいました♪
本当にいつもありがとう☆
スーパーマンだわ♪やっぱり☆
いつも頼りっぱなしで、、、本当にありがとう☆

コメント

>enuちゃん、こんにちはー♪

>早速変更したら、問題解決しちゃいました♪
おおお!うまくいきましたね♪今、見てきましたよ♪
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
これで、CSS編集すればいいってなんとなくわかってきますよね。
こういう経験の積み重ねですよ。慣れれば実に簡単ですから!
yozoもよく失敗してますよ。ヒソヒソ(ノ・o・((。_。*)フムフム

>本当にいつもありがとう☆スーパーマンだわ♪やっぱり☆
えへへ・・・(///∇//)テレテレ それほどでも・・・(*^-^)
いつでも相談してね←なぁ~んて調子に乗ってみましたm(_ _)m

コメントする

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

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

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


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