タイトル文字と概要の色や大きさを変える | アメブロを自分で素敵にデザインしちゃおう

アメブロを自分で素敵にデザインしちゃおう

アメブロ内においてのcssリファレンス(完全初心者向け)。

こんにちは^^


前回タイトル文字と概要を好きな位置に配置する という記事を書きましたが

おおーい その前に文字の色や大きさ変えたいんですがァ!

って思った人のほうが多いはずヽ(;´Д`)ノ 

そんな基本的なことすっかり忘れている私でした・・・・ごめんなさい。


ということで

今回はタイトル文字と概要の色や大きさを変えるです。


/* ---------- font : 文字サイズ・装飾---------- */

#header h1,
#header h1 a{
color:#000000;
font-size:25px;
font-weight:bold;
line-height:1.15;
}

#header h2{
color:#666666;
font-size:11px;
font-weight:normal;
line-height:1.15;
}


赤字の部分の#000000;などを変更します。

#header(ヘッダー)のh1(タイトル文字にあたる)のcolor(色)は#000000(黒)

という意味なんですが、色の番号がわからない人はカラーチャート 等で見るとよいです。

私はPhotoshopがいつも開いているからそれで好きな色を選択して数値を見るのですが

そんなことしてるのたぶん私だけです。(@^▽^@)ノ


あ、よく失敗するのが数値の後の;を消してしまうことです。

;がないと反映されません。

何に置いてもなんですが必ず;を忘れないようにしましょう^^


ちなみにh1(タイトル文字)を通常時、ポイント時で色を変えたい場合

以下の赤字の部分を付け加えます。

/* ---------- font : 文字サイズ・装飾---------- */

#header h1,
#header h1 a{
color:#000000;
font-size:25px;
font-weight:bold;
line-height:1.15;
}

# header h1 a:link{
color:#000000;
}

# header h1 a:visited{
color:#000000;
}

# header h1 a:hover{
color:#000000;
}

# header h1 a:active{
color:#000000;
}


#header h2{
color:#666666;
font-size:11px;
font-weight:normal;
line-height:1.15;
}


# header h1 a:link{ }は通常時(未アクセス)の色
# header h1 a:visited{ }はアクセス済みの色
# header h1 a:hover{ }はポインタが乗ってる時の色
# header h1 a:active{ }
アクティヴ時の色


色々変えてみて楽しんでください^^


次にタイトル文字の大きさを変更します。

概要の文字の大きさを変更します。

/* ---------- font : 文字サイズ・装飾---------- */

#header h1,
#header h1 a{
color:#000000;
font-size:25px;
font-weight:bold;
line-height:1.15;
}

#header h2{
color:#666666;
font-size:11px;
font-weight:normal;
line-height:1.15;
}


このfont-size部分が大きさを左右しているところです。

#header(ヘッダー)のh2(概要の文字)のfont(文字)のsize(サイズ)は11px(大きさ)

という指定をしているということです。

値を変更してサイズを変えてください^^



んあ。もっと基本的な背景をオリジナル画像に変えるをやってないじゃん・・・

次回は背景をオリジナル画像に変える です^^;