[Cocoon] オシャレロゴ画像のサンプル祭り(8種のサイズ)

An Image speaks a thousand words.
アイキャッチ画像は

TanteTatiによるPixabayからの画像

Canvaで編集

いくみ
いくみ

8種類のサイズのロゴ画像サンプル祭りです。

ヘッダーの背景画像は無しにしています。

いくみ
いくみ

ヘッダー背景無しでロゴ画像だけにするほうが準備は簡単です。

シンプルオシャレにも最適!

背景画像無しの場合、携帯表示が上手くいけばタブレット表示もまぁ大丈夫なのでタブレット表示の画像は省略しています。

サンプル画像の携帯サイズは、iPhone eXpensive portrait · width: 375pxと、iPhone eXpensive landscape · width: 734pxです。

ヘッダーの高さは、すべて未設定のままでテストしています。

テストにはChromeを利用しています。

Edgeは大体同じ見た目になるようなのですが、IEだと・・・違うことがあります。

ワタシは最近、IEは捨てよう・・・と思って確認しなくなりました★。

カスタマイズ情報は以下です。

トップメニューのモバイル表示でロゴ位置を調整

便利なサイズ① 400x80 pixcel

いくみ
いくみ

このサイズは、センターメニューとトップメニューの両方に便利♪。

迷って切り替えるときに、作り直し不要。

センターメニュー

これくらいのバランスになります。

ロゴ上下のスペースはせまめ
400x80 pixcel
PC表示
猫のロゴは

Canvaを利用

フォントの種類:はなぞめ

利用中の色設定:

  • ヘッダー全体色
  • グローバルナビメニュー色
  • グローバルメニューテキストカラー
  • サイトキーカラー
  • サイトキーテキストカラー

ソフトな色合いをお好みの方へ:

グローバルメニューやサイトキーカラーのテキストカラーを「真っ黒」ではなく、少し外すと、オシャレにおさまることが多いです。

チャコールグレーやダークブラウンよりの黒です。

チョットの違いなのに、比べると馴染み感に差があります!

この例では、#5e5e5eを使っています。

携帯表示がこちらです。

ロゴのスペースは携帯タテ高さの約7分の1
400x80 pixcel
携帯タテ表示
ロゴのスペースは携帯ヨコ高さの約3分の1
400x80 pixcel
携帯ヨコ表示
いくみ
いくみ

携帯の横表示でも、6つのメニューがすべておさまっています。

ヘッダー部をもっと高くしたい場合は、ロゴの上下に余白を入れるとイメージ通りにいきやすいです。別記事にカスタマイズ方法をまとめました。

トップメニュー

同じロゴ画像のまま、トップメニューに切り替えました。

ロゴスペースはグローバルメニューの高さと同じ
400x80 pixcel
PC表示 (トップメニュー)
  • ヘッダー全体色
  • グローバルメニューテキストカラー
  • サイトキーカラー
  • サイトキーテキストカラー

上の例では、キッチリおさまるようにコードも設定しています。そのコードと貼り付け場所は以下の記事でまとめております。

他のサイズでトップメニューを使いたい、でも表示がうまくいかない場合は、以下のスレッドが参考になるかもしれません。

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

(ワタシの回答は無視してください。笑。リフィトリーさんが提示しているコードでうまくいったという報告がありましたので試してみましょう。)

シンプルな色使いをお好みの方:

デフォルトのサイト背景色(未設定の状態)は、スッキリ感の演出に最適です。ただ、全部の色を初期設定のままにすると少し寂しいので、ヘッダー色やサイトキーカラーでさし色を入れるのがおススメ!

Cocoonフォーラムからネットサーフィンしていて、「全部初期設定の色合いが似合っている!すてき!」と思ったサイトもあります。

クラシック音楽の練習方法とか、作曲についてまとめているサイトでした。ヘッダーがご自身が弦楽器を奏でている写真で、アイキャッチは、作曲家の肖像画などが多く利用されていました。

