人気ブログランキング | 話題のタグを見る
total・・・・・・・・・
yesterday・・
today・・・・・・・・
更新履歴&お知らせ
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

Top | 管理 | RSS | Log-out |
かたつむり


日記、おいしく作れた料理、ちょっとしたスキン編集、関ジャニ∞のことを載せているブログ。最近は子供のことも。
by ayamori メールはこちらへ

以前の記事
'12
1 2 3 4 5 6 7 8 9 10 11 12
'11
1 2 3 4 5 6 7 8 9 10 11 12
'10
1 2 3 4 5 6 7 8 9 10 11 12
'09
1 2 3 4 5 6 7 8 9 10 11 12
'08
1 2 3 4 5 6 7 8 9 10 11 12
'07
1 2 3 4 5 6 7 8 9 10 11 12
'06
1 2 3 4 5 6 7 8 9 10 11 12
'05
1 2 3 4 5 6 7 8 9 10 11 12
'04
12

Click for Tokyo, Japan Forecast

【QR code】
おいしいたのしい毎日のQRコード
Excite Blog
        
チビアヤ成長記録
最新のトラックバック
タグ
その他のジャンル
最新の記事
京都大阪2日目
at 2019-07-07 21:32
京都大阪旅行1日目
at 2019-07-06 23:04
ランチ
at 2019-07-05 14:02
5年生の宿泊合宿
at 2019-06-20 18:57
ヒヨドリ
at 2019-06-16 21:45
以前の記事
2019年 07月
2019年 06月
2019年 05月
2019年 04月
2019年 03月
2019年 02月
2019年 01月
2018年 12月
2018年 09月
2018年 05月
2018年 04月
2018年 02月
2017年 11月
2017年 10月
2017年 09月
2017年 08月
2017年 07月
2017年 03月
2017年 02月
2017年 01月
2016年 12月
2016年 11月
2016年 10月
2016年 06月
2016年 05月
2016年 04月
2016年 03月
2016年 02月
2016年 01月
2015年 12月
2015年 11月
2015年 10月
2015年 09月
2015年 08月
2015年 07月
2015年 06月
2015年 05月
2015年 04月
2015年 03月
2015年 02月
2015年 01月
2014年 12月
2014年 11月
2014年 10月
2014年 09月
2014年 08月
2014年 07月
2014年 06月
2014年 05月
2014年 04月
2014年 03月
2014年 02月
2014年 01月
2013年 12月
2013年 11月
2013年 10月
2013年 09月
2013年 08月
2013年 07月
2013年 06月
2013年 05月
2013年 04月
2013年 03月
2013年 02月
2013年 01月
2012年 12月
2012年 11月
2012年 09月
2012年 08月
2012年 07月
2012年 06月
2012年 04月
2012年 03月
2012年 02月
2012年 01月
2011年 11月
2011年 10月
2011年 09月
2011年 08月
2011年 07月
2011年 06月
2011年 05月
2011年 04月
2011年 03月
2011年 02月
2011年 01月
2010年 12月
2010年 11月
2010年 10月
2010年 09月
2010年 08月
2010年 07月
2010年 06月
2010年 05月
2010年 04月
2010年 03月
2010年 02月
2010年 01月
2009年 12月
2009年 11月
2009年 10月
2009年 09月
2009年 08月
2009年 07月
2009年 06月
2009年 05月
2009年 04月
2009年 03月
2009年 02月
2009年 01月
2008年 12月
2008年 11月
2008年 10月
2008年 09月
2008年 08月
2008年 07月
2008年 06月
2008年 05月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 10月
2007年 09月
2007年 08月
2007年 07月
2007年 06月
2007年 05月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 12月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 04月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月
2005年 03月
2005年 02月
2005年 01月
2004年 12月
2001年 11月
ファン
記事ランキング
ブログジャンル
画像一覧
リンク
tohaさんのHP trifles cafe

ホッツのHP alcoholiday



素材を使わせて頂いてます G.B.MATERIALS
ふわふわ。り
ORENGE BITTER CHOCOLATE
TINY BOUBBLES
Blues*y





スクロールバーの色変更、タイトルに画像、コメント欄の変更
最近、仕事が落ち着いてきたのでCSS(スタイルシート)の勉強を少しずつ始めています。
自分のブログをいじっていくうちに、少しずつですが仕組みが分かってきました。

