Simplicity2のヘッダー画像の設定方法(PC・スマホ版もまるごと解説)

Simplicity2のヘッダー画像の3つのパターンをわかりやすく解説します。
画像付きの解説を見ながら
そのまま作業が出来ますので
是非、Simplicity2のヘッダー画像設定マニュアルとしてご利用ください。
★Simplicity2のインストールをしてない人はこちらをお読みください★
目次
ヘッダー画像の表示パターン3つ(グローバルメニュー幅・フルサイズ・モバイル)と設定方法
Simplicity2のヘッダー画像の基本的な表示方法は主に3つです。
- 通常ヘッダー(グローバルメニューと同一幅)
- フルサイズヘッダー(画像いっぱいの幅)
- モバイルヘッダー(スマホ用のヘッダー)
この記事ではこの3つの設定方法を解説しています。
ヘッダーで使用する画像(PC:1070px×300px、スマホ:400px×250px)
今回、ヘッダー画像としてそれぞれ使用する画像サイズは
- PCヘッダー:横1070px×縦300px
- スマホヘッダー:横400px×縦250px
となっています。実際に画像を見てみると下記のような感じです。
<PCヘッダー>
<スマホヘッダー>
上記の画像を使ってPC・スマホヘッダーを設定していきましょう!
①通常ヘッダー(グローバルメニューと同一幅)
まずはグローバルメニューと同一幅の通常ヘッダー画像の設定方法です。
完成図は以下の通り。
グローバルメニューと横幅が同一になっているのがわかると思います。今回はこのヘッダー表示をしていきましょう。
まずはWordPressにログインをしてください。
「外観」をクリックします。
「カスタマイズ」をクリックしましょう。
「ヘッダー」をクリックします。
このページがヘッダーを編集する場所になります。
ヘッダーの高さを「300px」に変更する
ヘッダーの高さはデフォルトだと100pxになっています。しかし、100pxだと縦幅が低すぎるので300pxに変更しましょう。ちなみに300pxという数字には何の根拠もないので、お好みで調整して大丈夫です。
「ヘッダーの高さpx」で「100」の数字を「300」に変更してください。
高さを変更したら「公開」で保存します。
「ヘッダーの高さpc」を変更した後は「再読込」をする必要がある
ちなみにSimplicity2では仕様上、ヘッダーの高さを変更した場合は「再読込」をしてページを更新する必要があります(理由はわかりません)。
「公開」をクリックしたら、ページを再読込して変更を保存しましょう。
「右クリック→再読込」をすれば変更完了です。
再読込が完了したら再度「ヘッダー」をクリックしましょう。
ヘッダー画像を設定していきます。
上記の赤枠の部分をクリックしてください。
ヘッダーに使用する画像を選択します。
画像を選択したら「選択して切り抜く」をクリックしましょう。
画像の切り抜きがある場合は切り抜きます。今回の場合はSimplicity2推奨のサイズで作成しているので、切り抜きはしなくてOKです。
次に進みましょう。
ヘッダー画像が適用されました。OKなら「公開」で保存しましょう。保存したら実際にサイトの表示を確認してみてください。
ちゃんとグローバルナビ(メニュー)の幅で表示されていますね!これで設定完了です!
②フルサイズヘッダー(画像いっぱいの幅)
次はフルサイズのヘッダー画像を設定する方法です。
完成図はこちら。
画面いっぱい(フルサイズ)にヘッダーが表示されていますね。
上記のヘッダー表示の設定を行っていきます。
※ヘッダーの表示タイプを変更する場合の注意点
ヘッダーを通常からフルサイズ、もしくはフルサイズから通常ヘッダーに変更する際は、必ずヘッダー設定を一旦リセットしておきましょう。そうでないと通常ヘッダーとフルサイズが同時に表示されてしまい、バグのようになってしまいます。
フルサイズに変更する前に「グローバルナビ幅のヘッダー(通常ヘッダー)」を「画像未設定」の状態に戻しておきましょう。
「ヘッダー外側背景画像」でヘッダーを設定する
「ヘッダー外側背景画像」で画像を設定していきます。
「画像を選択」をクリックしましょう。
好きなヘッダー画像を選択し「画像を選択」をクリックしてください。
ヘッダーの設定ができました。
プレビューでヘッダー表示が確認できたら「公開」を押して保存してください。公開できたらサイト表示を確認してみましょう。
画面いっぱいのフルサイズでヘッダーが表示されています。
これでフルサイズヘッダーの設定が完了です!
③モバイルヘッダー(スマホ用のヘッダー)
最後はモバイルヘッダー画像の設定方法です。サイトによってはスマホユーザーの方が多いサイトもありますので必ず設定しておきましょう。
モバイル版も同じくカスタマイズの「ヘッダー」で設定していきます。
「モバイルヘッダー」の部分がスマホヘッダーを設定する場所です。赤枠内にある「モバイルヘッダーの高さpx(デフォルト:0)」の部分を「100→250」に設定しましょう。
設定ができたら「公開」をクリックします。
再読込をしましょう。これでヘッダーの高さの変更が完了です。
「画像を選択」をクリックしてください。
モバイルヘッダーに使用する画像を選択して「画像を選択」をクリックしてください。
これでモバイルヘッダーが設定できました。プレビューで確認ができたら「公開」をクリックして保存してください。保存ができたらサイトの表示を確認してみましょう。
スマホヘッダーも無事表示されました!それでは作業お疲れ様でした。
ヘッダー画像を設定する場合はロゴは設定しない方がいい(かも)
余談ですが、ヘッダー画像を設定する場合はロゴは設定しない方が良いと思いました。ヘッダーとロゴの領域が重っているので見栄えが悪くなるからです。
- ロゴを表示するなら…ヘッダーは設定しない
- ヘッダーを表示するなら…ロゴは設定しない
という感じでカスタマイズするといいと思います。
それでは作業は以上になります。
お疲れさまでした!