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

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

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

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

★Simplicity2のインストールをしてない人はこちらをお読みください★

Simplicity2をインストールするまでの全手順(画像・動画解説付き)

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

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

  1. 通常ヘッダー(グローバルメニューと同一幅)
  2. フルサイズヘッダー(画像いっぱいの幅)
  3. モバイルヘッダー(スマホ用のヘッダー)

この記事ではこの3つの設定方法を解説しています。

ヘッダーで使用する画像(PC:1070px×300px、スマホ:400px×250px)

今回、ヘッダー画像としてそれぞれ使用する画像サイズは

  • PCヘッダー:横1070px×縦300px
  • スマホヘッダー:横400px×縦250px

となっています。実際に画像を見てみると下記のような感じです。

<PCヘッダー>

ヘッダーサンプル

<スマホヘッダー>ヘッダーサンプル(モバイル)

上記の画像を使ってPC・スマホヘッダーを設定していきましょう!

通常ヘッダー(グローバルメニューと同一幅)

まずはグローバルメニューと同一幅の通常ヘッダー画像の設定方法です。

完成図は以下の通り。

ヘッダー画像

グローバルメニューと横幅が同一になっているのがわかると思います。今回はこのヘッダー表示をしていきましょう。

まずはWordPressにログインをしてください。

WordPressのダッシュボード

「外観」をクリックします。

外観→カスタマイズ

「カスタマイズ」をクリックしましょう。

カスタマイザー

「ヘッダー」をクリックします。
このページがヘッダーを編集する場所になります。

ヘッダーの高さを「300px」に変更する

ヘッダーの高さはデフォルトだと100pxになっています。しかし、100pxだと縦幅が低すぎるので300pxに変更しましょう。ちなみに300pxという数字には何の根拠もないので、お好みで調整して大丈夫です。

カスタマイザー

「ヘッダーの高さpx」「100」の数字を「300」に変更してください。

カスタマイザー

高さを変更したら「公開」で保存します。

「ヘッダーの高さpc」を変更した後は「再読込」をする必要がある

ちなみにSimplicity2では仕様上、ヘッダーの高さを変更した場合は「再読込」をしてページを更新する必要があります(理由はわかりません)。

「公開」をクリックしたら、ページを再読込して変更を保存しましょう。

カスタマイザー

「右クリック→再読込」をすれば変更完了です。

カスタマイザー

再読込が完了したら再度「ヘッダー」をクリックしましょう。

カスタマイザー

ヘッダー画像を設定していきます。
上記の赤枠の部分をクリックしてください。

カスタマイザー

ヘッダーに使用する画像を選択します。

カスタマイザー

画像を選択したら「選択して切り抜く」をクリックしましょう。

カスタマイザー

画像の切り抜きがある場合は切り抜きます。今回の場合はSimplicity2推奨のサイズで作成しているので、切り抜きはしなくてOKです。

次に進みましょう。

カスタマイザー

ヘッダー画像が適用されました。OKなら「公開」で保存しましょう。保存したら実際にサイトの表示を確認してみてください。

カスタマイザー

ちゃんとグローバルナビ(メニュー)の幅で表示されていますね!これで設定完了です!

②フルサイズヘッダー(画像いっぱいの幅)

次はフルサイズのヘッダー画像を設定する方法です。

完成図はこちら。

フルサイズヘッダー

画面いっぱい(フルサイズ)にヘッダーが表示されていますね。
上記のヘッダー表示の設定を行っていきます。

※ヘッダーの表示タイプを変更する場合の注意点

ヘッダーを通常からフルサイズ、もしくはフルサイズから通常ヘッダーに変更する際は、必ずヘッダー設定を一旦リセットしておきましょう。そうでないと通常ヘッダーとフルサイズが同時に表示されてしまい、バグのようになってしまいます。

カスタマイザー

フルサイズに変更する前に「グローバルナビ幅のヘッダー(通常ヘッダー)」を「画像未設定」の状態に戻しておきましょう。

「ヘッダー外側背景画像」でヘッダーを設定する

「ヘッダー外側背景画像」で画像を設定していきます。

カスタマイザー

「画像を選択」をクリックしましょう。

カスタマイザー

好きなヘッダー画像を選択し「画像を選択」をクリックしてください。

カスタマイザー

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

フルサイズヘッダー

画面いっぱいのフルサイズでヘッダーが表示されています。

これでフルサイズヘッダーの設定が完了です!

③モバイルヘッダー(スマホ用のヘッダー)

最後はモバイルヘッダー画像の設定方法です。サイトによってはスマホユーザーの方が多いサイトもありますので必ず設定しておきましょう。

モバイル版も同じくカスタマイズの「ヘッダー」で設定していきます。

カスタマイザー

「モバイルヘッダー」の部分がスマホヘッダーを設定する場所です。赤枠内にある「モバイルヘッダーの高さpx(デフォルト:0)」の部分を「100→250」に設定しましょう。

カスタマイザー

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

カスタマイザー

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

カスタマイザー

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

カスタマイザー

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

カスタマイザー

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

モバイルヘッダー

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

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

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

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

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

お疲れさまでした!

 

 

無料E-bookプレゼント付きメルマガ

WordPressの集客ノウハウを
すべて詰め込みました。

90ページ以上の
ノウハウが詰まったE-bookです。
広告や有料のツールを使わずに
集客に特化したブログを作る方法を
詳しく載せています。

今なら超豪華特典も用意しております。
詳しくは下記のボタンをクリックしてプレゼントページをご覧ください。

 

無料プレゼント

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

Copyright© ブログ集客実践の書 , 2018 All Rights Reserved.