前回はレイアウトをこのような形にもってきました。
あとは色の変更にチャレンジしてみたいと思います。
基本的にこのムジログと同じような色の変更をしていきたいと思います。
変える場所の洗い出しを行います。
- 日付部分は背景色無しでグレーの下線にしてみる
- リンクカラーをムジログと同じ色にする
- ヘッダーの背景の色は白にしてタイトルの文字などは黒にする
この3点を順を追ってやっていきたいと思います。
日付部分は背景色無しでグレーの下線にしてみる
まず、HTMLソースを確認してどういうスタイルシートの設定がしてあるか確認します。
ちなみに私の場合はこのような場所を見つけ出すときはその日付部分や前後をドラッグアンドドロップしてFirefoxの右クリック→「選択した部分のソースを表示」を使って、効率的にいじるべき場所を探しています。
<p class="date">2008年6月20日</p>
シンプルでしたので、classがdateで指定しているので「date」でスタイルシート内を探します。
/* ブログ記事日付 */
.date {
margin: 8px 0;
}/* ブログ記事日付・各タイトル */
.date,
.trackbacks-header,
.comments-header,
.comments-open-header,
.search-header {
padding-left: 8px;
color: #fff;
background: #8fabbe;
font-size: 83.3%;
font-weight: bold;
line-height: 2.0;
}
dateで定義されているのはこの2点ですが、1点目はとりあえず置いておいて、dateと同じデザインを適用しているトラックバックやコメントのヘッダーなども同じようなデザイン処理をされていることがわかりました。
でもシンプルなデザインにすること、ということなので、これらも思いっきりまとめて変えてしまえ～、ということで変えていきます。
padding-left: 8px;
これは背景色がある場合に左側余白をとるということですので、今回背景色を無くすことで微妙な位置で文字が始まります。これを
padding-left: 0px;
と変更します。というか削除だけでいい、というのはここだけの話です(笑)。
次に
color: #fff;
テキストカラーが白になってます。背景色が白になると見えなくなってしまいますので、黒にします。
黒といっても#000000だと本当に黒なので、少しやさしめの黒（というかグレー）#666666にします。
color: #666666;
そしてつぎに独特な緑色の背景
background: #8fabbe;
を変更します。これも背景色を白にするだけなので、削除だけでもいいです。
font-size: 83.3%;
これは好みの問題ですが、日付を小さくされたい方はここの数値のままかこれより小さくしましょう。
僕はあまりフォントサイズ変えたくないので、これも削除。
最後に日付の下に下線を引きます。
border-bottom: solid 1px #666666;
dateの中にこれを書くことにより下側に1pxの濃いグレーの線を引きます。
という考え方で、修正した結果こんな感じにしました。
/* ブログ記事日付 */
.date {
margin: 8px 0;
}/* ブログ記事日付・各タイトル */
.date,
.trackbacks-header,
.comments-header,
.comments-open-header,
.search-header {
color: #666666;
font-weight: bold;
line-height: 2.0;
border-bottom: solid 1px #666666;
}
リンクカラーをムジログと同じ色にする
これは好みの領域になると思いますので、それぞれの好きな色でリンクカラーを設定すればいいと思います。（考えるのが面倒だったからムジログのをそのまま使おうとｗ）
ムジログのリンクカラーはこんな感じです。
/* リンク */
a,
a:link,
a:visited {
color: #1D3994;
text-decoration: underline;
}
a:hover {
color: #1D3994;
text-decoration: underline;
background: #F0F0F0;
}
a:active {}
基本的にリンクにはリンクとわかるように下線を入れています。また色はちょっと濃いめの渋い青色である#1D3994を採用しています。
マウスオーバー（hover）時には少しリンクとわかるよう背景色を薄く発色するような動きとして装飾しています。
上記の設定をすでに設定されている部分に上書きして反映させます。
（このカスタマイズでやっている方はすぐにわかると思います）
ヘッダーの背景の色は白にしてタイトルの文字などは黒にする
ヘッダー部分のソースを眺めてみます。
<div id="header">
<h1 id="blog-name"><a href="http://mtosasp.geo.jp/" accesskey="1">アフィリエイトブロガーズネットワーク：ABN</a></h1>
<p class="blog-description">アフィリエイトブロガーズネットワークはアフィリエイトを清く正しく行うブロガーのためのプラットフォームです。</p>
ヘッダー部分のスタイルシートがどうなっているか見てみます。
/* ヘッダ */
#header {
padding: 15px;
border-bottom: 1px solid #669;
color: #999;
background: #8fabbe;
text-align: left;
}#header a,
#header a:link,
#header a:visited {
color: #fff;
background: transparent;
font-size: 32px;
text-decoration: none;
}
#header a:hover {}
#header a:active {}/* タイトルバナー下の説明 */
.blog-description {
color: #fff;
background: transparent;
font-size: 12px;
}
やりたいことはヘッダーの背景色を白にする。必然的に白色の文字は黒くする必要があります。
「background: #8fabbe;」が微妙なグリーン色の発色になっていることもわかります。
ということで、色を打ち変えていきます。
ついでに、ヘッダーの下に1pxの線「border-bottom: 1px solid #669;」が定義されていますので、これも削除します。
それも削除しちゃいました。
で、下記のように再設定。
/* ヘッダ */
#header {
padding: 15px;
color: #999;
background: #FFFFFF;
text-align: left;
}#header a,
#header a:link,
#header a:visited {
color: #666666;
background: transparent;
font-size: 32px;
text-decoration: none;
}
#header a:hover {}
#header a:active {}/* タイトルバナー下の説明 */
.blog-description {
color: #666666;
background: transparent;
font-size: 12px;
}
これで満足できる絵になったと思ってプレビュー確認。
なんか、違和感あるなー、と思ったら本文部分の右、下、左に線が入っています。
邪魔なんで、これも削除していきます。
border-bottom: 1px solid #669;
border-left: 1px solid #669;
border-right: 1px solid #669;
これがその正体なのでガツっと削除。
とおもったら、フッターの緑色のところもなおって無かったので、ヘッダー部分と同様の処理で、変更。
これでとりあえず完成！
コメント