TwentyTen ヘッダータイトル周りの余白を削る方法

ワードプレステーマ、TwentyTenは、デフォルトのままでも十分にサイトとして活用出来ると思います。その中でいくつか気になった部分があるので、少しカスタマイズをしようと思います。

まずは、ヘッダータイトルが表示されているところ(サイトの一番)上の部分です。少し余白が多いと感じました。スタイルシートの以下の部分を書き換えると、余白がかなりスッキリとします♫ (小テーマを使用している方は、小テーマ側のスタイルシートを変更して下さい)

/* =Header
-------------------------------------------------------------- */

#header {
	padding: 30px 0 0 0;
}
#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 700px;
}
#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 15px 0 18px 0;
	width: 220px;
}

↓コレを、以下の様に書き換えます。

/* =Header ヘッダー部の設定
-------------------------------------------------------------- */

#header {
	padding: 10px 0 0 0;
}
#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 650px;
}
#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 20px 0 5px 0;
	width: 220px;
}

これでかなり上部(余白部分)がスッキリしたと思います。

WordPress 3.xデザイン&カスタマイズスタイルブック 複数ブログ管理からスマートフォンサイトまで、一歩進んだWordPressサイト構築術
WordPress 3.xデザイン&カスタマイズスタイルブック 複数ブログ管理からスマートフォンサイトまで、一歩進んだWordPressサイト構築術

 

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です