ココログをスタイルシートだけでクールなデザインにする方法 その2 - ヘッダ

ブログのソースコードの取得

ココログがどんなソースを吐いているか知るためにも重要です。というか、ソースコードなしでは何もできません。

トップページを表示させて、マウスの右クリック「ソースコードの表示(ブラウザによって表記が違います)」させます。
これをテキストエディタにコピーして、大事に持っていてください。

ヘッダの編集

さて、ここから実際に手を動かして作っていきます。

まず、ソースコードを見てください。

あ、すみません。サイトの全体を設定するところがありました。

<div id="container">

ぽこログでは、薄いグレーの上に白い紙が乗っているイメージにしているために、背景色を薄いグレーにしています。また、サイトの幅を指定します。960pxにしていますが、今ならもう少し広くしてもいいです。
ここまでのスタイルシートは、

body{
  background-color: #f1f1ed;
}
#container{
  width: 960px;
  background-color: #f1f1ed;
  border-width: 0px;
}

ヘッダを指定しているところをソースコードで見ます。

<div id="banner">

#bannerでスタイルシートを編集すればいいことがわかります。

#banner{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  color: #ffffff;
  letter-spacing: .2em;
  background-image: url("http://pocolog.cocolog-nifty.com/images/header.gif");
  background-repeat: no-repeat;
  height: 172px;
  padding: 0px;
  margin: 0px;
}

Macで最適なフォントが何かわからなかったので、とりあえずOsakaを指定してあります。

これでヘッダ画像の設定は終わりました。
次はタイトルを編集します。

<div id="banner">

<h1><a href="http://pocolog.cocolog-nifty.com/mt/" accesskey="1">ぽこログ</a></h1>
<h2>情報のスタック場所 - 音楽・海外旅行・車・オーディオ・英語・デジモノ・コンピュータ・書籍・クレジットカード</h2>
</div>

<h1>と<h2>を指定します。

#banner h1,#banner h2{
    margin-left: 48px;
}
#banner h1{
  padding-top: 80px;
}
#banner h1 a{
  color: #ffffff;
}
#banner h1 a:hover,#banner h1 a:active{
  color: #f65300;
}
a{
  text-decoration: none;
}

タイトル色は白(#ffffff)、タイトルをホバーした時の色は赤(#653000)です。
リンクに下線がつくのはカッコ悪いので、<a>で、「text-decoration: none」を指定しています。

ヘッダの設定はこれで終わりです。