Simplicity2のヘッダー画像の設定方法（PC・スマホ版もまるごと解説）
Simplicity2のヘッダー画像の３つのパターンをわかりやすく解説します。
画像付きの解説を見ながら
そのまま作業が出来ますので
是非、Simplicity2のヘッダー画像設定マニュアルとしてご利用ください。
★Simplicity2のインストールをしてない人はこちらをお読みください★
目次
ヘッダー画像の表示パターン３つ（グローバルメニュー幅・フルサイズ・モバイル）と設定方法
Simplicity2のヘッダー画像の基本的な表示方法は主に３つです。
- 通常ヘッダー（グローバルメニューと同一幅）
- フルサイズヘッダー（画像いっぱいの幅）
- モバイルヘッダー（スマホ用のヘッダー）
この記事ではこの３つの設定方法を解説しています。
ヘッダーで使用する画像（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」に設定しましょう。
設定ができたら「公開」をクリックします。
再読込をしましょう。これでヘッダーの高さの変更が完了です。
「画像を選択」をクリックしてください。
モバイルヘッダーに使用する画像を選択して「画像を選択」をクリックしてください。
これでモバイルヘッダーが設定できました。プレビューで確認ができたら「公開」をクリックして保存してください。保存ができたらサイトの表示を確認してみましょう。
スマホヘッダーも無事表示されました！それでは作業お疲れ様でした。
ヘッダー画像を設定する場合はロゴは設定しない方がいい（かも）
余談ですが、ヘッダー画像を設定する場合はロゴは設定しない方が良いと思いました。ヘッダーとロゴの領域が重っているので見栄えが悪くなるからです。
- ロゴを表示するなら…ヘッダーは設定しない
- ヘッダーを表示するなら…ロゴは設定しない
という感じでカスタマイズするといいと思います。
それでは作業は以上になります。
お疲れさまでした！
【無料プレゼント付】ブログ集客屋まつの公式メルマガ
公式メルマガでは
- 月間12万PV突破
- メルマガ読者1000名突破
- Twitterフォロワー7500人突破
など、僕の4年間のブログ経験で培った
集客ノウハウをバンバン公開しています。
更に無料プレゼントでは
広告費0円
で、ブログの自動集客システムを作る方法を
お伝えしています。
詳しくは下記のボタンをクリックしてプレゼントをお受け取りください。