もう変更されているかもしれないですが、あ~すてき~、と思いました。クラシックな雰囲気に合うかもしれないですね!

携帯表示はこちらです。

ロゴのスペースは携帯タテ高さの約8分の1
400x80 pixcel
携帯タテ表示 (トップメニュー)
ロゴのスペースは携帯ヨコ高さの約4分の1
400x80 pixcel
携帯ヨコ表示 (トップメニュー)

便利なサイズ② 365 x 60 pixcel

こちらもトップメニュー・センターメニュー兼用サイズです。

いくみ
いくみ

①のサイズよりやや小ぶりになります。

センターメニュー

ロゴ上部の余白が少なく、上に寄っています
365x60 pixcel
PC表示
マーカー入りロゴは

Canvaを利用

フォントの種類:Barriecito

いくみ
いくみ

センターメニューのロゴ位置を変えたい場合は以下の記事で

コードを使いたくないとき

ロゴの画像内で、上下に自分が求める幅のスペースを作っておくというアナログ法も可能です。

ちょうど良い感じ
365x60 pixcel
携帯
タテ表示
同じくちょうど良い感じ
365x60 pixcel
携帯タテ表示

トップメニュー

同じ画像でトップメニューに切り替えますと。

ロゴ位置が上寄り
365x60 pixcel
PC表示
 
トップメニュー

ロゴ画像の位置が少し上に詰まっていると感じられた場合。

上下の中央にもってくるには、以下のコードをコピーします。

.header-container-in.hlt-top-menu .logo-header img {
max-height: 60px;
height: auto;
vertical-align: middle;
}

