[Cocoon] ロゴ画像サイズ ~ トップメニュータイプの場合

[Cocoon] ロゴ画像サイズ ~ トップメニュータイプの場合
アイキャッチ画像は

StockSnapによるPixabayからの画像

ヘッダーレイアウトがトップメニューの時のロゴ画像サイズについてまとめています。

結論はこちらです。(修正しました。)

トップメニューの時のロゴ画像サイズ
  • トップメニューの高さ: 60 px
    おススメサイズ:400x80 pxにして、フォーラムにあるコードを使う。(詳しくは後述。)
  • トップメニュー(スリム)の高さ: 42 px
    (ピッタリ調整されないので、ロゴ画像を自分で42pxの高さに合わせておくと、上手くいきます。)

400×80以外のサイズにしたい場合、以下のフォーラムスレッドが参考になるかと思います。(ワタシの回答はスキップしてください。笑。)

[解決済] ヘッダーロゴをそのままの大きさで表示させる方法

ただ、ロゴスペース内の上下のロゴ画像位置でお悩みの場合は、次のアップデート(執筆日11月16日以降のアップデート)で解消されるはずです。そのコードや変更内容は以下のスレッドにあります。

ロゴ画像下のスペースにつきまして

Cocoonのヘッダーレイアウトは、大別すると、以下2種類があります。

  • センターロゴタイプ (ブログタイトルが真ん中。)
  • トップメニュータイプ (ブログタイトルが左端にきて、メニューと並ぶ。)

「センターロゴタイプ」のときは、ロゴ画像サイズが極端なサイズでない限り、自然と上手くいきます。

以下の記事の目次の6番に、数種類のヘッダーサンプルを載せました。
そこにロゴ画像サイズも記録してあります。ご参考までに。

いくみ
いくみ

それでは、トップメニューのロゴ画像サイズを見ていきましょう。

ヘッダーレイアウト・ロゴ画像の設定・ヘッダー部分の色の設定場所:

[Cocoon設定]>[ヘッダー]タブにすべてあります。

トップメニューのロゴ画像サイズ

以下のスレッドの質問者の方とまったく同じサイズ(400 x 80 pixcel)にして、提示されているコードをコピペすると、うまくいきました。

[解決済] ヘッダーロゴ画像のサイズが反映されない(続き)

サンプル画像です。

400×80 pixcelロゴ画像
トップメニューの見た目

コードは以下に貼りました。

1.WordPress画面の左にある、ハケマークのアイコンから[カスタマイズ]をクリック。

ロゴ画像サイズのCSS設定場所

2.[追加CSS]をクリック。

ロゴ画像サイズのCSS設定場所

3.先ほどのフォーラムページに、以下のコードがありますので貼り付けます。

div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 400px;
}

ロゴ画像サイズのCSS設定
貼り付けた後の画像

4.[公開]ボタンを押します。

そして、ロゴ画像を設定します。

設定場所は、[Cocoon設定] > [ヘッダー]タブ > [ヘッダーロゴ画像]セクションです。

私は以下のサイズを作ってしまっていたので、そのまま使いました。コードが無くてもまぁ大丈夫でした。ただ、上記のコードを一緒に使うと、少し大きく表示されて見やすかったので一緒に使っていました。

あぁ、ブログ。初心者の学習ノート11月ロゴ
358 x 60 px 11月用ロゴ

Edge・Chromeの場合(満足!):

あぁ、ブログ。初心者の学習ノート11月ロゴ、IE・Edge表示

IEはちょっと、違う見た目になるかもしれないです・・・。IEは、私は気にしないことにしました。

フッターにロゴ画像を表示させたい場合。

幅400のヘッダーロゴ画像をそのまま使うと、以下のようにフッターロゴが潰れたようになってしまいます。

幅400のロゴ画像をフッターロゴにした場合の例

これはフッターロゴ画像を非表示にするか、フッターロゴ用に小さめの画像を別に作って設定すれば解決します。

フッターの設定についてはこちらにまとめています。

トップメニューヘッダーの色設定

以下のように100%表示だとあまり分からないですが、両端にうっすらとピンクが見えますね。

トップメニュー
100%表示

縮小表示すると、こうなります。

トップメニュータイプの色のオプション

動作確認のために、ヘッダー全体色・ヘッダー色(ロゴ部)・グローバルナビメニュー色すべてに違う色を設定しました。(ヘッダー全体色(#f7c9ce)・ヘッダー色(ロゴ部)(#fff4e1)・グローバルナビメニュー色(#b2dfdb)を使用。)

いくみ
いくみ

1色・2色にすることももちろん可能ですし、その方がおすすめです。
サイト背景色と合わせるのも良いと思います。

トップメニュー(小)のロゴ画像サイズ

トップメニュー()にすると、メニューバーの高さが細くなります。

使用したロゴ画像のサイズ(さっきと同じです):376 x 113 px

ロゴ画像サイズ ~ トップメニュー(小)タイプのPC表示例

PC表示↑は、ロゴがちょっとずれている感じになります。

縮小はされているのですが、ピッタリな感じがしません。

そこで、ロゴ画像の高さを自分で42 pxに調整しました。

ロゴ画像サイズ:136 x 42 px

ロゴ画像サイズ ~ トップメニュー(小)タイプのPC表示例、サイズ調整後
いくみ
いくみ

「あぁ、ブログ。」が真ん中にきて、ピッタリになりました。

長いタイトルも同じです。42 pxにするとピッタリ。

ロゴ画像サイズ ~ トップメニュー(小)タイプのPC表示例、サイズ調整後、長いタイトル

それぞれの携帯表示がこちら。

ロゴ画像サイズ ~ トップメニュー(小)タイプの携帯表示例
ロゴ画像サイズ ~ トップメニュー(小)タイプの携帯表示例、横幅が長いタイトル

「ずれ」ですが、もっと高さのあるロゴ画像を使うと更にハッキリと分かります。

609 x 156 pxのロゴ画像を使ってみます。

ロゴ画像サイズ ~ トップメニュー(小)タイプのPC表示例、高さがあるロゴ画像

半分がメニューの高さから飛び出しています。

同じ画像でも、トップメニュ(小)ではなく、普通のトップメニューにすると、自動調整されてピッタリです。

ロゴ画像サイズ ~ トップメニュータイプのPC表示例、高さがあるロゴ画像

トップメニュー+ヘッダー高さ

おまけです。トップメニューを選んで、ヘッダーに高さをつけるとこうなります。(120に設定しています。)

トップメニューにヘッダー高さ設定

しっかりと色の配色を考えれば、キャラメルっぽくできたり、どこかの国の国旗みたいにできそうですね。やっている人いないですけどね・・・笑。

トップメニューにヘッダー高さ設定、色のオプション

ロゴ画像の関連記事

ロゴ画像の作り方はこちらにまとめています。「透過」オプションにチェックをいれるのをお忘れなく。

ロゴ画像にアイコンやイラストを追加したい場合は、こちらの透過画像の合成ソフトがおすすめです。

おわりに

以下のヘッダーレイアウトの記事を書いたときに、トップメニュー(小)のロゴ画像の仕上がりがイマイチだなと思って、この記事を書きました。

ヘッダー画像サイズを調べたときと同じく、Google拡張機能 Page Rulerを使ったら、適切サイズがすぐに分かりました。以下の記事の目次4番に導入方法と使い方を書いています。他の場面でもけっこう重宝しています♪。

いくみ
いくみ

トップメニューの下に画像を入れる方法も書きました。

ヘッダー画像の準備が楽になります!

コメント

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