STINGER7/Plus：ヘッダーを幅いっぱいに広げてオリジナルデザインにカスタマイズする方法

ブログ開設から一週間ちょい、検索からのアクセスが出てきました♪
まだまだ記事が少ないのでなんか申し訳ないですが。

「STINGER7 ヘッダー」というキーワードでちらほらアクセスがあったので、そろそろやろうと思っていたヘッダーのカスタマイズをしていこうと思います！

少し上級編ですが、ただ色を変えたりするだけじゃなくて、オリジナルのデザインにしたい！っていう方は参考にしてみてください。

よくあるヘッダーやメニューの背景だけを幅いっぱいに広げる方法です。
それじゃあいってみよ！

【追記：2016.9.9】
※一部内容を修正。STINGER Plusに対応しました。

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓

STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓

STINGER7：親テーマの任意のファイルを子テーマで編集する方法

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

まずはヘッダーの横幅をウィンドウの端まで広げます。
デフォルトの状態だとこうなっていますね↓

最大幅が1080pxに設定されています。（左右にpaddingが10pxずつ）
今回はヘッダー部分だけ画面の端まで背景の色を変えたいので、この幅を画面の端まで広げます。

「wrapper」を移動させる

まずは管理画面の「外観」→「テーマの編集」から、テーマヘッダー（header.php）を開いて下記のコードを探しましょう。
キーボードの「ctrl+F（macは ⌘(command)+F）」でページ内検索ができるので、「wrapper」という文字列を検索するとすぐに見つかります。

<div id="wrapper" class="<?php st_wrap_class(); ?>">

見つけたらこのコードをheader.phpの一番下の </header> のさらに下に移動させてください。

</header>
<div id="wrapper" class="<?php st_wrap_class(); ?>">

この「div#wrapper」に横幅の指定がされているので、ヘッダー部分をその外に出す作業です。
これでヘッダー部分は横幅の指定がなくなったのでこうなると思います↓

中身のコンテンツは元の位置に戻す

次に、背景だけ端まで広がれば良いのでコンテンツは元に戻します。
幅を指定するためのボックス <div class=”inner clearfix”> を挿入しましょう。
位置はこの場所です↓

<header>
<div class="clearfix" id="headbox">
<div class="inner clearfix"> <!-- ここに挿入 -->
<!-- アコーディオン -->

STINGER Plusの場合は <header> ではなく <header id=”<?php st_head_class(); ?>”> になっていると思いますが場所は同じです。

そしてこのボックスの閉じタグ </div><!– /#inner clearfix –> も挿入します↓

</div><!-- /#header-r -->
</div><!-- /#inner clearfix ここに挿入 -->
</div><!-- /#clearfix -->

そしてこのボックスにCSSで幅を指定します。
スタイルシート（style.css）の一番下に下記コードを追記してください。

STINGER Plusの子テーマのCSSには最初からウィンドウ幅で表示を分けるための「media Queries」が記述されていますが、その中には書かずに一番下で大丈夫です。

.inner {
	max-width: 1060px;
	padding: 0 10px;
	margin: 0 auto;
}

そうするとロゴなどのコンテンツ部分は元の位置に戻ったと思います↓

メニュー部分がまだ左に寄っていますが、これはあとで調整します。

この状態でスマホ・タブレットで見ると、右に少しスクロールできるようになり、ガタついた感じになってしまうのでそれを修正します。

子テーマの「style.css」にこのコードを追加してください↓

#headbox {
	padding: 0;
	margin: 0;
}

上記コードもSTINGER Plusでは「media Queries」の中ではなく一番下に追記してください。

ヘッダーの背景の色を変えてみる

ヘッダーの背景の幅が画面の端まで広がったので、背景の色を変えてみましょう！
先ほどの #headbox に指定したコードに付け足します↓

#headbox {
    padding: 0;
    margin: 0;
    background-color: #fff;
    border-top: 5px solid #e52625;
    border-bottom: 2px solid #e52625;
}

僕は背景色を「#fff」で白に、さらに「border」で上下にラインを引きました。
色はお好みで変えてください。するとこうなります↓

背景を画像にしたい場合は background-image: url(“画像までのパス”);  で指定してください。

ロゴと説明文を中央に寄せる

次にロゴと説明文も中央に配置したいと思います。
右側に電話番号とかアイコンとか配置してる人もいると思うので、ロゴと説明文は左に寄せたままで良いやって人はここは飛ばしてください。

まずロゴと説明文が入っているボックスの幅を広げます。

子テーマの「style.css」にこのコードを追加してください↓

#header-l {
	text-align: center;
	float: none;
	max-width: initial;
}
@media only screen and (min-width: 414px) {
	header {
		text-align: center;
	}
 
	.sitename img {
		max-width: 300px;
		margin: 0 auto;
	}
}

STINGER Plusの場合はこちらのコードをstyle.cssの一番下に↓

#header-l {
	text-align: center;
	float: none;
	max-width: initial;
}

メディアクエリの min-width: 600px の中に下記コードのハイライトした部分を入れてください↓

@media only screen and (min-width: 600px) {
header {
	text-align: center;
}
.sitename img {
	max-width: 300px;
	margin: 0 auto;
}
/*-- ここまで --*/
}

