コンパクトデジカメ画像で、日常&花&趣味など!ボチボチ弄ってまぁ~す♪

 ジャプラノート2

 コンパクトデジカメ画像で、日常&花&趣味など!
 ボチボチ弄ってまぁ~す♪

Google
 

Yahoo!検索


pc1
       いらっしゃいませ♪ 現在ジャプラノート2をご訪問の方は 名様ですぅ~♪    

<<08 12345678910111213141516171819202122232425262728293010>>
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:-- | スポンサー広告 | page top↑
スタイルシートⅡ♪

前回は、背景の変更について♪ちょこっと書きましたが。。。
背景画像の表示方法について、少々補足しますぅ~♪


背景画像のスクロール〔background-attachment:〕
background-attachment: fixed;背景画像はスクロールしない
background-attachment: scroll;背景画像はスクロールする
記述無しの場合背景画像はスクロールする

背景画像の繰り返し表示〔background-repeat:〕
background-repeat: no-repeat;背景画像を繰り返さない
background-repeat: repeat-x;背景画像を横に繰り返す
background-repeat: repeat-y;背景画像を縦に繰り返す
記述無しの場合背景画像を縦横に繰り返す

。。。っと言う事で♪

今回は、スクロールバーのカスタムについてですぅ~♪

まずは、この黒い背景の右横のスクロールバーをご覧下さいねぇ~♪
見慣れない色のスクロールバーが、付いているでしょ?(笑
これは、スタイルシートで!指定したものが表記されています!

普通♪特別に指定しない限り。。。
スクロールバーは、ブラウザの指定した物が表示されていますぅ~♪
でも♪折角、背景をカスタムしたのですから♪
それに合わせて♪スロールバーのカスタムも。。。
如何ですか?(笑

こんな感じになりますぅ~♪
この画像をリピートさせて使用しています♪
<div style="width:450px;height:100px;overflow:auto;border:2px double #999999;padding:10px;BACKGROUND-IMAGE:url(背景画像アドレス♪); scrollbar-face-color: #666699; scrollbar-shadow-color: #CCCCCC; scrollbar-darkshadow-color: #666666; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #CCCCCC; scrollbar-arrow-color: #000099;"><font style="font-size:15px; color:#00CCFF; line-height:160%;">この部分に、記事(文字&画像)を入れてね♪</font></div>



ブログの記事に、スタイルシートを書き込む場合は。。。
スタイルシートの記述部分の改行は、そのまま反映してしまいますので
注意して下さいね♪



七種類全部指定しなくても、素敵なものが出来ますよ~♪

ブログ全体のスクロールバーを一括して指定するには。。。
テンプレートのCSSを変更して下さいねぇ~♪
















2007/02/25 17:05 | Blogカスタム | トラックバック(0) | コメント(6) | page top↑
<<いらねぇ~♪ | ホーム | スタイルシート♪>>
コメント
ますたー。さ~ん こんばんは♪
あれこれ悩んでスタイルシートupしました。
ますたーさん。の「透かし」に憧れていたので 
と~っても嬉しいです~♪
何となく違うような気もしますが 
でも本人はすこぶる満足~♪
いつもありがとうございます。
またいつか使わせてごちそうさま~ 
じゃなくて いただきます でした…(汗)
2007/02/26 00:28URL | nom #-[ 編集] | page top↑
大変ご無沙汰しています 
挑戦してみたのですが スロールバーが出来ません。何故? 
2007/02/26 12:29URL | こすもすです #-[ 編集] | page top↑
nomさん♪こんちゃぁ~っす♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

あれまっ!やっぱり♪
今回は、皆さんに悩んでいただこうと思いまして。。。(笑
ヒントとなるソースだけ♪。。。
ひょいっと!放り投げてみましたぁ~(笑
結果。。。
素敵な作品が、目白押しで!ほんと、嬉しいですぅ~☆彡
CSSとHTMLの違いが、少しだけ解って頂けたら♪
これからテンプレートやHPを弄っていくうえで。。。
少しは、お役に立つかと思いますぅ~♪
まだまだ!色々な表現方法をアレンジできると思いますので
センスの抜群な!nomさんにも♪
期待してますよ~♪(笑
2007/02/26 16:47URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
こすもすさん♪ こんちゃぁ~っす♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

スクロールバーを表示させるには。。。
背景画像の高さ以上の文字部分がないと♪
表示されません!
そこで!簡単にスクロールバーを出したい時は。。。
スクロールバーが出るまで!改行をしてくださいねぇ~♪(笑
2007/02/26 17:05URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
033]ますたーさん たった今やって見ました 出来ました 有難うv-238[/色]
2007/02/27 15:45URL | こすもすです #-[ 編集] | page top↑
こすもすさん♪ おこんばんわぁ~♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

ハイハイッ♪
バッチリ♪スクロールしてましたよ~☆彡
色々とアレンジして、使ってみてくださいねぇ~♪
2007/02/28 00:01URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
コメントの投稿












管理者にだけ表示を許可する(内緒話にはチェックを入れてね♪)

トラックバック
トラックバックURL
http://japra.blog34.fc2.com/tb.php/467-e188509b
この記事にトラックバックする(FC2ブログユーザー)
ホーム

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