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

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

画面幅いっぱいのヘッダー画像

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

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

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

主な手順

今回行う主な手順です。

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

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

ヘッダー背景画像の準備

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

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

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

battery-camera-canon-261-823x550

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

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

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

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

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

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

ファイルのURL

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

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

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

ヘッダーの設定

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

ヘッダー入れ画像設定した状態

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

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

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

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

グローバルナビを横幅いっぱいにする

以前はこのような設定になっていましたが変更しました。

グローバルナビを画面幅いっぱいにするには、「外観→カスタマイズ→レイアウトの設定(全体・リスト)」の「グローバルナビを横幅いっぱいにする」にチェックを入れてください。

グローバルナビを横幅いっぱいにする

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

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

グローバルナビを横幅いっぱいにした

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

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

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

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

グローバルナビの色

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

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

グローバルナビの色設定後

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

準レスポンシブ表示

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

メニューを表示

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

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

まとめ

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

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

Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

Simplicityに画面幅いっぱいのヘッダー画像を設定する方法
最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
アドセンス(大)