WordPressの初めてのテンプレートにSimplicity2を使うことにしました。
今回はヘッダー周りのカスタマイズをしましたので備忘録として設定内容を残しておきます。
主な変更点は次の2点です。
・ヘッダー画像を画面幅いっぱいに広げる
・ヘッダーにあわせてグローバルナビを画面幅いっぱいに広げる
Simplicity2のヘッダー画像の表示
デフォルトでのヘッダー画像の表示は以下の赤枠の範囲になります。
本文背景にも色をつけるとヘッダー脇の余白が気になりますのでヘッダー画像を画面の幅いっぱいに表示させることにしました。
Simplicity2のヘッダー画像を画面幅いっぱいに広げる
まずは、ヘッダー用の画像を用意します。
今回はヘッダーの高さ100pxに対して1280ｘ500pxのサイズの画像を用意しました。(高さはもっと低くても大丈夫です)
用意する画像の高さはヘッダーの高さよりも大きくしておく必要がありますが、その理由については後ほど記述します。
・WordPressのダッシュボードより、外観→カスタマイズを選択。
・ヘッダーを選択します。
・現在のヘッダーが設定されている場合は画像を非表示にしておきます。
・ヘッダーの高さpxに希望のサイズを入力します。
・ヘッダー外側背景画像で画像を選択を押し、ファイルのアップロードより先ほど用意したヘッダー画像をアップロードします。
・アップロードできたら画像の選択をクリックしてヘッダー外側背景として選択します。
・保存して公開をクリックするとヘッダーが画面いっぱいに表示されるようになります。
設定のポイントはヘッダー画像ではなく、ヘッダー外側背景画像を使う点です。これにより画面幅に合わせてヘッダー画像が可変し横いっぱいに表示されます。
その為、写真などを使った場合は画面サイズによって表示領域が少しずつ変わってしまうので、問題無いか確認してみてください。
また、ここで用意したヘッダー画像の高さが小さい場合は、画面の横幅を小さくした際に下図の赤枠のようにヘッダー下に余白ができてしまいます。
これを防ぐためにヘッダー高さより高さの大きい画像を先ほど用意しました。
どのくらいのサイズが良いかは試しながら決めていただければ良いと思います。
グローバルナビを画面幅いっぱいに広げる
下図のように今の状態ではグローバルナビがもとのままなので、少々不恰好です。
グローバルナビも横いっぱいに広げてあげます。
・ダッシュボードより外観→カスタマイズを選択。
・ヘッダーを選択。
・「グローバルナビを横幅いっぱいにする」にチェックをつける。。
・保存して公開をクリック。
これで赤枠のようにグローバルナビも横幅いっぱいに広がりデザインがすっきりしました。
まとめ
自分用の備忘録的な話ですが、ヘッダーのカスタマイズについて簡単にまとめてみました。他のカスタマイズについても機会を見てまとめていきたいと思います。
