_s(underscores)のヘッダー部分をCSSでカスタマイズする

  • ブックマーク
  • -
    コピー

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

underscores_header_frame

こちらを参考に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はサイトの詳細説明を出力してくれる部分です。こちらもフォントの太さ、サイズ、色などを指定しています。

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

customize-header-underscores

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

ホームページのお話しませんか?

気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?

  • ブックマーク
  • -
    コピー

この記事を書いた人

久野 晃司

岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Gifu WordPress Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。