ブログパーツとゆかいな森の仲間たち ウェルカムアニメ

趣味で作ったテンプレートやブログパーツをマイペースに配布しています。

banner_rectangle.gif

2006年10月06日

べんりでカンタン(^^)スタイルシートTips(そのニ)

(その壱)が案外好評なので、そのニです。


〜 ふぁーすとすてっぷ 〜
【そのニ】 文字色を制す!



[1]スタイルシートを開く
(Seesaaの人は、「デザイン>スタイルシート>自分が使ってるスタイルシートの名前をクリック」で開きます。)

[2]「font-color」と書いてある場所を探す。
(何箇所かある人は、上から順番に試して、どこの文字色が変わるか目で見て確かめてみよう〜)

[3]以下のようにfont(文字)color(色)の後に続く「:」マークの後ろを、英語で好きな色に変えてみる
(例)
 font-color : white(白)
 font-color : red (赤)
 font-color : pink (ピンク)

これでOK!



〜応用〜
単純な色じゃなくて、もっと微妙な色が表現したいんじゃ!という人は、16進数という色の指定方法にチャレンジしてみよう!

(例)font-color : #666666 (グレー)
   font-color : #FF9999 (サーモンピンク)
   font-color : #990066 (ワインカラー)

自分の作りたい色が、どんな16進数になるかは、
「16進数 色」といったキーワードでネット検索してみると、
いろいろ便利なサイトがヒットするので、そういうサイトを参考にしてもいいし、
もし絵を書くソフトを持っているなら、ソフトによっては、
16進数を表示できるものもあるので、それを利用してもいいですね。


2006年10月02日

べんりでカンタン(^^)スタイルシートワンポイントアドバイス(その壱)

またまたイレギュラーですが、簡単にできるブログのカスタマイズ方法など。

ブログを公開している人は、誰もがクリエイター!エンターテイナー!ひゃっほう〜〜、ということで、
内容はもちろん、見せ方も自分の加減で、こだわって作れたらもっと楽しいですよね。
まぁ、何事も「いきなりすごいヤツにするぜっ!」と意気込むと壁にぶちあたって挫折しがちなので、ちょっとずついきましょう。


〜 ふぁーすとすてっぷ 〜
【その壱】 文字サイズを制す!



[1]スタイルシートを開く
(Seesaaの人は、「デザイン>スタイルシート>自分が使ってるスタイルシートの名前をクリック」で開きます。)

[2]まずは腕試しに文字の大きさを変えてみよう!
キミのスタイルシートの中に「font-size」って書いてある場所があるかな?
まずはそれを見つけてみよう。
1ヶ所だけの人はそこを、2ヶ所以上見つかった人は、好きなやつを(まずは上から順番に・・・とか)
こんな風に(▽)数字を好きな数字に変えてみよう!(半角数字でね!)

 「font-size : 12px ;」⇒「font-size : 16px ; 」(数字を大きくすれば文字も大きくなるよ!)

 (せつめい)
 font-sizeは、font(文字)のsize(大きさ)のこと。
 一般に、「px」「pt」「%」っていう3種類の設定方法があるんだけど、
 とにかく後に続く数字が大きければ文字も大きくなるし、
 小さければ小さくなるよ。数字は半角で入力してね(^^)

 (例)
 「font-size : 12px ;」⇒「font-size : 16px ; 」(結果-大きくなる)
 「font-size : 80% ; 」⇒「font-size : 120% ; 」(結果-大きくなる)

 「font-size : 25px ;」⇒「font-size : 14px ; 」(結果-小さくなる)
 「font-size : 110% ; 」⇒「font-size : 60% ; 」(結果-小さくなる)


タイトル文字を設定しているfont-sizeや、メニュー文字を設定しているfont-sizeなど、
わけているスタイルシートもあるから実際にやって目で確かめてみよう!

(☆カスタマイズは自己責任です。
 自信がない人は、最初の設定をメモ帳などに
 コピペしてバックアップをとったり工夫してくださいね〜)

ちなみに、「%」で大きさを設定すると、目が悪い人や老眼の人など、ブラウザの文字を大きくして読んでる人にも優しい表示になります。
「px」で設定すると、文字の大きさはかっちり決まっちゃうので、レイアウトの美しさを追及する人にはおすすめですが、文字を大きくして読みたいユーザーには、ちょっと厳しい結果になります。

使いこなしてきたら、たとえば、本文は%でゆる〜い設定、
デザインを優先したいメニュー部分は、pxできっちり指定、
なんていう使いわけもあなた次第です(^^)