2006年04月05日

スクロールバーの作り方

今日は時間があったので、久々にサイトデザインをいじってみました。



と言っても、右サイドにある『新着記事』と『最近のコメント』の欄をスクロールバーで表示できるようにしただけなんですけどもね(^_^;


ご存知の方も多いかと思いますが、作成方法を紹介しておきます。


 続きの前にランキング村へ〜
     


↑このスクロールバーならば↓で簡単ですよ。

<div style="width: 190px; height: 80px;overflow: scroll;">ココにテキストなど</div>



width: 190px; 横幅
height: 80px; 縦幅



ミラのサイトの様にバーの色などを変えたいならば、↓

<div style="overflow: scroll;width:195px; height:130px;
border: 1px #CCCC99 solid;
scrollbar-base-color: #dcdcdc;
scrollbar-track-color: #CCCC99;
scrollbar-face-color: #CCCC99;
scrollbar-shadow-color: #008B8B;
scrollbar-darkshadow-color: #FFFFF0;
scrollbar-highlight-color: #008B8B;
scrollbar-3dlight-color: #008B8B;
scrollbar-arrow-color: gray;">ココにテキストなど挿入</div>

上のソースは、ミラのサイトで使っているもののコピペなので、フォントサイズが指定されてませんが、
"<div style="〜"内の『border: 1px』の前あたりに
font-size:11px』 などを追加すればフォントのサイズが指定できます。

例 <div style="overflow:scroll;width:195px;height:130px;font-size:11px;border: 1px #CCCC99 solid;
こんな感じで。




また、overflow の指定も、ここでは「scroll」になってますが、「auto 自動)」や「hidden(はみ出した部分を表示しない)」などもありますよ。(autoの方がいいかも)



border: 1px #CCCC99 solid;は、

・border: 1px(枠線の太さ)
・#CCCC99(カラー)
・solid(線のスタイル指定)
です。


▼線のスタイル▼
・solid:普通の実線
・dotted:点線
など。



あと、バーなどのカラー(scrollbar-)は、適当に自分でいじってみてください(^_^;


カラーのサンプルは→WEBカラーリファレンスでどうぞ。



あれれっ??なんかこの記事、分かりづらいですかね(^_^; アハハ…

時間があったなら、記事に力入れろ!って感じですよね(^_^; アハハ…

笑ってごまかします(笑)

 

ランキングポイントを貯めている大黒天です


アフィリランキング←アクセスUPの秘密はコレ
上に行けない(ToT)ランキング←どんなに下か、checkしてみてください

キーワードアドバイスツールプラスアクセスアップ・SEO対策・検索エンジン登録
006-005.gif楽しい裏技・裏情報! 006-005.gifアナタのブログを登録するだけで…
tama_01.gifコメントありがとうtama_01.gif   次項有相互リンクはこちらの記事に
ホームページの作り方講座ですね。
アフェリのページでこの企画は良いです。

私は、相互リンクのとことが気に入りました。
まねしたいですね。

もっと特集組んでくださいね。
Posted by きよこ&ごんた at 2006年04月05日 06:18
こんにちは〜
こういう作り方講座は嬉しいですね。
かめちきもきよこ&ごんたさんと同じで
相互リンクの欄はちょっと気になってました。
相互リンクも少し増えてきたのでマネして
みようかな〜なんて
時間があったら考えてみます。
それでは応援ぽちっと♪
Posted by かめちき at 2006年04月05日 16:20
●きよこ&ごんたさん
コメントありがとうございます。
相互リンクの所ですか♪
参考になれれば幸いです。
また遊びに来てくださいね♪

●かめちきさん
こんにちは〜
かめちきさんもそろそろ設けた方がいい時期かも…ですねw

時間のあるときに作ってみてくださいね★
Posted by ミラ> at 2006年04月05日 18:28
こんばんは。
凄い!!書くの大変だったんですよね(^o^)丿
お疲れ様でした。凄く役立つ!
丁寧に書かれた記事に今日も感動!!

応援ポチッと☆
Posted by 一週間のななおです。 at 2006年04月05日 23:03
どうも〜!コドチャです。

本日外泊中のため、ネカフェからの

コメントになってしまいました;−;

時間がないのでコピペでごめんなさい。

また遊びに来ますね〜

応援だ〜!
Posted by コドチャ at 2006年04月05日 23:55
●ななおさん
こんばんは〜
この記事、なかなか面倒でした〜w
書き終えて客観的に見るとなかなか見難いような(^_^;
温かいコメントに感謝です★

●コドチャさん
こんばんは〜
外泊先からわざわざ訪問&コメント、ありがとうございます♪
ミラも久々にネットカフェに漫画を読みに行きたいですw
Posted by ミラ> at 2006年04月06日 00:11
006-001.gifミラへコメントをどうぞ
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/16153089
※ブログオーナーが承認したトラックバックのみ表示されます。
本アフィリエイト初心者の為の一覧表
ASP(アフィリエイトサービスプロバイダ)一覧表
無料ブログ一覧・比較
フリーメール一覧表
ブログランキングサイト一覧表

無料アフィリエイトに使えるツール&情報記事
サイト作り
├【テキチェン
├【ai-Ticker&DownloadTimer】
├【似顔絵作成(プロフィール)
├【お気に入りに追加ボタン
├【LogoShader (ロゴ作成)
├【スクロールバー
├【POQUE(ポッケ)
└【テキストスクロール】コレ↓
マネしまSHOW
サイト運営
├【ACR WEB
├【動画アフィリエイト
├【アクセス解析
├【Click Track
├【メールフォーム
├【キーワードアドバイスツール
└【キーワード探しサイト


無料その他、便利ツール
├【Sleipnirブラウザ】
└【アフィリページ自動生成ツール

右斜め上ランキングサイト上昇術
其の1  其の2  其の3  其の4  其の5  其の6
JRANKがおいしいワケ
ランキングサイトの極み?
相互リンクについて
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。