文字色の変更 / カスタマイズ

ブログが作りたい!FC2ブログのカスタマイズ > 文字色の変更 / カスタマイズ

文字色の変更 / カスタマイズ

文字色の変更 / カスタマイズ

カスタマイズ(3)

今回は、文字の色を変更してみようと思います。記事「カスタマイズの基礎テクニック」の続きです。

▲ページの先頭に戻る

文字の色を変更してみる

記事「カスタマイズの基礎テクニック」で、<h1>タグの文字の色を変更する話をしましたが、ターゲットを探す手順の話だったので、途中で止めていました。

今回は、実際に試してみることにしましょう。変更しててみると、新たな発見や疑問などがあるかもしれませんよ。

1:テンプレート「air」

(01)

テンプレート「air」を、共有テンプレート追加からダウンロードして、適用させてみてください。

話を聞くだけより、やってみる方が身に付きます。

▲ページの先頭に戻る

2:文字の色を変更してみる

(02)

<h1>タグに関するCSSの指定は、次のようになっていました。

(03)

「color」を変えてあげれば、文字の色は変わるはずです。とりあえず、「黒色(#000)」にしてみることにしましょう。

(04)

ブラウザで表示してみましょう。しかーし、色が変わっていませんね。

ブラウザでタイトルを表示する

▲ページの先頭に戻る

3:改めて、文字の色を変更してみる

(05)

もう少し、CSSを眺めてみましょう。

あれれん・・・「h1」の指定の下に、「h1 a」の指定がありますよ。あーこれだ。

(06)

変更しましょう。

(07)

改めて、ブラウザで表示してみましょう。文字の色が黒色(#000)になりました。めでたし、めでたし。

ブラウザでタイトルを表示する

しかし、こうして試してみると、h1へcolorを指定する必要がないような感じがしますね。(継承されないわけだし)

▲ページの先頭に戻る

文字の色に #000は使わない?

背景色を白色(#fff)にしているWebサイトは、多いのではないでしょうか。白色は、清潔感もあって、重宝する色です。

その背景色を白色(#fff)にしている場合ですが、文字の色に黒色(#000)は、あまり使わないほうが良いようです。

理由は、明度差があり過ぎると、目が疲れやすいからだそうです。

ちなみに、当ブログ(ブログが作りたい!)は、#555にしてあります。一般的には、#333くらいにした方が良いようです。

明度差があり過ぎても、なさ過ぎても良くありません。読み手にやさしい色を設定しておくようにしましょう。

▲ページの先頭に戻る

次回予告

次回は、画像の回りに罫線などを設定してみようかと思います。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/05/23 更新日:2008/05/23

« 「カスタマイズ前の留意点」|「画像を罫線で飾る / カスタマイズ」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

たのしい

おはようございます^^
文字色を変更するとガラッと印象が変わりますよね。
ああ~なんか自分のブログもやりたくなってきたぞー
MTはしばらくかかりそうだし、ちょっと今のブログをいじってみようかな!
わくわく

kumacrowさんの講座に沿っていじってみるのもいいかも^^


背景色と文字色は、「読めなくもないけど目が疲れる」ってところの
見極めがちょっと難しかったりしますよね。
黒背景に赤とか黄色とか。
ひぃ。





明度差

ひろこさん、こんにちは。
コメントありがとうござる。(・∀・)

そうですねー、明度差の基準が数値化されていれば、
分かりやすいんだけどなぁ。

ここはちょっと柔らかいイメージにしたいので、
ぼやっとさせているけれど、読みにくい人もいるんかな。

人それぞれ好き好きもあるでしょううから、
明確に「こう!」とは言えないかもしれませんね。

やわらか

こんばんは!
やわらかい感じ出ていると思います。
コメントしやすいというか。でもそれはKumaCrowさんの文章がおもしろいのもあるかなあ。


背景と文字色のやつでこんなのみつけました。
http://report.s22.xrea.com/
Color Slider


薄いグレーの背景なんかは、真っ白背景よりも目は疲れないかもしれないですね。
でも白背景好きなんだよなー。


背景色

ひろこさん、こんばんは。

やわらかい感じ出ていますか!良かった。(´▽`)♪

コメントしやすい雰囲気をと思っているのですが、
でも、少ないんだなぁコメントしてくれる人。(´Д`;)

いろいろなブログにコメントを書いて回ってもいるのですが、
無視されることが多いんですよねー。orz

キモイとか思われているのかしら。やっぱし。
うーん、分からない。

お、おもしろいサイトですね。

背景色は、白色じゃない方がチカチカしなくていいらしいですね。
えぇ、薄いグレーとか、緑系も疲れないそうです。

小学校のときなんかに使っていた、
わら半紙みたいな色も落ち着いていて良いかも。(o゚ω゚o)

またすみません

おはようございます。日をまたいでしつこくすみません。
コメントは結構勇気がいるものだったりするのですが、一度書いてしまえば
kumaさんはおもしろく返してくれるのでそれが嬉しくて
また書き込みしたくなります。


自分なんかは、ビビリなのであまり自分から開拓していくタイプでは
ないから、見習いたいなあ。


kumaさんの記事を読んで、ブログカスタマイズやりたくなって
ちょっとやってみました。
でも、今の自分はあれで限界です。
講座楽しみにしてますね!

天才

ひろこさん、こんにちは。
コメントありがとうございます!

しつこくなんかないようぅ。(*´∀`)人(´∀`*) イエーイ
全然、すみませんではありません。

おぉう!ちょっとプレッシャー。
おもしろく返さなきゃ!(・ω・`;)(;´・ω・)どうしよふ

んー・・・ま、いっか。(・∀・)プー

ビビリなんだったっけ?
でも、「褒め殺し」とか必殺技いっぱいもってるよね。
「積極性」とか、「フットワーク」とか、もろもろ。

いいところがいっぱいあるから、
「ビビリ」くらいはオプションとして付いていないと、
世の中、割に合わないよ。

完璧な人間なんてのは、遠くから見ている分には良いけれど、
側にいたら息苦しいものだし。

カスタマイズしてみたんだ、へー・・・。
ぶふぉ!(;゚Д゚)マジッスカ

すごいよ。天才じゃなかろうか。
ちょっとで、こんなにも出来てしまうんだ!

ひろこさんの世界が、よく出ているよねー。
これは末恐ろしい存在だ。(o゚ω゚o)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/305-3f552969
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて