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

この記事を書いている人 - WRITER -

大島 松二郎

ログ集客屋まつ ブログ集客コンサルタント １９８５年生まれ　福島県出身 月間５７０００PVのブログを運営中のブログ集客の専門家。 自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 ２８歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、幾度となく挫折を経験後、ブログ運営やアフィリエイトに関する情報商材を買いあさり、全くのド素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学び取る。２０１５年８月から始めたブログ「ブログ集客屋まつ」は地道に成長し続け、２０１６年４月→１万PV、２０１７年７月→２万PV、２０１８年１月時点→４５０００PV（現在も運営中）。 また「ブログだけで稼ぐこと」にこだわらないマーケティング重視のスタイルであらゆる業界で使えるマーケティングノウハウを確立。現在は「自分にしかできない仕事を確立したい」人を対象に、ビジネス経験ゼロ、顧客ゼロ、売上ゼロからのブログの集客やビジネスの売上作りのサポートを行っている。

Simplicity2のヘッダー画像の３つのパターンをわかりやすく解説します。

画像付きの解説を見ながら
そのまま作業が出来ますので
是非、Simplicity2のヘッダー画像設定マニュアルとしてご利用ください。

ヘッダー画像の表示パターン３つ（グローバルメニュー幅・フルサイズ・モバイル）と設定方法

Simplicity2のヘッダー画像の基本的な表示方法は主に３つです。

1. 通常ヘッダー（グローバルメニューと同一幅）
2. フルサイズヘッダー（画像いっぱいの幅）
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」に設定しましょう。

設定ができたら「公開」をクリックします。

再読込をしましょう。これでヘッダーの高さの変更が完了です。

「画像を選択」をクリックしてください。

モバイルヘッダーに使用する画像を選択して「画像を選択」をクリックしてください。

これでモバイルヘッダーが設定できました。プレビューで確認ができたら「公開」をクリックして保存してください。保存ができたらサイトの表示を確認してみましょう。

スマホヘッダーも無事表示されました！それでは作業お疲れ様でした。

ヘッダー画像を設定する場合はロゴは設定しない方がいい（かも）

余談ですが、ヘッダー画像を設定する場合はロゴは設定しない方が良いと思いました。ヘッダーとロゴの領域が重っているので見栄えが悪くなるからです。

• ロゴを表示するなら…ヘッダーは設定しない
• ヘッダーを表示するなら…ロゴは設定しない

という感じでカスタマイズするといいと思います。
それでは作業は以上になります。

お疲れさまでした！