MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

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

      2016/03/26

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

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

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

 

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

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

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

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

 

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

stinger5-header-full_1

 

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

ゴールはこれです。

stinger5-header-full_2

 

デフォルトのコード

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

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

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

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

 

wrapperの中からheaderを出す

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

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

 

すると…

stinger5-header-full_3

 

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

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

 

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

hito-1

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

 

と思った方。

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

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

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

 

だから、

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

 

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

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

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

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

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

 

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

HTMLコードは、

となります。

 

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

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

コードはそれぞれ

となります。

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

 

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

良いSTINGERライフを!

 - WordPress・カスタマイズ