Stinger5のヘッダーを画面いっぱいにしたカスタマイズ。

      2016/03/26

BonesからSTINGER5にテーマを変更し、とても快適にブログを書いています。

今は、STINGER6がリリースされているそうですね。

僕はまだまだSTINGER5を使わせていただきますよ。

 

ヘッダーのサイズ(幅)が気になる…

無料でこれだけ良いテーマを使わせていただいているので、不満も言えないのですが…

すみません、ヘッダーのサイズがかなり気になっていました

というのも、デフォルトでは左右に空白があるんですよね。

 

ヘッダー全体に背景色をつけると分かりやすいんですが、下記の画像のようになってしまいます。

stinger5-header-full_1

 

ヘッダーは画面幅いっぱいに広がって欲しいので、痺れを切らしてカスタマイズしてみました。

ゴールはこれです。

stinger5-header-full_2

 

デフォルトのコード

カスタマイズと言っても、かなり簡単です。

まず、ヘッダーが画面幅いっぱいにならない原因ですが、

<div id="wrapper">
<header> 
.
.
.
</header>
</div>
<!-- /#wrapper -->

と、wrapperの中にheaderが入っているからです。

だから、headerのサイズを変更しても意味がないんですよね。

 

wrapperの中からheaderを出す

ワードプレスの管理画面→外観→テーマの編集と進み「header.php」を開きます。

そして、wrapperからheaderを取り出します。

<header>
.
.
.
</header>
<div id="wrapper">
.
.
.
</div>
<!-- /#wrapper -->

 

すると…

stinger5-header-full_3

 

あれ?ヘッダーは画面いっぱいに広がったけど、中の文字まで広がってしまった…

ヘッダーは画面幅いっぱいに広がって欲しいけど、文字は真ん中にあって欲しい…

 

headerの中にもう一つwrapperを入れる…?

hito-1

「なるほど!だったら、headerの中にもう一つwrapperを入れればいいのか!」

 

と思った方。

少し前の僕なら同じ考えでした。

実は、一つのサイトで同じidは使わないことが推奨されています

そして、wrapperはclassではなくidです。

 

だから、

<header>
<div id="wrapper">
.
.
.
</div>
<!-- /#wrapper -->
</header>
<div id="wrapper">
.
.
.
</div>
<!-- /#wrapper -->

とすれば早いのですが、これは避けるべきです。

 

headerの中にwrapperと同じスタイルを適用したdiv(箱)を入れる

考え方はいたってシンプル。

wrapperと同じようなdivを入れればいいんです。

別のidを指定してもいいですが、今後同じようなケースがあった時にも対応できるようにclassを指定します。

(classは”inner”という名前にしました。ヘッダーだけなら”header-inner”とかでもいいかもしれません)

 

「footerも画面幅いっぱいに広げたい!」なんて時も便利ですね。

HTMLコードは、

<header>
<div class="inner">
.
.
.
</div>
<!-- /.inner -->
</header>

となります。

 

次にCSS(スタイル)を編集するので、外観→テーマの編集と進み「style.css」を開きます。

#wrapperが指定されている部分が3つあるので、それぞれ後ろに「,.inner」を追加するだけでOKです。

コードはそれぞれ

/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper,.inner {
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper,.inner {
	padding: 0 20px;
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.smanone {
	display: block;
}
.pcnone {
	display: none;
}
#wrapper,.inner {
	padding: 0 40px;
}

となります。

コメントがある部分からそのままコピペすると分かりやすいかもしれません。

 

参考になれば嬉しいです!

良いSTINGERライフを!

カテゴリー WordPressカスタマイズ

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 失敗なし!au・docomoからmineo(マイネオ)へのMNP方法!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人:

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

コメントを残す

CAPTCHA