2007年05月30日
②ブログタイトルの色をかえちみよう！
前回はヘッダー画像の変更方法やったなぁ
今回は、ブログタイトルの色をかえちみよう～
このヘッダーの場合でやってみるで
今のところ、ブログタイトルも説明文も「白」やな
コレを「オレンジ」にしてみせるけんな
まず、前回と同じように、
管理画面→デザイン→オリジナルデザインの登録 の順でクリック
わからない人は第一回の記事も参考にしてな
そして、スタイルシートの中で、下記記述を見つけちょくれ
#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;}
そしてデザインを登録すると・・・・・
ほーら、オレンジ色になったで～
もちろん、オレンジ色だけやなくていろんな色にできるで
以下のカラーコード表を参考にしてな。
■参照：カラーコード
このサイトでカラーコードを入れて「Click!」ボタンを押すと、背景の色が変わるけん
いろいろ試してみてな
基本的に文字の色を変えたい時は
「color:#~~~~~;」 の部分を変えればOK
これでどこの文字の色も変える事ができるで
ちなみに、ブログ説明文の色を変えたいときは、
さっきいじった部分より、もうちょっと下にあるで
.description{
color:#FF8C00;
font-size:12px;
padding:4px 0px 0px 35px;
text-align:left;
letter-spacing:2px;
ここを変えたら説明文の色もかわるけんな
ほーらね
ぜひいろいろ試してみちょくれ
わからんことはコメントから僕にきいてな
今回は、ブログタイトルの色をかえちみよう～
このヘッダーの場合でやってみるで
今のところ、ブログタイトルも説明文も「白」やな
コレを「オレンジ」にしてみせるけんな
まず、前回と同じように、
管理画面→デザイン→オリジナルデザインの登録 の順でクリック
わからない人は第一回の記事も参考にしてな
そして、スタイルシートの中で、下記記述を見つけちょくれ
#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;}
そしてデザインを登録すると・・・・・
ほーら、オレンジ色になったで～
もちろん、オレンジ色だけやなくていろんな色にできるで
以下のカラーコード表を参考にしてな。
■参照：カラーコード
このサイトでカラーコードを入れて「Click!」ボタンを押すと、背景の色が変わるけん
いろいろ試してみてな
基本的に文字の色を変えたい時は
「color:#~~~~~;」 の部分を変えればOK
これでどこの文字の色も変える事ができるで
ちなみに、ブログ説明文の色を変えたいときは、
さっきいじった部分より、もうちょっと下にあるで
.description{
color:#FF8C00;
font-size:12px;
padding:4px 0px 0px 35px;
text-align:left;
letter-spacing:2px;
ここを変えたら説明文の色もかわるけんな
ほーらね
ぜひいろいろ試してみちょくれ
わからんことはコメントから僕にきいてな
Posted by 太陽くん at 18:00│Comments(2)
│ブログデザインれっすん
この記事へのコメント
太陽くんにしつもんです。
コメントとかトラックバックの色をそれぞれかえるにはどうしたらいいんかな？？
トラックバックの色とコメントの色を違う色にしたいんやけど～
コメントとかトラックバックの色をそれぞれかえるにはどうしたらいいんかな？？
トラックバックの色とコメントの色を違う色にしたいんやけど～
Posted by 質問くん at 2007年05月31日 18:29
質問くん
質問ありがとー！
スタイルシートっていう枠のなかから以下の記述を探しちょくれ。
そして、僕のブログやったら、それぞれこの部分に対応しとるで＾＾
黄緑色の「この記事へのコメント」
.comments-head{
color:#bce53e;
font-size:12px;
font-weight:bold;
padding:0px 0px 0px 0px;
height:10px;
コメント本文
.comments-body{
color:#fff;
font-size:88%;
line-height:135%;
margin:16px auto 15px;
text-align:left;
width:530px;
}
「Posted by 質問くん at 2007年05月31日 18:29」
.comments-post{
color:#000;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
「http://taiyokun.junglekouen.com/t9801」
.trackback-url{
color:#691815;
font-size:12px;
font-weight:bold;
margin:20px 0px 15px 13px;
}
トラックバック本文
.trackback-body{
color:#691815;
font-size:12px;
line-height:135%;
margin:20px 0px 15px 13px;
}
トラックバック投稿者
.trackback-post{
color:#000;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
}
時々、
.comments-body{
font-size:88%;
line-height:135%;
margin:16px auto 15px;
text-align:left;
width:530px;
といった感じで色の指定する場所がない場合があるんよ！
その時は、 color:#fff; っていう記述を、
上記と同じようにつけたしてあげればOK！
またわからんことがあったらきいちょくれー！
質問ありがとー！
スタイルシートっていう枠のなかから以下の記述を探しちょくれ。
そして、僕のブログやったら、それぞれこの部分に対応しとるで＾＾
黄緑色の「この記事へのコメント」
.comments-head{
color:#bce53e;
font-size:12px;
font-weight:bold;
padding:0px 0px 0px 0px;
height:10px;
コメント本文
.comments-body{
color:#fff;
font-size:88%;
line-height:135%;
margin:16px auto 15px;
text-align:left;
width:530px;
}
「Posted by 質問くん at 2007年05月31日 18:29」
.comments-post{
color:#000;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
「http://taiyokun.junglekouen.com/t9801」
.trackback-url{
color:#691815;
font-size:12px;
font-weight:bold;
margin:20px 0px 15px 13px;
}
トラックバック本文
.trackback-body{
color:#691815;
font-size:12px;
line-height:135%;
margin:20px 0px 15px 13px;
}
トラックバック投稿者
.trackback-post{
color:#000;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
}
時々、
.comments-body{
font-size:88%;
line-height:135%;
margin:16px auto 15px;
text-align:left;
width:530px;
といった感じで色の指定する場所がない場合があるんよ！
その時は、 color:#fff; っていう記述を、
上記と同じようにつけたしてあげればOK！
またわからんことがあったらきいちょくれー！
Posted by 太陽くん at 2007年06月01日 16:51
