【CSS初心者チャレンジ】第5回：ブログのタイトル編集

次はタイトル部分の編集ですね。

それでは、いつものようにCSS(スタイルシート)の使いかたを開いて早速、やってみましょう。

【ブログのタイトル編集】
◆ブログタイトルの背景色を変更するには

まずは背景色を変更するようですね。

/* ブログのタイトル部上 */ .headerLight { 　　　　background-image: url(); 　　　　background-repeat: ; 　　　　background-position: ; 　　　　background-color: #376599; }

変更前

.headerLightというのが、タイトル部分のセレクタ名なんですね。
｛｝内はどこかで見たことありますねぇ。そう、背景画像を編集した時とほぼ一緒ですね。margin: 0px;が無いのが唯一の違い。

ということで、Title部分にも画像が入れられるということが容易に予想できますね。

まずは、CSS(スタイルシート)の使いかたどおりにタイトル部分の背景色の変更から。

/* ブログのタイトル部上 */ .headerLight { 　　　　background-image: url(); 　　　　background-repeat: ; 　　　　background-position: ; 　　　　background-color: #66B7D8; }

変更後

では、[プレビュー]で確認した後、[保存]をクリックして確定。
そして、をクリックしてちゃんと設定が反映されているかを確認をします。設定が反映されてなければ更新をそれでもダメならCtrl+F5で強制更新（IEのみ有効）をしてみてください。

---

◆ブログタイトル下の色を変更するには

どんどん、行きましょう！
続いては、タイトル下の色の変更ですね。
えっと、CSS編集画面には

/* ブログタイトル部等の区切り線 */ .rule { 　　　　background-color: #ffffff; }

が「ブログのタイトル部上」の次に有りますが、これは「ブログのタイトル部下」の間にわずかに見えるラインの色を決定している様子。デザインによってはこの色を変更した方がバランスが良い場合もありそうですね。今回はスルーします。

/* ブログのタイトル部下 */ .headerDark { 　　　　background-image: url(); 　　　　background-repeat: ; 　　　　background-position: ; 　　　　background-color: #1b467b; }

変更前

こちらも、タイトル部と同じ設定項目ですのでちゃちゃっと変更しちゃいましょう。

/* ブログのタイトル部下 */ .headerDark { 　　　　background-image: url(); 　　　　background-repeat: ; 　　　　background-position: ; 　　　　background-color: #0099CC; }

変更後

---

このページの下にはタイトル文字のサイズと色の変更方法についても紹介されてますね。
変更する部分は、

/* ブログのタイトル */ .bTitle { 　　　　color: #ffffff; 　　　　font-size: 26px; 　　　　font-weight: bold; 　　　　 }

なるほど、色と大きさと装飾とフォント種類が変更できると。
boldと言うのは太字ですね。いろいろいじってみると楽しそうです。