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」に設定しましょう。
設定ができたら「公開」をクリックします。
再読込をしましょう。これでヘッダーの高さの変更が完了です。
「画像を選択」をクリックしてください。
モバイルヘッダーに使用する画像を選択して「画像を選択」をクリックしてください。
これでモバイルヘッダーが設定できました。プレビューで確認ができたら「公開」をクリックして保存してください。保存ができたらサイトの表示を確認してみましょう。
スマホヘッダーも無事表示されました！それでは作業お疲れ様でした。
ヘッダー画像を設定する場合はロゴは設定しない方がいい（かも）
余談ですが、ヘッダー画像を設定する場合はロゴは設定しない方が良いと思いました。ヘッダーとロゴの領域が重っているので見栄えが悪くなるからです。
- ロゴを表示するなら…ヘッダーは設定しない
- ヘッダーを表示するなら…ロゴは設定しない
という感じでカスタマイズするといいと思います。
それでは作業は以上になります。
お疲れさまでした！
無料E-bookプレゼント付きメルマガ
WordPressの集客ノウハウを ９０ページ以上の 今なら超豪華特典も用意しております。
すべて詰め込みました。
ノウハウが詰まったE-bookです。
広告や有料のツールを使わずに
集客に特化したブログを作る方法を
詳しく載せています。
詳しくは下記のボタンをクリックしてプレゼントページをご覧ください。
