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

wordpress

TwentySixteen カスタマイズ 5 〜最低限度のデザイン改変を実施する「5-2 サイト全体のデザイン設定、ヘッダー」の巻です。

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

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

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

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

カスタムロゴ

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

デフォルトのヘッダーとロゴ
デフォルトではこうでした。

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

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

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

 

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

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

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

アイコンのような扱いのロゴ

cssはこうなっています。

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

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

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

コメントを残す