Simplicity2のヘッダーをカスタマイズしよう
Wordpressのテーマ「Simplicity2」のヘッダーをカスタマイズしてみました。画像を画面いっぱいにして、ロゴ画像を設定しました。
↓こんな感じ。
Simplicity2ではデフォルトでヘッダーの高さが100pxに設定されています。選択した画像から100pxを切り抜いて設定されるのですが、サイズの大きい画像だと100pxって本当にごくわずか。なんだかよくわからない画像になってしまいます。
画像サイズの変更をしてあげると、きれいに背景画像を設定することができますよ。
早速やってみましょう。
背景画像を設定する
画像サイズを変更する
「Simplicity2」では、ヘッダーの画像サイズとして横幅を1070ピクセルで推奨しています。ヘッダーに使用したい画像のサイズを見てください。だいぶサイズが大きいのではないでしょうか。
画像サイズが大きい場合、まずはサイズ変更をします。
ここでは、ペイントを使って画像サイズを小さく変更しました。
5136×3272ピクセルの画像を1070×650ピクセルに変更し、さらに、高さを365ピクセルになるように切り抜きました。
ヘッダー画像の軽くする
サイトを開いたときに、画像が重いとページの読み込みに時間がかかってしまいます。待ち時間が長いサイトは読者に好まれません。
毎回必ず表示されるヘッダー画像だからこそ、画像を軽くしておくことをおすすめします。
「Tiny PNG」のサイトでは、画像をドロップするだけで自動的にサイズを軽くしてくれます。もちろん無料です。
こちらは、参考までに。まとめて複数枚の処理をすることもできます。どの画像も50%から68%ほど軽くなっていますね。
ヘッダーの背景画像や、ロゴ画像もサイズを軽くしておくといいでしょう。
ヘッダーの高さを設定
ダッシュボード＞外観＞カスタマイズ＞ヘッダーをクリック。
画像を変更する前に、ここで先にヘッダーの高さを設定します。
デフォルトでは100pxとなっていますが、背景に使いたい画像のサイズに合わせて高さを変更します。
ここでは、画像に合わせて365に設定しています。このサイトのヘッダーは少し大きめですね。400近くなると、ページを開いたときに半分くらいがヘッダー画像になってしまいます。背景画像を設定しないで、ロゴ画像だけの場合は、ロゴのサイズに合わせて設定するといいですよ。
ヘッダー外側背景画像・グローバルナビの設定
画像を画面いっぱいにしたいときは、こちらで設定します。
□にチェックを入れてください。
背景画像に合わせて、グローバルナビも横幅いっぱいに設定しましょう。こちらも□にチェックを入れてください。
画像に合わせてグローバルナビの色も変更したくなりますよね。グローバルナビの色を変更したいときは、ダッシュボード＞外観＞カスタマイズ＞色をクリックし、「グローバルナビ色」で設定してください。
これで、背景画像とグローバルナビが画面いっぱいにそろったはずです。
ロゴ画像を設定する
サイトに合わせたオリジナルのロゴ画像も設定してみましょう。
ロゴ画像を作る
まずは、ロゴ画像を準備します。
ペイントなどのアプリでも作ることができます。
無料でおしゃれなロゴが作れるサイトもあります。そうしたサイトを利用してみるのもいいですよ。オリジナルの画像をぜひ準備してみてください。
ヘッダーにロゴを設定する
ダッシュボード＞外観＞カスタマイズ＞ヘッダーをクリックする。
「ロゴを画像にする」にチェックを入れます。
画像をアップロードし、設定します。
これで、完了です。
完成したヘッダー画面を確認しましょう
右側にプレビューが出ますが、画面サイズによって位置が少しずれるはずです。設定後は、必ずサイトを開いて位置を確認してください。
微妙なロゴの位置調整は、CSSを書き加えることで調整も可能です。
「Simplicity」さんのこちらの記事が参考になると思います。
