Sibatabi

旅の経験を情報として配信するブログ

【STINGER6】ヘッダーを横幅いっぱいに広げてメニューをタイトル横に並べるカスタマイズ

 2016/02/04 
stinger6

STINGER6で行ったヘッダー周りのカスタマイズを備忘録プラス何かの参考にして頂ければということで、まとめておきます。

 

「STINGER6」ヘッダーカスタマイズ

「STINGER6」ヘッダーカスタマイズ

カスタマイズの前後では、こんな感じになります。

大きな変更点としては、ヘッダーを横幅いっぱいに広げてメニューをタイトル横に並べたことです。

 

ヘッダーの背景を変える

まずは、ヘッダーの背景を変更します。

上記コードをstyle.cssに追記しました。
背景を黒にして、ヘッダー下に影をつけています。

 

背景が黒だと文字が見えないので、上記コードも追記してサイト名の文字を白色に変更。

ちなみに、フォントはGoogle Fontsを利用したので、変更前と後でフォントが違っています。

 

ヘッダーを横幅いっぱいに広げる

header.phpは元々上記のような順番で書かれています。
ですが、wrapperの中にheaderが入っているとheaderの横幅が制限されてしまいます。

なので、headerをwrapperの外に出してあげる必要があります。

 

こんな感じ。

ただ、headerをwrapperの外に出すと、サイト名などもそれに合わせて寄ってしまうので、wrapperと同じ内容のheader-innerという要素を作って対応しました。

 

style.cssには上記を追記。

これで、文字はそのまま、背景だけ横幅いっぱいに広がります。

このカスタマイズは下記ブログを参考にさせて頂きました。

 

サイト説明文を非表示にする

僕がイメージしていたヘッダーには、サイト説明文が不要だったので、cssで非表示にしました。

style.cssに上記を追記。

 

メニューのカスタマイズ

PCのトップメニューをタイトルの横に入れる

PC画面でタイトル下にあるトップメニューをタイトル横に移動しました。

style.cssのPCエリアに上記を追記。

タイトルと説明文が入っている箱をヘッダーの左に寄せて、その右側にメニューを回り込ませています。

 

ついでに、上記も追記して文字を白に、メニュー毎に四角で囲っています。

 

モバイルのメニューはタイトル下に移動

モバイルメニューはタイトル右上から、タイトル左下に移動して装飾もPCのものと同様にしました。

header.phpの中にある<!– アコーディオン –>の部分を</header>前に移動しています。

 

style.cssはこんな感じで追記をして調整。

 

メニューについて、ホントは「Off-Canvas Menu Effects」を導入してスライドメニューにしたかったんですが、上手くいかなかったんで一旦断念。

これ、すっごく良い感じなんで、また時間が出来たら試してみたいと思います。

「Off-Canvas Menu Effects」の導入については、下記ブログが参考になりました。

 

コードのまとめ

header.php

 

style.css

 

以上、STINGER6のヘッダーカスタマイズまとめでした。