[Cocoon] ヘッダーレイアウトの種類を画像で紹介

[Cocoon] ヘッダーレイアウトの種類
アイキャッチ画像は

Katzenfee50によるPixabayからの画像

Cocoonには、以下8つのヘッダーレイアウトの種類があります。

  • センターロゴ(デフォルト)
  • センターロゴ(トップメニュー)
  • センターロゴ(スリムメニュー)
  • センターロゴ(スリムトップメニュー)
  • トップメニュー
  • トップメニュー(右寄せ)
  • トップメニュー小
  • トップメニュー小(右寄せ)

[Cocoon設定]の[ヘッダー]セクションに[ヘッダーレイアウト]という項目があります。

ドロップダウンリストから好きなレイアウトを選択できます。

いくみ
いくみ

それぞれ、どんな感じに見えるかを画像でご紹介します!

Cocoonのヘッダーレイアウトの種類 ~ サンプルテストを実施

テストに使ったロゴ画像です。大きさは、371x140 px

Cocoonヘッダーレイアウトの種類テスト用ロゴ

余白の雰囲気が分かるように、便宜上、枠をつけました。
実際には、枠無しです。

いくみ
いくみ

ヘッダーの高さは未入力(デフォルト)で、

キャッチフレーズの表示は無しにしています。

