だーしゃのCSS講座
第4回 ブログタイトルの色を変えてみよう！
こんにちは、前回はブログの構造につて説明をしました。
今回は
第１回にヘッダーの画像の変更をアップしたので今回はそのヘッダー画像の中にある、
「ブログタイトル」と「説明」こちらの色の変え方をレクチャーします。
■ブログタイトルの色の変え方。
まずこれが通常のブログタイトルです。
それからスタイルシート内で下記記述を見つけましょう～。
#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#fff;text-decoration:underline;}
↑これがブログタイトルの色を指定しているスタイルシートです。
その中の赤文字に注目！これが色を指定している部分ですね！
「#fff = 白」
なので今ブログタイトルが白い文字なんですよ。
なので赤文字部分を
「#FF8C00 ＝ オレンジ」
に変えてみましょう～↓
#banner a{color:#FF8C00;text-decoration:none;}
#banner a:link{color:#FF8C00;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#FF8C00;text-decoration:underline;}
↓
はい！白い文字から
沖縄からヨッシャー（＝＾＾）９
に変わりましたね！こういう風に色を変えていくんですよ～。
こちらはすべて同じ色にするのをオススメします。
そうしないとリンクの色とマウスオーバーした時の色などで変わってしまいますからね。
さて色はカラーコード表を参考にしてください。
■参照：
カラコード表
上記のような要領で基本的に文字の色を変えたい時は
「color:#~~~~~;」 の部分を変えればOKです！
これでどこの文字の色も変える事ができますね！
さて、次回はこのブログタイトルの表示位置の変更の仕方をやります～！
それではまた次回！
だーしゃのCSS講座
▼CSS講座
2006-04-11 だーしゃのCSS講座 写真に自動で白縁をつけたい！
2005-12-29 だーしゃのCSS講座 引用文に色を付けてみよう！
2005-09-02 だーしゃのCSS講座 線のカスタマイズしよう！
2005-07-28 だーしゃのCSS講座 背景画像及び背景色を変更してみよう！
2005-07-21 だーしゃのCSS講座 ブログタイトルの位置を変更してみよう！
2005-07-18 だーしゃのCSS講座 ブログタイトルの色を変えてみよう！
2005-07-17 だーしゃのＣＳＳ講座 ブログの構造を理解してみよう！
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく！
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう！
ありがとうございます～～
さっそくやってみました♪
本当にわかりやすいし、
楽しいし、で感謝感激です＾＾
お気に入りの写真をとったら、
自分だけの画像にも挑戦してみま～す！
だーしゃさん、
先生になった方がいいと思う(笑)
私、聞かれても説明下手だから
こんなにわかりやすく出来ないと思う。
カッコいいw
こんにちは！
私もさっそく色変えてみました！（もともとの緑から濃紺へ）
ほっんといつもわかりやすい説明をありがとうございます。ペコリ
こんにちは！はじめまして♪
以前から知ってるふりして（誰に？(^▽^;)
オリジナルデザイン登録見てたんですが、、
勉強したことないんで見てもわかるはずがなく（笑）
できたことと言えば、続きを読むを変えたくらいでした。。
それが私もタイトルの色を早速変えてみました!!
色でまだ少し悩んでるんですが、自分で変えれた喜びで
今は満足してます(^-^)
わかりやすい講座・解説（開設）ありがとうございます。
少しづつ頑張ってみようと思います♪
■なっちゃんさんへ
こんばんは～！
みなさんのお役に立てればうれしい限りですよ～。
それだけでやってますから（＾＾）！
でもせんせは難しそうですね。。
でもおもしろいかもですね～
■sunさんへ
こんばんはぁ～！色変わってましたね！
ほんと色々とデザイン変えれるようになるとおもしろいですよ～。
次も作らないといけないですね！
がんばろう～！！
■shiorinさんへ
こんにちは！はじめまして！コメントありがとうございます～
スタイルシートやデザインを触れるようになるとなんだか楽しいですよね！
タイトルの色とかほんとイメージ違ってきますからね～。
是非色々とためしてみてください！
僕も色々と講座開いてみましょうね～！
だーしゃさん、こんにちは～（●＾o＾●）
カラーコード表うれしいっ！！
ほとんどHP作成に関して分かってないのですが
楽しそ～なので私も挑戦しようとしましたぁ♪
がっ！！
ごめんなさいっ
最初からつまづきました。
え～っとスタイルシートってどこにあるんでしょうか？？
こんなんでごめんなさいっ（（（（（（；＿ ＿）ノ
教えて下さい～
■ハイジさんへ
こんばんは！コメントありがとうございます～（＾＾）！
ブログのデザイン楽しいですよ～是非やってみてくださいね～。
スタイルシートについては管理画面、テンプレートページのサイドバー、
オリジナルテンプレートにありますよ。
是非おためしあれ！（＾＾）！
だーしゃさんへ
見つけました～！！
最初は教えてもらったとこ見たけど似たような文字ばっかで
よく分からなかったからあきらめかけでしたが。。。(ーoー;)
いろいろ変えてみたけど、やっぱり元の色に近い
パウダーピンクにしてみました。
見ためはほとんど変わってないけど
やり方がわかったので嬉しいです。
ありがとうございますっ！！！（●＾o＾●）わーい♪
■ハイジさんへ
コメントありがとうございます。
できましたか~、やってみると簡単ですよね（＾＾）！
最初は難しいかもしれませんが、一つ一つやっていけばできますので是非ご活用ください。よろしくです。
だーしゃさんのCSS講座すごくわかりやすくて早速、活用
させていただきましたよ～！ありがとうございます。m(__)m
これからもドンドンお願いします。（笑）
ところで、自分で変更したテンプレートの保存機能って
あります？
■yorixさんへ
こんにちは～コメントありがとうございます～
活用していただいて何よりです。
そしてテンプレートの保存機能はないですよね～
ＣＳＳをテキストでパソコンに保存するしかないですよ～
こんにちは（＾＾）
タイトル部分の絵を変えたくてどうしたらいいものか・・と
友達に替えてもらったものの、自分でもいろいろいじりたくなり・・・
とりあえずタイトル文字の色変更ができて自信がついてきました（＾＾）
これからもすこしづつ改造したいとおもいます。
どうぞよろしく・・・
■aminoさんへ
こんにちは、コメントありがとうございます～
やっぱり自分でいじるのが一番楽しいですよね。
ゆっくりとですが、さほど難しくはないと思うので触って言ってみてくださいね～
どうぞ宜しくお願いします。
はじめまして！ｋｉｒａｒｉといいます!!
あのですね、私のブログが変なんです・・・。
文字の色が変わらないし、プログのデザイン設定で『写真』の画像を
選択すると、サイドバーのプロフィールとかが一番下の方にあるんです。
ゆいつ、ちゃんとプロフィールも上に出てくれるのが
３カラム シンプルなんです。
だから写真とかイラストとかの設定が出来なくて困っています・・・
そうすればいいんでしょうか…??
教えてください!!
■◇◆kirari◆◇さんへ
はじめましてこんにちは！
コメントありがとうございますっ
これはですね～。
ちょっとしらべてみたのですが、
「2005年09月06日：今日から・・・♪」という記事がちょっとおかしいですね～。
なので本文中の
このお店で、私が狙っているのは<span style="color:#ff0033">皮の時計</span>です<span style="color:#ff9900">．☆．。．:*・°
</span>
の後ろに</div>を入れてみてください。
そしたらなおるはず！
そしてスタイルシートでもう一度タイトル挑戦してみてくださいね～
こんばんみぃ☆kirariです!!
さっそく直してみました!!そしやら・・・スタイルシートが直りました!!
嬉しいです（≧▽≦）♪わざわざ調べてくれて、ありがとうございました!!
本当に嬉しいさァ～（≧▽≦）♪
さっそくデザインを『ハローウィン』に変えましたッ♪
また遊びにきます♪
はじめましてこんばんわ～
だーしゃさんのブログをみて、オリジナルの画像をタイトルに入れる事に挑戦しました・・・（４時間かかりました）写真とタイトルと説明分色を変えてみましたが、まだまだ納得が行かないのですが・・・明日は仕事なので今日はここまでとします。講座とても分かりやすくて感謝です。
追伸 ブログタイトルの説明文は改行できるのでしょうか？
はじめましてこんばんわ～
だーしゃさんのブログをみて、オリジナルの画像をタイトルに入れる事に挑戦しました・・・（４時間かかりました）写真とタイトルと説明分色を変えてみましたが、まだまだ納得が行かないのですが・・・明日は仕事なので今日はここまでとします。講座とても分かりやすくて感謝です。
追伸 ブログタイトルの説明文は改行できるのでしょうか？
■kakoさんへ
ご連絡おそくなりましたー。
ブログタイトルの件ですが、これは管理画面内ではできないんですよ。
ですが、オリジナルデザインで直接書くとできますよ。
ちょっとややこしいですが。。。。
始めまして～だーしゃさんｍ(＿ ＿)ｍ
密かに参考にさせていただきました
有難うゴザイマスｍ(＿ ＿)ｍ
又宜しくお願いします
月さん
ドンドンやってみてくださいねー。
こちらまだまだわかりにくいかもしれないので、
もっとわかりやすく説明してみます！
よろしくです！
始めまして☆
自分でやっていて、煮詰まった時にだーしゃさんのブログを発見！！
記事を読んで謎が解けて助かりました。
で、質問なんですが・・・
コメント（書き込み部分）の色のみを変えるにはどうしたらいいんでしょうか？
自分なりにやってみたら、サイドバーの文字色を変更するとコメントの文字色も一緒に変更してしまうんです・・・。
◎サイドバー・記事文中のリンク先の色を変更
◎プロフィール・カテゴリーの後の（）・・・などサイドバーの文字の色も変更
以上の変更をして、コメントの書き込み部分の色を元の黒のままにしたいんです・・・。
下手な文章でごめんなさい。
お忙しいとは思いますが、宜しくお願いしますm(__)m
たゆきさんへ
こんにちは！コメントありがとうございます！
是非色々と活用してくださいねー！
そしてサイドバーのクラスが問題なんですよー。
んーとサイドバーのクラスを見つけてみてくださいーー
よろしくです！
やってみます！
ありがとうございます☆
たゆきさんへ
まずは慣れですが、すぐにできるとおもいますよー。
サイドバーに紹介してある、firefoxも活用してみてください。
よろしくです！
参考になりました！
凄く感謝ですヽ('∀'*)ﾉ
琉球の島：BEL
はじめまして
昨年からブログを始めました。一年たって、いろいろな部分をカスタマイズしてみようと思っていたところ、こちらのブログを紹介していただきました。
とてもわかりやすい説明で早速タイトルの色を変えることが出来ましたが、フォントがどうしても変わりません。プレビューで見ると変わっているのですが・・・
よかったら教えていただけませんか。
■アフロきじむな～さんへ
トンでもないですよー、是非色々と活用してくださいー。
■辻徳さんへ
コメントありがとうございます。
そして色々と利用していただいて、ありがとうございます。
それからフォントの件ですが、こちらちょっとむずかしいんですよー
フォントと言うのは、パソコンに入っているものなので、
自分のパソコンに入っていても、他の人のパソコンにはいってないと
表示できないんです。
いかがでしょうか、恐らくこんな感じだとおもいますー
早速お返事有難うございます。
おそらくどのパソコンにも入っている「ＭＳＰ 明朝」というものです。実際プレビューでは見られるので、問題は無いはず・・・と思うのですが・・・
CSSをどこか間違って削除したり、変更してしまったかもしれません。
直しようがないということかもしれませんね。自業自得ということで、、、
もっと知識があったらいいのにと残念に思いますが、今後も参考にさせていただきます。
■ 辻徳さんへ
すみません、僕の認識がまちがっていたみたいです、
プレビューで見れているのに、実際では見れていないという現象は
確かにCSSに問題がある場合が多いです。
その際には設定しているスタイルシートの「font-family」か「textarea,select,input」の部分に入れ込む形になると思いますが、
いかがでしょうか。
すみません、僕自身もはっきりは分かりませんが、やってみてくだいです。
at 2008年03月28日 18:52
