ワードプレステーマTwentyElevenのヘッダータイトル周りの余計な余白部分を撤去していきましょう。

テーマTwentyシリーズの中でもElevenが軍を抜いて余白部分が多いですね…(汗　デフォルトですと、表示画面の半分以上がヘッダー部って…、って感じですよね(苦笑

当サイトは、ヘッダータイトルは非表示設定にしています。あまり余計なモノは表示したくなかったので、撤去して後はヘッダー画像に託しました。

サイト構成などによりヘッダータイトルを表示させている方、表示させたい方は参考までにどうぞ。

Elevenの多すぎるヘッダー周りの余白を撤去する

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの中から、次の部分を探して下さい。

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

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}
#branding img {
	height: auto;
	display: block;
	width: 100%;
}

コレを以下の様に追加/編集してみて下さい。

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

#branding {  /* サイト上部の灰色の線の撤去 */
	/* border-top: 2px solid #bbb; */
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#site-title {
	margin-right: 270px;
	padding: 0.7em 0 0 0;  /* タイトル周りの余白の撤去  */
}
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 0.2em 0;   /* キャッチフレーズ周りの余白の撤去 */
}
#branding img {
	height: auto;
	margin-bottom: -7px;　　/* ヘッダー画像周りの余白の撤去 */
	width: 100%;
}

これで、かなり余白部分がなくなりスッキリとしたハズです。なお、ヘッダー画像については、コチラが便利です。⇒初心者でも出来る!!オリジナルヘッダー画像作成

それとですね、ヘッダータイトルなんですが、恐らくもっと左に寄せたいって方も多いかと思います。出来なくはないのですが、チョッと面倒くさいんです。

サイト全体の表示’ストラクチャー’にて変更が可能です。しかし、コンテンツ全てが左に寄ってしまうので、あまり初心者の方にはオススメしません。

私も色々と試してみましたが、上記の表示が一番シックリくるのかな?と感じています。一番大切なのは’記事投稿’ですから、多少の事は目をつぶりましょう(笑

可能な限り出来ればいぃんじゃないかなぁと思います。どうしても納得いかない方は、もっと学習して’ストラクチャー’を含め全体の表示から変更してみて下さい。

訂正させて頂きます…(汗　詳細は、コチラのページにて…(エライすんません…

⇒ワードプレステーマTwentyElevenのサイトタイトル/キャッチフレーズを左に寄せる方法

WordPressデザインブック　ステップバイステップ形式でマスターできる