スクロールバー設定タグキイタ？オクサンアラヤダワァ

空手・収納・プラモ・手芸・ブログカスタマイズ・モバイルHP製作etc…多趣味な人の日記です。レーシックレビューも。

2008/09 ≪12345678910111213141516171819202122232425262728293031 ≫ 2008/11

お知らせ

［更新履歴(主にブログカスタマイズ・素材関連)］
カスタマイズやプラグイン導入・素材利用の際、コメントやトラックバックを頂けたりすると喜びます。

［09/30］サイト外タグ検索(プラグインバージョン)自分と同じタグを指定したブログを検索

［09/05］下記共有プラグインが再承認されました（公開中・DL可能）
［09/03］共有プラグイン「なんでもスクロール」再登録について
［08/13］画像URL～画像でリンクを貼る
［08/05］左右振り分けカスタマイズ(記事欄＆コメント欄用)についてのお知らせ
［08/01］続・スタイルシートでタイトルと日付を左右に振り分け(コメント欄用)
［07/03］サイトと同じ幅のフリーエリアを作る
［05/21］今日の日付入りカレンダー(共有プラグイン登録)
［05/11］管理者用記事編集タグ・最新版
［05/08］横カレンダーの表示＆背景色の変更
［04/20］ FC2ブックマークの位置を変更
［04/18］ FC2ブログ拍手の位置を変更
［04/18］最上部移動と記事編集タグ＆管理者用作業リンクを再編集
［03/28］ユーザータグリスト改良版
［03/23］はてなブックマークアイコン15色製作と設置方法
［03/16］ RSSフィードアイコン＆メールボタン製作
［03/13］スタイルシートでタイトルと日付を左右に振り分け(記事タイトル用)
［03/10］ミニブログPIYO用のボタン追加
［03/09］ミクシー用バナー(ボタン)製作(3/11サイズ追加)
［02/22］スクロールバー設定タグに「横スクロールが出てしまった場合」の修正方法を追記
［02/22］スパムコメント対策として、コメント投稿時における画像認証機能を適用
［02/21］リンク文字にマウスカーソルを合わせた時の装飾(レインボーリンク)

→2007年
［11/18］クリック型ランキングを全て削除。
［08/23］コミュニティー(テーマ・ジャンル)のリンク設置方法
［08/17］記事毎に指定したユーザータグを表示その2 (サイト外タグ検索)
［08/17］記事毎に指定したユーザータグを表示その1 (サイト内タグ検索)
［08/12］スクロールバー色分け用解説図
［06/29］ミニブログPIYOバナー(ボタン)製作
［06/21］ web拍手用バナー(ボタン)製作
［05/21］管理者用作業リンク
［05/18］スクロールバー設定タグ(後に「なんでもスクロール」で共有プラグイン登録)
［05/16］公式プラグイン「メールフォーム」を折りたたみにする方法
［04/15］空手衣・パンダアイコン製作
［04/10］きのこアイコン製作
［02/15］最上部移動と管理者用記事編集タグ
［01/19］新着記事にNEWマークを表示する

・掲載画像はクリックで拡大するものもあります。
・配布素材(アイコン・バナー)以外の画像、及び文章の複製・転載はご遠慮下さい。→詳細

【現在のページ】 HOME ≫ プラグイン ≫ スクロールバー設定タグ

2007/05/18(金)

スクロールバー設定タグ

最近の記事＆コメント、アーカイブ部分などに付けているスクロールバーのタグです。
※色分け用の解説等はこの記事の下のほうにあります。

【説明】
height:100px;　枠の高さ(数値はお好みで変更して下さい)
overflow:auto;
scrollbar-3dlight-color:#ffffff;　3D部分
scrollbar-arrow-color:#cccccc;　矢印
scrollbar-darkshadow-color:#ffffff;　影1
scrollbar-face-color:#ffffff;　表面
scrollbar-highlight-color:#cccccc;　反射
scrollbar-shadow-color:#cccccc;　影2
scrollbar-track-color:#ffffff;　下地

タグはこちらから↓

◆白背景用(共有に登録したものはこちらです)

<div style="height:100px;
overflow:auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#ffffff;">

※スクロールさせる文字やプラグインのHTMLをここに

</div>

◆黒背景の場合はこんな感じでいかがでしょう。

<div style="height:100px;
overflow:auto;
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#000000;">

※スクロールさせる文字やプラグインのHTMLをここに

</div>

色を指定して飾ればお洒落になります。(winのみ適用)
と言いつつ、私のは矢印部分(▼と▲)のみ、
scrollbar-arrow-color:#9966cc;
としてあるだけですが…(汗)