私は[外観] > [カスタマイズ] > [追加CSS]に貼り付けました。
(画像付きはこちら:コードの貼り付け場所

次のCocoonアップデートでこのコードはいらなくなります。

参考記事:ロゴ画像下のスペースにつきまして

現在日2020年11月21日

するとこうなります。

ロゴ位置が真ん中に
365x60 pixcel
PC表示
 トップメニュー

上下中央そろえコード追加
いくみ
いくみ

チョットの違いが嬉しい。

上下に余白が無い感じ
365x60 pixcel
携帯タテ表示 トップメニュー
上下に余白が無い感じ
365x60 pixcel
携帯
ヨコ表示 トップメニュー

トップメニュー携帯のロゴ位置調整

いくみ
いくみ

トップメニューの携帯表示のロゴスペースを調整したい場合、以下のコードでいけました。

@media screen and (max-width: 768px) {
.header-container-in.hlt-top-menu .logo-header {
padding: 20px 0 10px 0;
}
}
  • 青の数値:余白量を切り替えたいデバイス幅を指定します。
  • 赤の数値:順番に、ロゴ画像の・左・・右の余白量。

お好みで調整しましょう。

私は[外観] > [カスタマイズ] > [追加CSS]に貼り付けました。
(画像付きはこちら:コードの貼り付け場所

正方形 200 x 200 pixcel

スケートボードに載る人のロゴ画像、色使いはモノクロ
200x200 pixcel
PC表示
スケボーロゴは

Canvaを利用

フォントの種類:Bungee

ロゴのスペースは携帯タテ高さの約3分の1
200x200 pixcel
携帯タテ表示

ロゴのスペースは携帯ヨコ高さの約3分の2
200x200 pixcel
携帯ヨコ表示
いくみ
いくみ

縦の高さが200になると、携帯ヨコ画面で表示されるメニューの数が2つ減っていますね。

いろんな色を楽しみたい方へ

ロゴ画像を透過にしておくと、Cocoonの色設定で遊びやすいです。

色を変えるだけで以下の様に雰囲気がかなり変わります。

ターコイズ色

画像を透過にしていないと、こうなります。

黒いロゴ画像が浮きます
いくみ
いくみ

水彩や筆、手書きテイストだど、キレイに透過できないこともあります。

そういう場合は無理せず、背景色付きのままのが見栄えが良くなります

その背景色と同じ色を「ヘッダー色」に設定すれば、線は見えなくなります

以下のサンプルは透過にしづらいタイプだったので、そうしています。

同じサイズです。(携帯表示は省略します。)

ピンクのヘッドフォンのロゴ画像
200x200 pixcel
PC表示
ヘッドフォンのロゴは

Canvaのテンプレートを利用

フォントの種類:Montserrat Classic

色設定に迷っている方へ

色は使い過ぎないのが吉。

そして、画像内にある色と合わせるとまとまりが良いです。

上の例では、ヘッドフォンの画像で使われている色をサイトキーカラー、グローバルメニューに設定しています。

画像内の色のカラーコードを取得できるツールがあって、ホントに本気でおススメです。

以下でまとめております。

もしも、このページでいいなと思う色があった場合、上のツールをぜひご利用くださいませ。

円形 220 x 220 pixcel

花があしらってある円形のロゴ画像
220x220 pixcel
PC表示
マーガレットのロゴは

Oberholster VenitaによるPixabayからの画像 (パワポで編集)

フォントの種類:Blackadder ITC

厳密に言うと、このお花ロゴは220×224なのですが、そんなに変わらないということで・・・。

ロゴのスペースは携帯タテ高さの約3分の1弱
220x220 pixcel
携帯タテ表示
ロゴのスペースは携帯ヨコ高さの約3分の2弱
220x220 pixcel
携帯ヨコ表示
いくみ
いくみ

正円はスペースが狭いので、短めのブログタイトルに向いていますね。

つい、以下のデザインもいいなと思って作りましたが、ブログタイトルが小さすぎますね。

おススメはしないですが、かわいい(さすがCanva)。

豆電球アイコンのロゴ画像
220x220 pixcel
PC表示
電球ロゴは

Canvaを利用

フォントの種類:Montserrat Classic

ロゴ画像の高さについて

携帯表示を考えると、高さはマックスで200pixcelくらいにとどめる方が良いかなというのが個人的な感想です。

正円はスペースが狭いため220にしたのですが。

もしくは、PC表示ではゆったりサイズの円にして、携帯表示は別の画像に切り替えるという方法もあります。そのカスタマイズ方法は別記事でまとめております。

存在感アップ 400 x 220 pixcel

最近、細めのヘッダーのが流行りかな?という印象ですが。

ドンと広めに。

自転車に乗っている人のロゴ画像、色合いは青とベージュ
400x220 pixcel
PC表示
自転車のロゴは

amjad ali aliによるPixabayからの画像(パワポで編集)

フォントの種類:昔々フォント

いくみ
いくみ

グローバルメニューに色を入れると、また雰囲気が変わります。

400x220 pixcel
PC表示

グローバルメニューの色について

グローバルメニューの色を変えないと、ロゴに視線がいきやすい

グローバルメニューの色を変えると、メニューに視線がいきやすい

と思います。上の画像を見比べてみてくださいね。

Cocoonは、色設定が本当に簡単なので、周期的に変えて、両方の効果を発揮させることが可能ですね!!

以下のように反対色にしても面白いですね。

色合いを青と赤に変更
400x220 pixcel
PC表示

いろんな色を試したい方へ

ロゴ画像を作成した際、「白」と「黒」バージョンを両方作っておくと、更に色で遊びやすいです。

上の例は「白いロゴ文字」、下の例は「黒いロゴ文字」の透過画像です。

濃い背景色には「白」が際立ちますし、薄い背景色には「黒」が際立ちます。

色合いによっては、「クリーム色」と「灰色か茶系」のロゴバージョンを。

ロゴ画像を作った時にやってしまうのがおススメです。後になると面倒になって一気にハードルが上がります。

ベージュ背景、刺し色に赤
400x220 pixcel
PC表示
400x220 pixcel
携帯タテ表示
大きすぎるかなぁ。
400x220 pixcel
携帯ヨコ表示
いくみ
いくみ

携帯の横表示で読む方は少な目・・・と予想して、まぁいいか、とすることもできます。

一応、まともな解決策も次のセクションで。

高めのロゴ 400 x 268 pixcel

さらに高くしてみました。

そしてブログタイトルを吹き出しにいれてみました。

フォントは小さくなっていますが、ちょっと読みたくなりませんか?

400x268 pixcel
PC表示
フォントの種類は

kawaii手書き文字

ロゴのスペースは携帯タテ高さの半分弱
400x268 pixcel
携帯タテ表示
さすがにロゴ画像が大きすぎる。
ロゴのスペースは携帯ヨコ高さのほぼ全面
400x268 pixcel
携帯ヨコ表示
いくみ
いくみ

1段目のメニューも半分しか見えません。

解決策!

携帯用に別にロゴ画像を用意して、切り替える方法を以下でまとめました。

携帯タテ高さの約8分の1くらいにロゴがおさまっています
360x60 pixcel
携帯タテ表示
携帯タテ高さの約4分の1くらいにロゴがおさまっています
360x60 pixcel
携帯
ヨコ表示
ロゴは

Canvaを利用

フォントの種類:コーポレート・ロゴ丸

正方形に近い長方形 350 x 240 pixcel

こんな感じになります。

カラフルなドラゴンのロゴ
350 x 240 pixcel
PC表示
ドラゴンのアイコンは

chiplanayによるPixabayからの画像 (パワポで編集)

フォントの種類:Lucida Console

チョット大きいかな?
ロゴのスペースは携帯タテ高さの半分弱
350 x 240 pixcel
携帯タテ表示
高さ240も大きい。
ロゴのスペースは携帯ヨコ高さの約5分の3以上
350 x 240 pixcel
携帯ヨコ表示
いくみ
いくみ

先ほどご紹介したコードで、携帯表示を別のロゴにすればOK!

幅広サイズ 500 x 212

500 x 212 pixcel
PC表示
フォントの種類は

ふわふで

500 x 212 pixcel
携帯タテ表示
500 x 212 pixcel
携帯ヨコ表示

カラフルロゴは似合う色が増えるので、色遊びで冒険しやすくなります。

Retina対応

ロゴ画像について、今回初めて学んだことを書いておきます。

ヘッダーカスタマイズを学びたいとき必読

引用させていただきます。

解像度が2倍のRetinaディスプレイでも綺麗に見えるように、画像のサイズは表示したいサイズの倍の大きさで用意するのをオススメします。

引用元:【Cocoon】ヘッダーのシンプルなカスタマイズ (太字は筆者による。)
いくみ
いくみ

だけど・・・ロゴを表示したいサイズの2倍で作ったら、2倍で表示されちゃう・・・?

と思ったのですが。

[Cocoon設定] > [ヘッダー]タブの[ヘッダーロゴサイズ]に数値を指定すれば、表示サイズを変えられると書いてありました。(実寸でなくて。)

注:センターメニュー用。

[ヘッダーロゴサイズ]の使い方はWEB-AHIBIさんの【Cocoon】ヘッダーのシンプルなカスタマイズを参考にされてください。更に、携帯で表示サイズを変えるコードも載っていましたよ!

[ヘッダーロゴサイズ]・・・一度も使ったことありませんでした!

いくみ
いくみ

勉強になりました。ありがとうございました。

Retina対応で2倍サイズを作る予定の方は、当記事のサンプル祭りの「サイズ」は作成サイズではなく、表示サイズとして参考にしていただければと思います。または縦横比の雰囲気をつかむのにお役に立てればと思います。

おわりに

いくみ
いくみ

見た目よりも中身。

と思いつつ、ついつい画像で遊びたくなってしまいます。

Canvaの素晴らしいテンプレートとCocoonの柔軟な色設定のコラボを存分に楽しみましょう♪。

コメント

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