【STINGER PLUS】ヘッダーカスタマイズ：ヘッダー画像を画面サイズに広げる方法

Tweet

このブログのテーマをSTINGER5からSTINGER PLUSに変更してから1か月ほど経ちましたが、これはいいですね！

デザインもさることながら、ウィジェットの使い勝手がかなり向上していて、ブログだけではなくサイトも作れそうです。そしてなんかアクセス数も上がっている気がします。

STINGERの制作者様に感謝ですね。

STINGER PLUSは標準のデザインだけで十分美しいんですが、ここではオリジナリティを出すためのカスタマイズをまとめていきます。

今回は、ヘッダー画像のサイズを画面いっぱいに広げる方法です。STINGER PLUSではヘッダー画像とグローバルメニューのサイズは幅が1060ピクセルに固定されています。これだと若干迫力に欠けるというか、連続性がない気がするんですよね。ヘッダー画像とメニューを画面サイズいっぱいに広げて迫力のあるデザインにしてみましょう。

STINGER PLUSのヘッダーとメニューを画面サイズいっぱいに広げる方法

STINGERシリーズのヘッダー画像やメニューは横幅が決められていて、それに合った画像を選択する必要がありますね。

ただデフォルトのままだと画面の横の部分との連続性が途切れてしまって、完全にその部分が無駄なスペースになっています。そこでヘッダー画像やメニューを画面サイズいっぱいまで広げると、横の余白部分との連続性が出来て、一気に迫力のあるデザインになります。

まあ論より証拠、今回やりたいカスタマイズはこのブログでもやっています。

目標はこんな感じですね。

それでは具体的な修正手順です。

header.phpの修正

まずはヘッダーの修正なので、やはりheader.phpを修正する必要があります。

管理画面にログインして「外観」⇒「テーマの編集」からheader.phpを開きます。子テーマを利用している人は、親テーマからコピーして持ってきてくださいね。

次にheader.phpから以下のコードを探してください。ctrl+Fで検索ができるので、簡単に見つかると思います。

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

この行をheader.phpの一番下に移動させます。</header>のさらに下です。

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

↑こんな感じになります。

この”wrapper”という部分に横幅が指定されているので、これをヘッダー部分から外に出すことで、ヘッダー部分の横幅サイズをなくします。

ただこれをやるとメニューなどのコンテンツも画面の端までよってしまうので、中身のコンテンツは元に戻します。これらを元に戻すには、以下のコードを挿入します。

<div class="inner clearfix"> 

挿入する部分はheader.phpの上の方です。以下の部分ですね。

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

そして挿入したタグを閉じるため"</div><!-- /#inner clearfix -->"も以下の部分に挿入してください。

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

以上でheader.phpの修正は完了です。

styles.cssの修正

次にstyles.cssを修正します。

さきほど追加したクラスinnerに対してcssで幅を指定することで、コンテンツの中身を真ん中に寄せます。

style.cssの一番下に以下のコードを挿入してください。（STINGER PLUSの子テーマのcssには最初からPC・スマホ・タブレット用のcss指定をする枠"media Queries"が用意されていますが、この中ではなくて、一番下で問題ありません。

.inner {
	max-width: 1060px;
	padding: 0 10px;
	margin: 0 auto;
}
#headbox {
	padding: 0;
	margin: 0;
}
#gazou-wide {
	margin: 0;
}
#gazou-wide img {
	width: 100%;
}
nav.smanone ul {
	max-width: 1060px;
	padding: 0 10px;
	margin: 0 auto;
}

これで完成です！

簡単ですよね。ヘッダー画像やメニューの背景が画面いっぱいに広がってかなりおしゃれでダイナミックなデザインになったのではないでしょうか。

メニューの背景色などは「外観」⇒「カスタマイズ」から選ぶことができるので、ヘッダー画像に合った色に変更しましょう。またヘッダー画像は画面いっぱいまで拡張されるので、それに合わせたサイズのものを作成するといいと思います。

まとめ

STINGER PLUSでヘッダー画像とメニューを画面いっぱいに広げるカスタマイズ方法を紹介しました。

STINGER PLUSはヘッダーをカスタマイズすると相当おしゃれなデザインになり、オリジナリティもでます。

簡単なので、ぜひ試してみてください！

最後まで読んでいただきありがとうございます！この記事が気に入ったらぜひシェアしていただけるとうれしいです。

Tweet