ー本記事は2019年9月17日に公開済みですー
ブログの顔ともいうべきサイトヘッダー。
私はこだわって自分で撮った写真を使っているのですが、これをヘッダーの規格に合わせて設定するのがとても大変なんです。
Word Pressテーマの【Cocoon】は、とても機能が充実している神テーマであることは間違いないです。
ただ、唯一多くの人を悩ませているのではないかと思われるのが、ヘッダー画像のサイズ調整なのです。
これがなかなか思ったようにはまらないのです。スー(@bacteria_suzu)です。
本日もお越しいただきありがとうございます。
テーマ導入後のど初期設定を終わらせて、いよいよ外観をいじるときがやってきましたが、
やはり時間がかかったのはこのヘッダー画像でした。
何が大変って、画像のサイズを枠にはめることです。
しかし、ヘッダー画像設定はこういうものだと理解して取り組むと、案外スムーズにいくものです。
有料テーマではここのところが手厚くフォローされているのかもしれませんが、自分の手で作り上げていくデザインも悪くないですよ。
では、素人が素人なりにこだわったヘッダーの設定の詳しい解説をお送りしていきますよ♪
【Cocoon設定】ヘッダーを解説します
ヘッダーとは、タイトルロゴを配置するサイト上部の太い帯です。
ここをじっくりと鑑賞する人はいないでしょうけれど、サイトを見ている間は常に視界に入るものだし、最初に訪れた人を惹きつけることができるかどうかもかかっています。
そう、サイト全体のイメージを印象付けるものなのです。
背景色1色で、タイトルをテキストそのままにのっける、これで終われますか？
終われませんよね。
特に私は写真でイメージを設定しているので、逆にいえばそれ以外の要素はほぼデフォルトです。
ではひとつひとつ見ていきましょう♪
ヘッダーレイアウト
これは、ヘッダーの中身の配置とバランスを決めていきます。
全部で8種類ありますが、パターンは大きく分けて2つです。
・メニューバーを目立つ位置に配置する←［トップメニュー］
ここは、9割以上がロゴ重視の［センターロゴ］でしょうね。
センターロゴ・トップメニューもそれぞれ4つに分かれています。
センターロゴは、
- デフォルト
- トップメニュー
- スリムメニュー
- スリムトップメニュー
この4つ。
メニューバーの太さと位置をそれぞれ変えたものですね。
デフォルトのままだと、ちょっとメニューバーが太く感じる方が多いのではないでしょうか。
私のようにたくさんのメニューを欲張って表示したい場合は、できるだけその存在感を抑えたいので、［スリムメニュー］ですね。
ということで、
です。
このように、自分のサイトメニューとロゴのバランスを見ながら決めましょう。
ヘッダー高さ（PC／モバイル）
ヘッダーの高さの設定です。
これも、好みと見た目のバランスを考えて設定していけばいいと思います。
ただし、自分がいつも見ているPC画面ばかりで調整していると、他のデバイスでの見た目にズレが生じて、場合によってはロゴなどが見えづらくなってしまいます。
これを避けるためにはいろんなデバイスで確認したいですよね。
Cocoonではそれができるのです！
プレビュー画面の一番下にあるこちらのバー↓↓↓、これが相当有効なのです。
ここにある［Resolution Test］をクリックすると、
こんな感じでいろんなデバイスでの見え方を表示してくれるのです。
上部にあるデバイスのアイコンにカーソルを合わせると、その中にもさらにいろんな種類の媒体が用意されています。
これは是非お試しください！
ちなみに設定数値のおよその目安がわかりづらい方、当サイトのヘッダー高さは380pxとしています。
よかったら参考にしてみてくださいね♪
ヘッダーロゴ・ヘッダーロゴサイズ
ブログタイトルをロゴ画像にしている方は、ここで画像を選択する必要があります。
私のようにロゴはテキスト文字でシンプルに表現するという方は、ここでの設定はありません。
キャッチフレーズの配置
これは、タイトルに付随させるキャチフレーズのことですね。
ワードプレスの管理画面の［設定］→［一般設定］で設定したキャッチフレーズを表示させるかどうか、またその場所などを変更します。
ヘッダー背景画像
ついにきましたね、魔のヘッダー画像。
といっても、順番通りに素直に設定すれば案外するっとできますよ。
ここでは、私がやった「自分で撮った写真データを使う」方法のみの解説になります。
ヘッダーの帯の中に、
・タイトル
・キャッチフレーズ
・メニューバー
これらが思う通りに収まってくれないことが、ここでの一番の悩みどころです。
これってどういうことかというと、自分で撮った写真の比率とヘッダーの比率が違いすぎるということですね。
まずそこが注意点です。あとは、
これらをきちんと念頭に置いて写真を切り取ることが大事です。
当然一発で決まる、なんてことは稀なので、何回も画像を切ったり伸ばしたりして調整していきます。
私の場合は、タイトルなどのテキストを白にしたいけど背景画像にも白が存在しているので、位置がかぶると文字が見えなくなってしまうというアクシデントが起こりました。
文字色も画像色も変えたくないので、被らない位置にタイトルを配置するために何度もやり直しました。
そして、最後には「もう被ってもええわ、モバイルでは見えてるし、ええわ！」というヤケクソな結末に落ち着きました…。
そういうアクシデントがない方はもっとスムーズにいくでしょう。
ここでも、余裕があったら先ほどのプレビューからの［Resolution Test］を試してみるといいかもしれませんね。
ヘッダー色
ヘッダー全体の色、ロゴの色、メニューバーの色、と好きな色を指定することができる項目です。
背景に画像を配置しない場合は、この［ヘッダー全体色］というかなりの面積の色味が直接サイトのイメージにも繋がると思います。
文字色やメニューバーとのバランスを見ながら決めていきましょう。
グローバルメニュー幅
このグローバルメニュー幅というのは、メニューにあるひとつひとつのカテゴリーボタンのことです。
これの幅などを設定できます。
私は、［トップメニュー幅］100pxにしました。
その下の［メニュー幅をテキストに合わせる］には必ずチェックを入れましょう。
ボタンの幅を均一にしてもメニューバーと同じ色でわかりづらいです。それならテキストごとに等間隔開けた方がスッキリと見えますね。
これはどちらのパターンも実際に見てみるとよりわかりやすいです。
まとめ：Cocoon設定のヘッダー画像サイズ決めはちょっと大変
以上で、難関であるヘッダーの設定が終了です。
本当におつかれさまでした〜。
画像をうまくはめ込めた時は感慨深い思いに浸ってしまうことでしょう。
あとは、PC画面でばかりで変更や設定をしているとモバイルでの見え方にズレが生じるので、
ユーザーの8割がモバイルからの訪問だということをしっかりと意識して行っていきましょう。
これで、テーマ変更後のサイトヘッダー調整は終わりです。
次からは、サイト全体のデザインや、細かくてややこしくてエラー出まくりなこともなきにしもあらずな、SEO設定などについてまとめていきたいと思っています。
本日も最後までお読みいただきありがとうございます。
