STINGER7STINGER7/Plus:ヘッダーを幅いっぱいに広げてオリジナルデザインにカスタマイズする方法WordPress2016.11.23ブログ開設から一週間ちょい、検索からのアクセスが出てきました♪まだまだ記事が少ないのでなんか申し訳ないですが。ヘッダー」というキーワードでちらほらアクセスがあったので、そろそろやろうと思っていたヘッダーのカスタマイズをしていこうと思います!少し上級編ですが、ただ色を変えたりするだけじゃなくて、オリジナルのデザインにしたい!っていう方は参考にしてみてください。あるヘッダーやメニューの背景だけを幅いっぱいに広げる方法です。Plusに対応しました。子テーマの使用方法ヘッダーの横幅を画面いっぱいに広げる「wrapper」を移動させる中身のコンテンツは元の位置に戻すヘッダーの背景の色を変えてみるロゴと説明文を中央に寄せるヘッダー画像も幅いっぱいに広げたい!ヘッダーのメニューをカスタマイズメニューを元の場所に戻すメニューを中央に配置する最後の仕上げ!子テーマの使用方法テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。STINGER7の場合は「header.php」を編集する際には注意が必要です。こちらの記事を参考にしてください↓STINGER7:親テーマの任意のファイルを子テーマで編集する方法ヘッダーの横幅を画面いっぱいに広げるまずはヘッダーの横幅をウィンドウの端まで広げます。最大幅が1080pxに設定されています。(左右にpaddingが10pxずつ)今回はヘッダー部分だけ画面の端まで背景の色を変えたいので、この幅を画面の端まで広げます。「wrapper」を移動させるまずは管理画面の「外観」→「テーマの編集」から、テーマヘッダー(header.php)を開いて下記のコードを探しましょう。⌘(command)+F)」でページ内検索ができるので、「wrapper」という文字列を検索するとすぐに見つかります。下に移動させてください。?>">この「div#wrapper」に横幅の指定がされているので、ヘッダー部分をその外に出す作業です。中身のコンテンツは元の位置に戻す次に、背景だけ端まで広がれば良いのでコンテンツは元に戻します。なっていると思いますが場所は同じです。-->そしてこのボックスにCSSで幅を指定します。スタイルシート(style.css)の一番下に下記コードを追記してください。Queries」が記述されていますが、その中には書かずに一番下で大丈夫です。auto;}そうするとロゴなどのコンテンツ部分は元の位置に戻ったと思います↓メニュー部分がまだ左に寄っていますが、これはあとで調整します。この状態でスマホ・タブレットで見ると、右に少しスクロールできるようになり、ガタついた感じになってしまうのでそれを修正します。Queries」の中ではなく一番下に追記してください。#e52625;}僕は背景色を「#fff」で白に、さらに「border」で上下にラインを引きました。色はお好みで変えてください。ロゴと説明文を中央に寄せる次にロゴと説明文も中央に配置したいと思います。右側に電話番号とかアイコンとか配置してる人もいると思うので、ロゴと説明文は左に寄せたままで良いやって人はここは飛ばしてください。ロゴと説明文が入っているボックスの幅を広げます。--*/}これでロゴと説明文が中央に寄りました。ついでにロゴは画像に変更しました。STINGER7(Plus)は「外観」→「カスタマイズ」→「ロゴ画像」で好きな画像をアップすれば変更できます。タブレット以下の場合はロゴ画像が最大幅300pxまでに収まるようにしています。ロゴ画像を使っている方はお好きな大きさに調整してください。画像がウィンドウ幅いっぱいに広がります。なんか良い感じになってきましたね♪ヘッダー画像も幅いっぱいに広げたい!ヘッダー画像を使っている方はヘッダー画像も幅いっぱいに広げるとカッチョいい感じになります。Plusの場合も一番下で大丈夫です。100%;}STINGER7だとヘッダー画像が左に寄ってしまうと思います。auto;}ヘッダーのメニューをカスタマイズではメニューの見た目もいじっていきましょう。0;}余白や角丸、背景のグラデーションの設定は削除して、背景色を白(#fff)に、下部に2pxのラインを引いています。その結果がこちら↓スッキリ良い感じ!メニューが左に寄ってるので調整しましょう。vertical-align:bottom;}するとこうなります↓いいよ〜!いい感じ!完成に近づいてきました!最後の仕上げ!最後にメニューのデザインをもう少しいじってみます。