これでロゴと説明文が中央に寄りました。

ついでにロゴは画像に変更しました。STINGER7（Plus）は「外観」→「カスタマイズ」→「ロゴ画像」で好きな画像をアップすれば変更できます。

.sitename img でタブレット以下の場合はロゴ画像が最大幅300pxまでに収まるようにしています。
ロゴ画像を使っている方はお好きな大きさに調整してください。
max-width: 100%; だと画像がウィンドウ幅いっぱいに広がります。

なんか良い感じになってきましたね♪

ヘッダー画像も幅いっぱいに広げたい！

ヘッダー画像を使っている方はヘッダー画像も幅いっぱいに広げるとカッチョいい感じになります。
style.cssの一番下にこのコードを追記しましょう↓
STINGER Plusの場合も一番下で大丈夫です。

#gazou-wide {
	margin: 0;
}
#gazou-wide img {
	width: 100%;
}

STINGER7だとヘッダー画像が左に寄ってしまうと思います。
幅いっぱいには広げずに、画像を中央寄せにしたい場合は以下のコードをお使いください↓

#gazou-wide {
	margin: 0;
}
#gazou-wide img {
	margin: 0 auto;
}

ヘッダーのメニューをカスタマイズ

ではメニューの見た目もいじっていきましょう。
まずはstyle.cssの一番下（STINGER Plusも同様）このコードを追加します↓

nav.smanone {
	border-radius: 0;
	border: none;
	border-bottom: 2px solid #e52625;
	background: #fff;
	padding: 0;
	margin: 0;
}

余白や角丸、背景のグラデーションの設定は削除して、背景色を白（#fff）に、下部に2pxのラインを引いています。その結果がこちら↓

スッキリ良い感じ！
メニューが左に寄ってるので調整しましょう。

メニューを元の場所に戻す

メニューを最初と同じ場所に戻すにはstyle.cssの一番下（STINGER Plusも同様）に以下を追記します↓

nav.smanone ul {
	max-width: 1060px;
	padding: 0 10px;
	margin: 0 auto;
}

するとこうなりました↓

はい！戻りましたね！

メニューを中央に配置する

僕はメニューも中央に持ってくることにしたので、さらにこのコードを追加しました↓

nav.smanone ul li {
    float:none;
    display:inline-block;
    vertical-align:bottom;
}

STINGER Plusをお使いの方は上記のコードだと反映されないので、こちらのコードをお使いください↓

header .smanone ul.menu li {
    float:none;
    display:inline-block;
    vertical-align:bottom;
}

するとこうなります↓

いいよ〜！いい感じ！完成に近づいてきました！

最後の仕上げ！

最後にメニューのデザインをもう少しいじってみます。
先ほどのコードにこちらを追加しましょう↓

nav.smanone ul li {
	float: none;
	display: inline-block;
	vertical-align:bottom;
	border-right: none;
}
nav.smanone ul li a {
	font-weight: bold;
	color: #e52625;
}
nav.smanone ul li a:hover {
	color: #e52625;
	border-bottom: 4px solid #e52625;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

STINGER Plusの方はこちらのコードをお使いください↓

header .smanone ul.menu li {
	float: none;
	display: inline-block;
	vertical-align:bottom;
	border-right: none;
}
header .smanone ul.menu li a {
	font-weight: bold;
	color: #e52625;
}
header .smanone ul.menu li a:hover {
	color: #e52625;
	border-bottom: 4px solid #e52625;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

まず「 nav.smanone ul li 」の指定で各メニュー右側に薄いボーダーがあったのを border-right: none;  で消しています。

「 nav.smanone ul li a 」の指定では font-weight: bold;  でリンク文字を太く、color: #52625; で色を変更しました。

「 nav.smanone ul li a:hover 」の指定でマウスを載せた時の文字の色も同じにして、下にボーダーが出るようにしました。

ボーダーを指定しただけだとマウスを載せた時にボーダーの分だけボックスの高さが増えてガタガタ動いてしまうので、box-sizing: border-box  でボーダーが内側にくるようにしています。

表示はこのようになります↓

はい！完成です！
だいぶ印象が変わりましたよね！

今回の色は適当に選んでますが、ロゴ画像やボーダーの色を変えると雰囲気も変わると思うので色々と試してみてください。何かの参考になれば幸いです。

それでは今日はこの辺で！

【追記：2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24

WordPressのカスタマイズをするなら、ネット検索はもちろん有効ですが、まずは本で基本を勉強することをオススメします。
HTML、CSSなどの基本的な部分を習得するだけでも、ネット上にある記事の理解度がかなり変わってきますよ。

初心者の方でも分かりやすいオススメの本をご紹介します。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

posted with ヨメレバ

赤間 公太郎,大屋 慶太,服部 雄樹 インプレス 2016-03-18

Amazon

Kindle

スラスラわかるCSSデザインのきほん

posted with ヨメレバ

狩野 祐東 SBクリエイティブ 2014-09-26

Amazon

Kindle

はじめてのWordPress入門[最新版] (BASIC MASTER SERIES)

posted with ヨメレバ

原 久鷹 秀和システム 2015-12-07

Amazon

Kindle