TwentySixteen カスタマイズ 5-2 サイト全体のデザイン設定、ヘッダー

TwentySixteen カスタマイズ 5 〜最低限度のデザイン改変を実施する「5-2 サイト全体のデザイン設定、ヘッダー」の巻です。前の記事デザイン改変 5-1 初期化、各種エレメントの続きです。

カスタマイズその5では最低限度のデザイン変更を行っています。見た目や好みの問題です。「その4」では長文をページ分割しましたが「その5」では記事を分けています。今回は5-2、サイト全体のデザイン設定、それとヘッダーを少し見ていきます。

5-2 サイト全体のデザイン設定、ヘッダー

まずはいきなり .site 絡みのpaddingです。

.content-area { /* headerのpaddingカット分*/
	padding-top: 48px;
}

.site { background: #bebebe;}
.site-inner {
	background: #fff;
	max-width: 1260px;
	overflow: hidden;
}

前回（その4）のカスタマイズでヘッダーメニューをウインドウ上部に貼り付けました。親styleではヘッダーの下にたっぷりマージンを取ってあったのですが貼り付けるのに邪魔で削りました。その分、コンテンツが上に迫ってきたので、その分のスペースを新たに設けたわけです。ほんとなら前回のヘッダーとセットであるべきでした。

カスタムロゴ

twentysixteenにはカスタムロゴというものがあります。カスタマイザーで登録するとヘッダーに現れます。最小限カスタムの時にheader.php内のロゴの位置をすでに変えています。

変える位置によって、ふたつの見せ方が出来ると書きました。ヘッダー画像の中に含ませるものと、メインメニューのバー内に含ませるものでした。

ヘッダー画像を格納しているボックス div.header-image 内にロゴを入れるとこんな感じです。

ロゴ本体はheader.php にあるこれです。

<?php twentysixteen_the_custom_logo(); ?>

カスタマイズしたヘッダーその1 — ヘッダー画像の入ったボックスにロゴを入れるとこんな感じ

cssは例えばこうなってます。div.header-image に position:relativeを指定しておくのを忘れずに。

div.header-image {
	position: relative;
}

img.custom-logo {
	position: absolute;
	bottom:0;
	top:0;
	left:20px;
	width: auto;
	margin:auto auto 0 0;
	height: 80%
}

上部に張り付くボックス.site-header-mainの中にロゴを入れるとこんな感じです。

cssはこうなっています。

img.custom-logo {
	position: absolute;
	bottom: auto;
	top: 0;
	left: 0;
	width: auto;
	margin: auto auto 0 0;
	height: 100%;
	max-height: 41px;
}

.site-title {
	padding-left:42px;
}

どっちもそれなりに面白いんではないでしょうか。サイトに応じて使い分けようかと思いまして、それでcssを並べて書いて、どちらかの時はどちらかをコメントアウトするようにするのはどうでしょう。

/* header-image 側 */
/*
img.custom-logo {
	position: absolute;
	bottom:0;
	top:0;
	left:20px;
	width: auto;
	margin:auto auto 0 0;
	height: 80%
}
*/

/* site-header-main 側 */

img.custom-logo {
	position: absolute;
	bottom: auto;
	top: 0;
	left: 0;
	width: auto;
	margin: auto auto 0 0;
	height: 100%;
	max-height: 41px;
}

.site-title {
	padding-left:42px;
}

ここまでくると、ロゴとサイトタイトルをセットにして上の方に持ってくるとか、いろいろ出来そうです。twentytenのころだっけかな。あんな感じもいいですね。

次は5-3 アーカイブについて、に続きます。