【スクロールバーの色変更】
まず手始めに→のスクロールバーの色変更をこちらを参考にやってみました。
CSS編集の画面で、/* excite blog default skin html */の下に
以下を加えました。
/* スクロールバーの色変更 */
HTML,BODY{scrollbar-base-color:色指定;}
『色指定』にはカラーコードかカラーネームを指定します。
(例 カラーコード=#000000  カラーネーム=black)こちらこちらを参考にしました。

もっと細かく色指定する場合は、こんなカンジにするそうです。
HTML,BODY{
scrollbar-arrow-color:#808080; /*▲の色*/
scrollbar-base-color:#efefef; /*基本色*/
scrollbar-darkshadow-color:#808080; /*深い影の色*/
scrollbar-highlight-color:#fcfcfc; /*明るい部分の色*/
scrollbar-shadow-color:#c0c0c0; /*影の色*/
scrollbar-track-color:#fcfcfc;} /*トラックの色*/

#808080はgray、#efefefはこんな色、#fcfcfcはこんな色、#c0c0c0はSilver。『こんな色』の文字色が微妙に違うの分かりますか?ちょっと分かりづらいですね・・・すみません。

IE5.5以降で表示されます。

ちなみに/*と*/は、/*から*/まではコメントなので無効にしてねという命令(?)です。
色々変更や訂正をすると、何が何だか分からなくなっちゃいますよね?
『これってどういう意味だっけ?』と後で思わないようにするためにコメントをつけて
分かりやすくしているというわけです。
なので*/から/*までは入れなくても良いということでもあります。


【タイトルに画像を付け加える】
色々方法があるとは思いますが、私がネットで調べて一番いいなぁと思ったやり方です。
以下をCSS編集画面で付け加えてください。
body{
background : #FFFFFF;
background-image : URL('画像のURL') ;
background-repeat:no-repeat;
background-position:left top;}
backgroundの#FFFFFFは、背景の色を白にという意味。
background-imageは画像のURLを入れます。
(ex.background-image : URL('http://pds1.exblog.jp/pds/1/200503/02/48/tea8.jpg'))
画像はスキン編集の「マイイメージアカウント」に登録すると便利かな?
background-repeatはno-repeatにし、1回だけ表示し繰り返さないようにしてあります。
その他には、
repeat :縦横に背景画像を繰り返して表示します。これが初期値。
repeat-x :横方向にのみ背景画像を繰り返して表示します。
repeat-y  :縦方向にのみ背景画像を繰り返して表示します。

background-positionはleft topにすることによって、左上に指定しました。
その他には、

位置を表すキーワードで指定
left,center,rightや、top,center,bottomといった位置を表すキーワードで指定。
この指定方法はそれぞれ、0%、50%、100%と指定しているのと同じです。

%値で指定
背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、%で指定します。
(ex.background-position: 20% 40%; と指定した場合、表示される領域の左端から20%、上端から40%の位置が背景画像の表示開始位置。)

数値で指定
背景画像が表示される領域の左上からの距離を横方向と縦方向の順で数値にpxなどの単位をつけて指定。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化。
数値にはマイナスの値も指定することができます。


【コメント欄を縦に広くする方法】
CSSの編集画面で、一番最後で良いので
TEXTAREA.TXTFLD {HEIGHT : 10em}
を付け加えるだけです。簡単だ-!!
10emの10を20や5など、色々変えてご自分の好みの高さにしてみてください。

【コメント欄を横に広くする方法】
TEXTAREA.TXTFLD {HEIGHT : 10em;
WIDTH :500px ! important;}
太文字の部分を付け加えてください。
500pxの500は好きな数値にしてみてください。
importantをつけることによって、最優先事項になるんですってー。すごーい。

【コメント欄に画像をつける】
コメントボックスにstrawberryの画像が加わったの、みなさん分かりましたか??
これも簡単です。
TEXTAREA.TXTFLD {
background-image:url('画像のURL');
background-position:100% 100%;
background-attachment: fixed;
background-repeat:no-repeat;

HEIGHT : 10em;
WIDTH :500px ! important;}
太文字の部分を付け加えてください。
background-attachmentをfixedにすることによって、スクロールしても固定されるようになっています。
ちなみにスクロールに伴って、背景画像も移動させる場合は、fixedをscrollにしてください。

ちなみにエキサイトブログ内で参考にさせていただいたブログは
ようまてブログ
はい こちらサポセン。
めざせマイスキン

みなさんすごーっく詳しいです。私もこうなる日が来るかしら…。
by ayamori | by ayamori-yako | 2005-03-10 21:57 | Skin | Top↑
<< 病院→ららぽーと 2005年3月9日のお華 >>