今回はヘッダー部分をCSSでカスタマイズしてみます。_s(underscores)のヘッダー部分のidやclassの構造はこのようになっています。

こちらを参考にCSSにてコーディングしていきましょう。

以前からの変更

以前こちらで、レスポンシブ化を行いました。

その際に書いたCSSコードから少し変更になっている部分がありますのでお知らせします。（新しいコードをこちらに示しておきます。参考にしてください）

/*
Theme Name: Olein
Layout: Content-Sidebar
*/

.site-header {
	width: 100%;
}
.content-area {
	width: 100%;
}
.site-main {
	padding: 0 1rem;
}
.site-content .widget-area {
	width: 100%;
}
.site-footer {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.content-area {

	}
	.site-main {

	}
	.site-content .widget-area {

	}
	.site-footer {

	}
}

@media screen and (min-width: 1080px) {
	.main-navigation {
		width: 1060px;
		margin: 0 auto;
		float: none;
		overflow: hidden;
	}
	.site-content {
		width: 1060px;
		margin: 0 auto;
	}
	.content-area {
		float: left;
		width: 680px;
		@include pie-clearfix;
		background: #d3ffd3;
	}
	.site-main {
		padding: 0 20px;
	}
	.site-content .widget-area {
		float: right;
		padding: 0 40px;
		width: 380px;
		background: #d5f4ff;
	}
	.site-footer {
		clear: both;
		background: #ffe7eb;
	}
	.site-info {
		width: 1060px;
		margin: 0 auto;
	}
}

ヘッダー部分のCSS

ヘッダー部分のカスタマイズのために書いたコードを説明してきます。ちなみに今回はヘッダー部分といってもナビゲーション部分はカスタマイズしていません。そちらは別途説明していくことになると思います。

では、style.cssに記述していきます。参考までに僕は8.0 Clearingの次に項目を設けて加筆しています。

.site-branding {
  padding: 6rem;
  text-align: center;
  background: #e9ce37;
}
.site-branding a {
  text-decoration: none;
  color: #fff;
}

.site-branding部分はサイト名と詳細部分を含んでいるエリアとなります。そちらのパディング、テキストのセンタリング、背景色を指定しています。

.site-title {
  font-weight: bold;
  font-size: 40px;
  text-transform: uppercase;
  line-height: normal;
  padding-bottom: 1rem;
}

.site-titleはサイト名をh1タグで示している部分になります。こちらには、フォントの太さ、サイズなどを指定しています。

.site-description {
  font-weight: normal;
  font-size: 20px;
  color: #fff;
}

.site-descriptionはサイトの詳細説明を出力してくれる部分です。こちらもフォントの太さ、サイズ、色などを指定しています。

結果的に、このような表示になります。

この方法以外にも、自分で要素を追加してCSSで指定してあげれば自分の好きなデザインにカスタマイズすることが可能となります。