ライブドアブログをカスタマイズする-その3-ヘッダーをいじる

ヘッダーをいじります。

ライブドアブログではヘッダー部分をblog-titleという言い方をします。

htmlを見てみるとこんな感じ

<!-- ..... Title ..... -->
<div class="blog-title-outer" style="background:url(<$BlogHeaderImageUrl$>)
no-repeat;height:<$BlogHeaderImageHeight$>px;">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
<h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ">
<$BlogTitle ESCAPE$></a></h1>
<div class="blog-description-outer"><p id="blog-description"><$BlogDescription$></p></div>
</div>
</div>
</div>

どんだけdiv…ま、いっか。



まず、ブログの説明っているの？ってことで削除します。
そしてグローバルナビを配置します。

<div class="blog-title-outer">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
<h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1>
<ul id="gNav">
<li class="nav1"><a href="#">HOME</a></li>
<li class="nav2"><a href="#">menu1</a></li>
<li class="nav3"><a href="#">menu2</a></li>
<li class="nav4"><a href="#">menu3</a></li>
<li class="nav5"><a href="#">menu4</a></li>
</ul>
</div>
</div>
</div>

かんたんタイトル画像は今回は使わないので削除しました。
ちなみに削除しなくても問題ないです。

で、ブログの説明を消してその場所にグローバルナビを配置する為にul#gNavを書きました。

ちなみにライブドアブログはトップページ、個別記事、カテゴリー、アーカイブと4種類のhtmlをいじれるのですが、ヘッダーやフッターをいじるときは4種類とも書き直さなければいけません。

cssをいじります。
てコトでその部分のcss

h1#blog-title a {
	font-size: 170%;
	text-shadow: 2px 02px #9c9c9c;
}
h1#blog-title a:link
, h1#blog-title a:active
, h1#blog-title a:visited {
	color: #000;
	text-decoration: none;
}
h1#blog-title a:hover {
	color: #000;
	text-decoration: underline;
}
p#blog-description {
	color: #666;
}

まずはフォントの部分。

h1#blog-title a

が、ブログタイトル

p#blog-description

が、ブログの説明。

こうして見た。

#blog-title a {
font-size: 36px;
text-shadow: 1px 1px 0 #fff;
font-family: Impact;
font-weight: normal;
}


#blog-title a:link
, #blog-title a:active
, #blog-title a:visited {
	color: #444;
	text-decoration: none;
}

#blog-title a:hover {
	color: #444;
	text-decoration: underline;
}

タイトルはインパクトでちょっとロゴっぽく。
テキストシャドーで微妙に立体的に。これ結構使います。

/* =============================================== */
/** 03. Title - ブログタイトルエリア */
/* ----------------------------------------------- */

div.blog-title-outer {
	min-height: 122px;
	background: url(http://parts.blog.livedoor.jp/img/usr/blogmedia/2ch/gray/header.gif) repeat-x top;
	text-align: left;
}

div.blog-title-outer-2 {
	width: 996px;
	margin: 0 auto;
}

div.blog-title-outer-3 {
	padding: 20px 10px 15px;
}


h1#blog-title {
	font-size: 150%;
	font-weight: bold;
}

div.blog-description-outer {}

p#blog-description {
	margin: 0;
	padding: 4px 0 0 0;
	line-height: 135%;
}

ヘッダー部分がこんな感じ。

これを

/* =============================================== */
/** 03. Title - ブログタイトルエリア */
/* ----------------------------------------------- */

div.blog-title-outer {
width:100%;
border-top: #fff 1px solid;
}

div.blog-title-outer-2 {
width: 950px;
margin: 0 auto;
border-bottom: #fff 1px solid;
}

div.blog-title-outer-3 {
border-bottom: #ccc 1px solid;
}

#blog-title{
padding: 50px 0 30px;
width:400px;
float:left;
}

#gNav{
width: auto;
float: right;
padding: 60px 0 0;
margin: 0 0 0 auto;
list-style: none;
}

#gNav li{
width: auto;
float: left;
}

#gNav li a{
padding: 5px 7px;
display: block;
font-family: Impact;
font-size: 21px;
color: #808080;
text-shadow: 1px 1px 0 #fff;
}

#gNav li a:hover{
color: #444;
}

こんな感じ。


で、完成がこれ。