BonesからSTINGER5にテーマを変更し、とても快適にブログを書いています。
今は、STINGER6がリリースされているそうですね。僕はまだまだSTINGER5を使わせていただきますよ。
ヘッダーのサイズ（幅）が気になる…
無料でこれだけ良いテーマを使わせていただいているので、不満も言えないのですが…
すみません、ヘッダーのサイズがかなり気になっていました。
というのも、デフォルトでは左右に空白があるんですよね。
ヘッダー全体に背景色をつけると分かりやすいんですが、下記の画像のようになってしまいます。
ヘッダーは画面幅いっぱいに広がって欲しいので、痺れを切らしてカスタマイズしてみました。
ゴールはこれです。
デフォルトのコード
カスタマイズと言っても、かなり簡単です。
まず、ヘッダーが画面幅いっぱいにならない原因ですが、
<div id="wrapper">
<header>
.
.
.
</header>
</div>
<!-- /#wrapper -->と、wrapperの中にheaderが入っているからです。
だから、headerのサイズを変更しても意味がないんですよね。
wrapperの中からheaderを出す
ワードプレスの管理画面→外観→テーマの編集と進み「header.php」を開きます。
そして、wrapperからheaderを取り出します。
<header>
.
.
.
</header>
<div id="wrapper">
.
.
.
</div>
<!-- /#wrapper -->
すると…
あれ？ヘッダーは画面いっぱいに広がったけど、中の文字まで広がってしまった…
ヘッダーは画面幅いっぱいに広がって欲しいけど、文字は真ん中にあって欲しい…
headerの中にもう一つwrapperを入れる…？
「なるほど！だったら、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ライフを！