scrollbar-3dlight-color (3D部分)
scrollbar-darkshadow-color (影1)
scrollbar-face-color (表面)
scrollbar-track-color (下地)
この4つを背景色と同じ色を指定してあげるだけでも枠と矢印だけが残る形となり、馴染むと思います。

※お使いのテンプレートによっては横スクロールが出てしまう場合があります。
その際は、

<div style="height:100px;
width:100px;
overflow:auto;
scrollbar-3dlight-color:#ffffff;

～

</div>

※赤文字のタグを追加し、「100」部分の数値を横スクロールが出なくなるよう、色々と変えてみて下さい。

■色分け用解説図
■WEB色見本原色大辞典様の色見本を参考にすると分かりやすいです。

【追記】
2007/08/01
共有プラグインにて承認されました。
管理画面→共有プラグイン追加 →プラグイン名「なんでもスクロール」で検索して下さい。
プレビュー画面では崩れて表示されてしまうことがあります。
実際に設置し、スクロールさせるものを入れてみて下さい。
ちゃんと表示されます(*´ω｀)

| | ブログ | カスタマイズ | プラグイン | TB(1) | CM(13)

≪イントラレーシック･1ケ月後 | HOME | MG100体目公開≫

[No.1496] 凄いですー！

おおおお！！タグを教えてくれて有難うございます。
いつもブログを見ていて素敵なスクロールバーだなって思っていたのですがこんなに細かく設定していたんですね。
スクロールバーを自分で色々設定するのが苦手なのでつい便利な物に頼ってしまいます

これなんかも便利かも知れませんです。
http://www.koikikukan.com/archives/2005/05/11-235859.php
特に１．CSSでスクロールバーを表示する方法が便利です。

いつも参考にしてます。これからも色々教えてくださいね。

[ 2007/05/22(火) 14:00 ] ◆-[ 編集/削除 ]

[No.1498] >>空さん

これは横幅の指定をせず縦指定のみなので、左右カラムの長さを合わせたい場合に便利だと思います。
(ただ単に横幅指定を取っ払っただけなんですが(滝汗))
枠指定も無いので、プラグイン内の横幅をめいっぱい使えるのではないかと♪

しかし、他ブラウザで見ていないのでどうなっていることやら(汗)
心配です(；´Д｀)

[ 2007/05/22(火) 21:23 ] ◆KVRhAO0s[ 編集/削除 ]

[No.1835]

出来ましたーーーー
枠の高さだけ変えました
あとは、、、怖かったんでいじくってません。。。

色々教えてもらえて
本当に助かってます
ありがとうございます

[ 2007/07/08(日) 14:51 ] ◆-[ 編集/削除 ]

[No.1845] >>みくさん

▼と▲部分だけでも
http://www.colordic.org/
こちらのサイト様で好きな色を選んで指定するのも、ちょっとしたワンポイントになっていいかもしれませんよ♪

すぐに戻せますので、是非試してみて下さいね！

[ 2007/07/09(月) 10:47 ] ◆KVRhAO0s[ 編集/削除 ]

[No.1850]

ブログの色に合わせてあずき色（？）にすると統一されるかもしれないですね
見てみます

[ 2007/07/09(月) 21:09 ] ◆-[ 編集/削除 ]

[No.1860]

メールの通りにこちらの記事にもトラックバックさせてもらいました

やり方合ってたみたいで
無事に送れてよかったです
なんせ初ですから・・・・（汗）

これからは、こういうのも活用していかないとと思いました
今更かな。。。

[ 2007/07/11(水) 00:51 ] ◆-[ 編集/削除 ]

[No.1866] >>みくさん

色が合って可愛くなりましたね♪
プラグインのHTMLはプレビュー出来るので、他の部分も確認しながら色変えすることが出来ます。

こちらにもトラバ有難う御座いましたm(__)m

[ 2007/07/11(水) 11:44 ] ◆KVRhAO0s[ 編集/削除 ]

[No.2385] 神秘的　癒し大好きな人へ

はじめまして。
ブログを始めてまだ間もない初心者です
スクロールの設定　ありがとうございます。
自分なりの素敵なサイトにしようと
悪戦苦闘中ですが、こんなにも解りやすく
説明していただけて心強いです。。
これからも、度々勉強に伺います。。。

[ 2007/10/17(水) 20:24 ] ◆-[ 編集/削除 ]

[No.2390] ▼mayumayuさん

DL有難うございます♪
色分け用解説図が思いのほか大きく出来上がったので、とっても分かりやすいと思いますw
好みの色で設定して頂いて、素敵なブログにして下さいね(*´ω｀)

[ 2007/10/19(金) 12:40 ] ◆KVRhAO0s[ 編集/削除 ]

[No.2408] こんいちは

