Simplicityに画面幅いっぱいのヘッダー画像を設定する方法

Simplicity1.4から、テーマカスタマイザーだけで、以下のような画面幅いっぱいのヘッダー画像を設定できるようになりました。

このヘッダー画像をブラウザ幅いっぱいにするカスタマイズ方法は、フォーラムなどにも結構問い合わせがあったので、ある程度需要があると思い実装しました。

ただ、最初から取り付けるつもりだった機能ではないので、設定がちょっとややこしいかもしれません。

ですので、ここで説明したいと思います。

主な手順

今回行う主な手順です。

1. ヘッダー背景画像の準備
2. メディアにアップロードしてURLを取得
3. カスタマイザーでヘッダー画像の設定
4. カスタマイザーでグローバルナビの設定
5. グローバルナビの色などを設定

とりあえず、コードを変更する必要はなくなりました。

ヘッダー背景画像の準備

まずは、ヘッダー画像の準備をします。

画像の横幅は、1280px前後、縦は640px以上くらいを推奨します。

僕は今回、クリエイティブ・コモンズゼロ画像から、以下のような画像を選んでみました。

下の方は、表示されないのですが、余裕をもって長めに取っておいたほうがいいかもしれません。その分サイズ重くなりますが。

用意した画像を、サイトを少しでも速く表示できるよう軽量化のためTinyPNGなどで圧縮しておきます。（PNGとなっていますが、JPEGも圧縮できます。その他にはMedia4xなどもあります。）

メディアにアップロードしてURLを取得

WordPress管理画面から「メディア→新規追加」などからドラッグ＆ドロップでアップロードします。

アップロードしたら、「編集」リンクをクリックします。

編集ページが表示されたら、「ファイルのURL」から画像のURLをコピーします。

カスタマイザーでヘッダー画像の設定

次に、「外観→カスタマイズ→ヘッダー画像」の設定から以下の設定を行います。

1. ヘッダーの高さpx→200
2. ヘッダー外側背景画像をURLで指定→先程アップロードしたURL

デフォルト状態で設定した場合、この時点で、こんな感じになります。

これだと、ヘッダー画像は大きいのに、グローバルナビは短いというちょっとアンバランスな形になります。

これを次の設定で変更します。

カスタマイザーでグローバルナビの設定

グローバルナビを画面幅いっぱいにするには、「外観→カスタマイズ→色」の「グローバルナビを横幅いっぱいにする」にチェックを入れてください。

すると、グローバルナビが横幅いっぱいになります。

この時点でこんな感じです。

グローバルナビの色などを設定

このままでよければ、そのままでも良いのですが、画像に対して、ナビの色が弱くバランスが悪いように感じます。

最後に、「外観→カスタマイズ→色」にある以下の項目などを設定して、色を自由に変更します。

• グローバルナビ色→今回は黒っぽい色に設定
• グローバルナビリンク色→今回は白っぽい色に設定
• グローバルナビリンク色（hover）→今回はグレーっぽい色に設定

ここらへんは、好みの色でOKです。

このようにすることで、以下のようなヘッダーになりました。

サイドバーが下に移動するレスポンシブ表示にすると、以下のように表示されます。

先程、縦の長さを多めに取ったのは、レスポンシブ表示されたときに、このように表示されるからです。

メニューを表示するとこんな感じ。

ヘッダーの高さを、さらに高くした場合は、画像も縦の長さを大きく取る必要があります。

まとめ

このように、Simplicity1.4のバージョンアップで、テンプレートファイルを変更することなく画面幅いっぱいにヘッダー背景画像を設定できるようになりました。

ただ、テーマカスタマイザーでの設定は大ざっぱなものなので、細かな修正は、それぞれスタイルシートなどで行ってください。