【Cocoon】の初期設定でやっておくべきヘッダー・画像・メニュー

ブログの顔ともいうべきサイトヘッダー、私はこだわって自分で撮った写真を使っているのですが、これをヘッダーの規格に合わせて設定するのがとても大変なんです。

ブログテーマの【Cocoon】というのは、とても機能が充実している神テーマであることは間違いないのですが、唯一多くの人を悩ませているのではないかと思われる設定が、このヘッダー画像なのです。

これがなかなか思ったようにはまらないのです。スーです。

本日もお越しいただきありがとうございます。

テーマ変更後のブログのど初期設定を終わらせて、いよいよ外観をいじるときがやってきましたが、やはり時間がかかったのはこのヘッダー画像でした。

今回は2回目で慣れているということもあったし、この設定よりもまったくうまくいかない設定があったりして、大した苦労をした気はしません。

要は、ちゃんとこういうものだと理解してから取り組むと、案外スムーズにいくのです。

では、素人が素人なりにこだわったヘッダーの設定にいってみましょう♪

スポンサーリンク

【Cocoon設定】ヘッダー

ヘッダーとは、タイトルロゴを配置する上部の太い帯です。

ここをじっくりと鑑賞する人はいないでしょうけれど、サイトを見ている間は常に視界に入るものだし、最初に訪れた人を惹きつけることができるかどうかもかかっている、サイト全体のイメージを印象付けるものでもあります。

背景色1色で、タイトルをテキストそのままにのっける、これで終われますか?

終われませんよね。

特に私は写真でイメージを設定しているので、逆にいえばそれ以外の要素はほぼデフォルトです。

ではひとつひとつ見ていきましょう♪

ヘッダーレイアウト

これは、ヘッダーの中身の配置とバランスを決めていきます。

全部で8種類あります。大きく分けて、ロゴを大きく配置するか、メニューバーを目立つ位置に配置するかに分かれます。

ここは、9割以上がロゴ重視でしょうね。

[センターロゴ]の項目です。

その中にも4つに分かれています。

  • デフォルト
  • トップメニュー
  • スリムメニュー
  • スリムトップメニュー

メニューバーの太さと、メニューバーの位置をそれぞれ変えたものですね。

デフォルトのままだと、ちょっとメニューバーが太く感じる方が多いのではないでしょうか。

特に私のようにサブメニューを作らずメニュー自体が多い場合、たくさんのメニューを欲張って表示したい場合は、できるだけその存在感を抑えたいので、[スリムメニュー]ですね。

で、[センターロゴ(スリムメニュー)]です。

このように、自分のサイトのメニューとロゴのバランスを見ながら決めましょう。

高さ(PC/モバイル)

ヘッダーの高さの設定です。

これも好みと見た目のバランスを考えて設定していけばいいと思います。

ただし、自分がいつも見ているPC画面ばかりで調整していると、他のデバイスでの見た目にズレが生じて、場合によってはロゴなどが見えづらくなってしまいます。

これを避けるためにはいろんなデバイスで確認したいですよね。

Cocoonではそれができるのです!

プレビュー画面の一番下にあるこちらのバー↓↓↓、これが相当有効なのです。

これ、何に使うんやろ?と思っていたのですが、ここにある[Resolution Test]をクリックすると、

こんな感じでいろんなデバイスでの見え方を表示してくれるのです。

上部にあるデバイスのアイコンにカーソルを合わせると、その中にもさらにいろんな種類の媒体が用意されています。

これは是非お試しください!

ちなみに設定数値のおよその目安がわかりづらい方、当サイトのヘッダー高さは380pxとしています。

よかったら参考にしてみてくださいね♪

ヘッダーロゴ・ヘッダーロゴサイズ

ブログタイトルなどをロゴ画像にしている方は、ここで画像を選択する必要があります。

私のようにロゴはテキスト文字でシンプルに表現するという方は、ここでの設定はありません。

キャッチフレーズの配置

これは、タイトルに付随させるキャチフレーズのことですね。

ワードプレスの画面の[設定][一般設定]で設定したキャッチフレーズを表示させるかどうか、またその場所などを変更します。

ヘッダー背景画像

ついにきましたね、魔のヘッダー画像。

いやいや、そんなにきつくないですから、順番通りに素直に設定すれば案外するっとできますよ。

ここでは、私がやった「自分で撮った写真データを使う」方法のみのご紹介になります。

ヘッダーの帯の中に、タイトルとキャッチフレーズとメニューバー、これらが思う通りに収まってくれないことが、ここでの一番の悩みどころです。

これってどういうことかというと、自分で撮った写真の比率とヘッダーの比率が違いすぎるということですね。

まずそこが注意点です。あとは、

  • 画像の下部(上部)にメニューバーが挿入される
  • メニューバーを除く残りの画面の中央にタイトルが乗っかる
  • タイトルは自由に動かせない

これらをきちんと念頭に置いて写真を切り取ることが大事です。

当然一発で決まる、なんてことは稀なので、何回も画像を切ったり伸ばしたりして調整していきます。

私の場合は、タイトルなどのテキストを白にしたいけど、背景画像にも白が存在しているので、位置がかぶると文字が見えなくなってしまうというアクシデントが起こりました。

文字色も画像色も変えたくない、なので、被らない位置にタイトルを配置するために何度もやり直しました。

そして、最後には「もう被ってもええわ、モバイルでは見えてるし、ええわ!」というヤケクソな結末に落ち着きましたが…。

そういうアクシデントがない方はもっとスムーズにいくでしょう。

ここでも、余裕があったら先ほどのプレビューからの[Resolution Test]を試してみるといいかもしれませんね。

ヘッダー色

ヘッダー全体の色、ロゴの色、メニューバーの色、と好きな色を指定することができる項目です。

背景に画像を配置しない場合は、この[ヘッダー全体色]というかなりの面積の色味が直接サイトのイメージにも繋がると思います。

文字色やメニューバーとのバランスを見ながら決めていきましょう。

グローバルメニュー幅

このグローバルメニュー幅というのは、メニューにあるひとつひとつのカテゴリーなどのボタンのことです。

これの幅などを設定できます。

私は、[トップメニュー幅]100pxにしました。

その下の[メニュー幅をテキストに合わせる]には必ずチェックを入れましょう。

ボタンの幅を均一にしてもメニューバーと同じ色でわかりづらいです。それならテキストごとに等間隔開けた方がスッキリと見えますね。

これはどちらのパターンも実際に見てみるとよりわかりやすいです。

スポンサーリンク

まとめ

以上で、難関であるヘッダーの設定が終了です。

本当にお疲れ様でした〜。

画像をうまくはめ込めた時は感慨深い思いに浸ってしまうことでしょう。

あとは、PC画面でばかりで変更や設定をしているとモバイルでの見え方にズレが生じるかもしれないので、、ユーザーの8割がモバイルからの訪問だということをしっかりと意識して行っていきましょう。

これで、テーマ変更後のサイトの見た目の調整はほぼ終わりです。

次からは細かくてややこしくてエラー出まくりなこともなきにしもあらずな、SEO設定などについてまとめていきたいと思っています。

本日も最後までお読みいただきありがとうございます。

ブログ
スポンサーリンク
気に入ったらシェアして下さい♪
スーの日常、軽いクスッとはこちらでアップしてます。フォローお願いします♪
そこここに、愛や菌やふんどしや
タイトルとURLをコピーしました