素敵なスクロールバーダウンロードさせていただきました。
カテゴリーをスクロールバーにいれることは可能ですか？？

カテゴリー(共有プラグインのもの)のＨＴＭＬを所定の場所に
貼り付けたのですがうまく行きません・・

[ 2007/11/02(金) 18:42 ] ◆2Qwf./yA[ 編集/削除 ]

[No.2409] ▼柴こてつさん

私のはFC2ブログのテンプレート工房さんが配布されているツリーカテゴリーですが試してみたところ出来ました。

<div style="height:100px;
overflow:auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#ffffff;">

<div class="tree" id="CA" style="line-height:1.2;"><ul>
<li>

～

} }
document.getElementById('CA').innerHTML=I;
--></script>

</div>

こんな感じです。

他の方が配布されているものも大丈夫だと思いますよ♪

[ 2007/11/02(金) 20:40 ] ◆KVRhAO0s[ 編集/削除 ]

[No.2520]

みんなのプロフィールは、アクセスアップをお手伝いするサイトです。
http://blog.livedoor.jp/mipurofi/

より多くのひとに貴方のブログを見てもらえます。

[ 2007/12/03(月) 14:39 ] ◆-[ 編集/削除 ]

[No.2521] ▼みんなのプロフィールさん

サイトがありません…(^_^;)

[ 2007/12/03(月) 14:52 ] ◆KVRhAO0s[ 編集/削除 ]

コメントの投稿

・半角の「”」と、5回以上連続での「-」入力は書き込み出来ません。
・メールアドレスなどの個人情報は載せないで下さい。

▼名前

▼タイトル

▼サイト名
▼URL

▼コメント

▼パスワード(任意)
記入すると、名前の後のトリップ付けと送信後のコメント編集・削除が出来ます。
「トリップ」とは名前横に表示される文字の事です。
好きな文字(パス)を入力する事で、暗号化された文字列を表示します。
これは入力したパス毎に異なる為、書込み者の本人確認やなりすまし防止として利用出来ます。

▼鍵コメントの場合はチェックを入れて下さい。
管理者にだけ表示を許可する

トラックバック

この記事へのトラックバックURL（内容確認後の表示とさせて頂いております。)
http://tanpoko.blog70.fc2.com/tb.php/376-6cea54e7

ブログカスタマイズ

みなさんお気づきですかーーーー？私のブログが大幅に変わったことに！！！さて、数日前と何が変わったか。。。。

[ 2007/07/11(水) 00:45 ] 不真面目に母。。。マジメに女。。。

≪イントラレーシック･1ケ月後 | HOME | MG100体目公開≫

閲覧頁数

容量１GB・無料 FC2BLOG

自己紹介

千葉県千葉市若葉区内で、
剛柔流空手道秀礼館
として活動しております。
見学・御質問等、お気軽にどうぞ。
曜日・時間等の詳細はメールにてお問い合わせ下さい。

※旗は拳斗会の時のものです。

【書籍掲載】

JK Fan 空手道マガジン
2007年1月号

｢ようこそ JK Blog＆HP｣

【管理人】 chan (掲示板)

・あなたのことがもっと知りたい
・ 50の質問
・コトリスト
(↑プロフになるかも)
・物作り・収納・掃除に関してはオタク傾向。
・過去、バンドでG・Dr・Baを担当した事がある。
(Voをやりたかったが、シャウトがコブシと化してしまう演歌声なので却下される。)

【パパさん】
・副業が空手の先生で、改造しまくりなガンプラ＆ラジコン製作が趣味。
・過去、バンド経験有。
今でもたまにベースを弾いたりする。
・しかし、嫁もベース弾きなのは結婚するまで知らなかったらしい。
・ビール、芋焼酎、肉、寿司をこよなく愛する。
・不思議な寝言を言う。
・嫁を「ちゃん」と呼ぶ。
(ちなみに本名とは一文字も被ってない)

【娘】(高校1年生)
・ 165cmの細長い図体。
あと数cmで母に追い付く。
・携帯の待ち受けが弟
(親馬鹿では無く姉馬鹿)
・ミニーが好き。

【息子】(幼稚園年長)
・ 2006年7月末(3歳時)よりパパさん指導のもと、空手を習い始める。
・お気に入りの綿毛布としまじろうパペットが手放せない。
・彼の辞書には「人見知り」の文字は無い。
・姉にミッキー好きにさせられた。

【デカぬこ】(ぽち(♂))
・ 2005年6月生まれ(推定)
・犬みたいな性格の白黒ブチ柄ハンサム君。
・胸までのジャンプで抱っこを強要する。
・雑種なのにミンクのような毛並み。
・獣医さんに「うわ～長いねぇ～!!」と言われた巨体の持ち主。

お気に入り