Simplicity-画面幅いっぱいに広がるヘッダー画像を設定

WordPressのテーマSimplicityで画面幅いっぱいに広がるヘッダー画像を設定する方法を解説します。通常のヘッダー画像設定ではありません。 ヘッダー画像を画面幅いっぱいに広げますので、同時にグローバルナビも画面幅いっぱいに広げます。

管理人が実際に設定している項目を議事録として残しておきます。同じような人に役立てばいいなと思っています。ぜひ参考にしてください。

それでは解説します。

最初に画像を用意します。管理人は最終的にヘッダーの高さを「200」にしたかったので、1280x200の画像を用意しました。このへんは個人のお好みで お願いします。

それではWordPressにログインしてダッシュボードから「外観」「カスタマイズ」「ヘッダー画像」を選択してください。「ヘッダー外側背景画像」の 「画像を選択」をクリックしてください。

用意した画像をアップロードします。あらかじめメディアライブラリに追加してある画像を使用する場合も、操作方法はいっしょです。

今回は、画像をアップロードしますので「ファイルを選択」をクリックしてください。

ローカル環境から画像をアップロードしたら、アップロードした画像を選択して「代替テキスト」を入力てください。 この項目はHTMLのalt属性になります。必要がありましたら「キャプション」「説明」を入力てください。

「代替テキスト」の入力が完了しましたら、「画像の選択」をクリックしてください。

選択した画像が表示されていると思います。次にヘッダーの高さを変更します。デフォルトでは「100」ですが、管理人は「200」にします。 このへんは各サイトにより違いますので各自サイズを調整してください。

「保存して公開」をクリックして、変更した内容を反映します。

モバイルヘッダー背景画像を設定します。それではWordPressにログインしてダッシュボードから「外観」「カスタマイズ」 「ヘッダー画像」を選択してください。「モバイルヘッダー背景画像」の「画像を選択」をクリックしてください。

設定方法は上記「画面幅いっぱいに広がるヘッダー画像を設定」とおなじです。

ヘッダー画像が画面幅にいっぱいになったので、それに合わせて「グローバルナビ」も横幅いっぱいにします。

ダッシュボードから「外観」「カスタマイズ」「色」を選択してください。「グローバルナビを横幅いっぱいにする」にチェックをしてください。 変更があれば「グローバルナビ色」「グローバルナビリンク色」「グローバルナビリンクホバー色」を変更してください。

「保存して公開」をクリックして、変更した内容を反映します。

ヘッダー画像、グローバルナビが画面幅いっぱいになったかを確認します。ダッシュボードより「サイトを表示」で確認してください。