グローバルメニューの幅が分かるように、色(#b2dfdb)をつけています。

PC表示 ~ Cocoonヘッダーレイアウト

「センターロゴ」タイプ:

  • ロゴが真ん中にきます。
  • 「センターロゴ(トップメニュー)」にすると、メニューが画面最上部にきます。
  • それぞれに「スリムメニュー」があり、グローバルメニューの高さが細くなります。
Cocoonヘッダーレイアウトサンプル センターロゴ PC表示

「トップメニュー」タイプ:

  • ロゴとメニューの両方がトップに配置されます。
  • 右寄せ」を選ぶと、メニューアイテムが右に寄ります
  • それぞれに「小」オプションがあり、グローバルメニューの高さが細くなります。
Cocoonヘッダーレイアウトサンプル トップメニュー PC表示
いくみ
いくみ

トップメニュー小を使う場合、ロゴ画像の高さをもうちょっと低くするほうが良さそうですネ。

携帯とタブレット表示について ~ Cocoonヘッダーレイアウト

携帯とタブレット表示は、「8種類」ではなく、実質「4種類」になります。

「スリムメニュー」・「小」オプションの結果に大きな違いが出ないためです。(私の肉眼では違いが分かりませんでした。)

また、「トップメニュー」では、メニューが上にくるのかなと思っていましたが、ロゴが上にきます。そして「センターロゴ」のときよりも、ロゴのサイズが小さくなることが分かりました。

携帯タテ表示 ~ Cocoonヘッダーレイアウト

Cocoonヘッダーレイアウトサンプル 携帯タテ表示

携帯ヨコ表示 ~ Cocoonヘッダーレイアウト

Cocoonヘッダーレイアウトサンプル 携帯ヨコ表示
いくみ
いくみ

「トップメニュー」と「トップメニュー右寄せ」の違いは、5つ目のメニュー項目の位置です。

上の例では、WordPressメニューの位置をご覧ください。

メニューアイテムの数が偶数だと、変化無しでした。

タブレットのタテ表示 ~ Cocoonヘッダーレイアウト

Cocoonヘッダーレイアウトサンプル タブレットタテ表示 センターロゴ
Cocoonヘッダーレイアウトサンプル タブレットタテ表示 トップメニュー

タブレットのヨコ表示 ~ Cocoonヘッダーレイアウト

Cocoonヘッダーレイアウトサンプル タブレットタテ表示 センターロゴ
Cocoonヘッダーレイアウトサンプル タブレットヨコ表示 トップメニュー

タブレットのヨコ表示の画像↑に、黒いバーが入っていますが、無視してください。

管理画面の表示なので、実際には、黒いバーは表示されません。(「Responsive Test」画面で、タブレットの横表示だけはスクロールができず、黒いバーが入ってしまったのです。)

ロゴ画像を使わない場合

「ロゴ画像」を使わなくても、すべてのオプションを利用できます。見た目は基本的には変わらないのですが。

ロゴ画像を使わない場合 センターロゴPC表示例
センターロゴ(デフォルト)のPC表示・ロゴ画像未使用

PC表示の「トップメニュー」と「トップメニュー(右寄せ)」だけは、ロゴ画像のがいいかもと感じました。

ロゴ画像を使わない場合 トップメニューPC表示例
トップメニューのPC表示・ロゴ画像未使用
いくみ
いくみ

チョット、「ブログタイトル」の部分がきつそうですよね。右寄せも同じです。

ただ、「小」にすると、以下の様に少し余白が入ります。

ロゴ画像を使わない場合 トップメニュー(小)PC表示例
トップメニュー(小)のPC表示・ロゴ画像未使用

色の変更

以下の色を変えることができます。

  • グローバルメニュー
  • ヘッダー部分
  • ロゴ部分 
  • 文字の色

すべて、[Cocoon設定]の[ヘッダー]タブでそれぞれ設定できます。

Cocoonヘッダー色の変更

今回のテストでは、グローバルメニューにみどり色(#b2dfdb)をつけています。

ヘッダー部分の色をピンクにするとこんな感じに。

Cocoonヘッダー色変更サンプル
ヘッダー部分をピンクに変更

文字の色も変えられます↑。

「ロゴ部分」に色をつけると、「ロゴ部分」だけ色が付きます。

Cocoonヘッダー色変更サンプル ロゴ部分
ロゴ部分をピンクに変更

(ロゴのサイズやレイアウトによっては、ヘッダー部分に色をつけたときと差がでない場合もあります。)

背景画像の追加

センターロゴレイアウトの場合は、背景画像を追加できます。

ヘッダー部分に画像を追加する方法やサイズについては、以下の記事にまとめています。

トップメニューレイアウトでは、背景画像を追加できない仕様になっています。

以下のフォーラムページで確認できます。

ヘッダーレイアウトをトップメニューにすると、背景画像が反映されない

もし、トップメニューレイアウトで背景を入れたい場合は、「ロゴ画像」を作るときに背景付きにすると良いと思います。

メニューが2列になってしまい、バランスが良くないときの対応策

いくみ
いくみ

以下のように、1つのメニューだけが飛び出しているように見えるとチョット気になりますね。

対応策①:[Cocoon設定]>[ヘッダー]をクリック。

一番下の[グローバルメニュー幅]セクションで[メニュー幅をテキストに合わせる]にチェックを入れます。

メニュー項目の幅が「テキスト幅」になるため、以下のように1段でおさまるように!

対応策②:[Cocoon設定]>[ヘッダー]をクリック。

一番下の[グローバルメニュー幅]セクションの[トップメニュー幅]の値を小さくします。初期設定は176幅になっています。最小値は100です。

トップメニュー幅は1つ1つのメニュー項目の幅です。

小さくすれば、間隔がつまるので、2段になっているメニューが1段になるかもしれません。(あまりにも多すぎると、無理ですけどネ。また、メニュー項目名が長い場合は「対策①」がおススメです。)

わざと2段にしたい場合は、大きい値を入れます。

300を設定して、センターロゴレイアウトで2段にした例:

いくみ
いくみ

上のような場合は、8項目あるほうが良いでしょうね。

「できるよ」という例です。

おわりに

アイキャッチ画像に入れた「美しい配置」は、サルワカさんの以下の説明から引用させていただきました。

レイアウトは「パーツを美しく配置する」というデザインの要素の1つなわけです。

引用元:レイアウトとは?意味を分かりやすく解説 (サルワカさんのブログ)

・・・と思って自分のブログを見直すと・・・。ヘッダー部分に大分無駄が多い!

スペースを保つことは大事だと思うのですが、チョット寂しい感じがするので、見直そうと思います。

コメント

タイトルとURLをコピーしました