「Cocoon」でのヘッダー画像のカスタマイズ方法を詳しく解説!

ブログ運営
スポンサーリンク

以前Cocoonのテーマについてまとめました。

今回は質問の多かったヘッダー画像の変更の仕方を説明します。
ヘッダー画像は画像のサイズなどがけっこう悩みます…

本記事の内容は🔻

画像サイズのおすすめ紹介
Cocoonでのヘッダー画像の変更方法
この記事を見ればとても簡単にできると思うので参考にしてください。
スポンサーリンク

ヘッダー画像作成

画像はCanvaで作成するのをおすすめします。サイズ設定や無料写真を使用することもできます。

おすすめ画像サイズ

  • ヘッダー画像:1240×250px(縦に長くしたいなら250→300くらいに変更)
  • アイキャッチ画像:320×180px
  • ロゴ画像:500×500(正方形にしたら勝手に合わせてくれます)

ヘッダー画像の変更方法

設定の仕方を順に紹介していきます。

Cocoon設定「ヘッダー」

Cocoon設定のヘッダー設定画面に移ります。

この画面でヘッダー画像を変更していきます。

上から順に説明していきます。

ヘッダーレイアウト

ヘッダーレイアウトはヘッダーの表示形式を変更する部分です。
ここはスキンを設定したら固定されていることが多いのでいじらなくても大丈夫です。

ヘッダーの固定

ヘッダーを固定するかスクロールしても追従するかどうかの変更です。
下にスクロールしてもヘッダーが付いてきたら邪魔なのでこれはしない方がいいです。

高さ。高さ(モバイル)

ヘッダーの高さの変更ですが、デフォルトのままで大丈夫なので変更しなくても大丈夫です。

ヘッダーロゴ

ここで作成した画像を設定します。
先程も紹介しましたが、Canvaで作成するのをおすすめします。

自分でサイズを決めれたり他にも無料画像も豊富に使用できるのでおすすめです。
サイズについても先程紹介しましたが、私の現在のヘッダー画像は1240×250pxです

ヘッダーロゴサイズ

これはCanvaで作成した時にサイズは決めているのでいじらなくて大丈夫です。

キャッチフレーズの配置

キャッチフレーズを配置するかどうかですが、これは表示しないで良いと思います。
もし、キャッチフレーズを入れたかったら画像作成のときに画像にそのままキャッチフレーズを
入れるほうが良いと思います。その方が見栄えや体裁もきれいです。

グローバルナビメニュー幅

これは最後の部分ですが、グローバルナビの幅を変更するところです。

ここはもうメニュー幅をテキストに合わせるでいいと思います。
これを選択するとグローバルナビがキレイに配置されます。

まとめ

サイズや変更の仕方で困っていた人の助けになれば嬉しいです。

ヘッダー画像のおすすめサイズは1240×250です!
画像を作るならCanvaがおすすめ!
変にいじらずデフォルトのままでも大丈夫!

コメント

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