11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

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

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

StockSnapによるPixabayからの画像

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

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

トップメニューの時のロゴ画像サイズ
  • 横幅は、あんまり気にしなくて大丈夫。
  • トップメニューの高さ: 60 px
    自動調整されるため、合わせておかなくても大丈夫でした。
    追記:サイズによるのか、自動調整で、縦横比がくずれてしまうみたいです。(気にならない場合もあります。)
    気になる場合に使えるコードをフォーラムからコピペしてみました。(目次1-1です。)
  • トップメニュー(スリム)の高さ: 42 px
    (ピッタリ調整されないので、ロゴ画像を自分で42pxの高さに合わせておくと、上手くいきます。)

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

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

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

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

いくみ
いくみ

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

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

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

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

使用したロゴ画像のサイズ:376 x 113 px

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

高さが、メニューバーとピッタリそろって、113pxだった高さが60pxに自動縮小されました。

両端に、うっすらとピンクが見えますね。

上の画像は100%表示ですが、縮小してみると、こうなります。

ロゴ画像サイズ ~ トップメニュータイプの色のオプション

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

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

横幅が長くなっても、同じように表示されます。こちらのロゴ画像は、417 x 60 pxです。

ロゴ画像サイズ ~ トップメニュータイプの例、横幅が長いロゴ画像

携帯表示でも、どちらの場合も自然に表示されていますね。

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

長いタイトルの方は、フッターロゴが潰れたようになって↑しまいます。

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

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

縦横比がくずれてしまう場合

いくみ
いくみ

上の例では気にならなかったのですが、サイズやデザインによっては、縦横比がくずれているのが気になりました。

20個くらいのサイズを試したのですが、法則性をつかめず★。

例えば、高さを60pxにして画像を用意したら、「そのまま」表示されるのかなと思っていました。高さをちゃんと合わせているから、自動調整の必要がないはず。

ですが、やっぱり自動調整されて、横幅が狭くなってしまう。そうすると、オリジナルの画像とはバランスが違って、ちょっと窮屈な感じになります。

その比率や自動調整のカットポイントを探ろうしましたが、結局分かりませんでした。

困ったときのフォーラム・・・で、以下を発見。

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

これもですね、なぜうまくいったのか分からないままなんですけど★。

私と同じくこれでうまくいく方がいるかもしれないので、どこにコピペすればいいのかを記録したいと思います。

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.[公開]ボタンを押します。

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

そうしましたら、303 x 59 pxのロゴ画像の縦横比が崩れませんでした。

303 x 59 px

フォーラムで質問されていた方の画像サイズは、400 x 80 pxと書いてありました。

ただ、これ、不思議なのが・・・。

私の画像は、横幅が303pxなので、上のコードにある、width: 400pxの数値を303にしてみたんです。そうすると、縦横比はそんなにくずれませんでしたが、全体的に縮小されました。

いくみ
いくみ

コードの動きが分からない・・・。

なので、どうすればこうなる、という法則を書けなくて申し訳ないのですが。

上のコードの数値や画像サイズをいくつか試すと、縦横比が崩れない黄金画像サイズが見つかるかもしれません。

私にとっての黄金サイズ(IEとEdgeの場合★):設定はそのままで、358 x 60 px、以下のように落ち着きました。

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

更に追記・・・。

この「黄金サイズ」・・・。インターネットブラウザによっては「黄金サイズ」ではありませんでした。

同じ設定・画像でも見え方が変わります・・・。

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

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

Chromeの場合(縮んで見える・・・。):

あぁ、ブログ。初心者の学習ノート11月ロゴ、Chrome表示
いくみ
いくみ

ロゴ画像サイズについて勉強が必要みたいです・・・。

やや疲れたので、ちょっと時間を置きます・・・。

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

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

使用したロゴ画像のサイズ(さっきと同じです):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をコピーしました