Cocoonのヘッダーにロゴ画像を設定する方法｜初心者向けに手順を画像つきで解説

ブログを始めたとき、ヘッダーが文字だけの状態だと少し物足りなく感じませんか？

私

私もブログを始めた頃、ヘッダーに自分で作ったロゴ画像を入れました。設定自体は実はとてもシンプルです。

Cocoonでは、ロゴ画像をアップロードして1箇所に貼り付けるだけでヘッダーに反映されます。専門知識やコードの編集は一切不要です。この記事では、私が実際に設定した手順をそのまま解説します。

📌 この記事でわかること

ヘッダーロゴの設定手順

WordPress管理画面から「Cocoon設定」を開き、「ヘッダー」タブをタップします。タブを開くと、現在のヘッダーのプレビューが表示されます。

画面を下にスクロールすると「ヘッダーロゴ」という項目があります。ここに画像のURLを入力するか、「選択」ボタンからメディアライブラリの画像を選びます。

画像を設定すると、その場でプレビューに反映されます。意図通りに表示されているか確認しながら進められるので安心です。

💡 推奨される画像形式
Cocoonの説明欄には「jpg、jpeg、png形式の画像推奨」と記載されています。背景を透過させたい場合はpng形式がおすすめです。

最後に画面上部の「変更をまとめて保存」をクリックすれば設定完了です。実際にブログを開くと、ヘッダーに画像が反映されています。

友人

思ったよりずっと簡単だね。画像をアップロードして貼り付けるだけなら、コードの知識いらないんだ。

私

そうなんです。「ヘッダーロゴ」の欄に貼り付けて保存するだけ。私はこれを今年の1月頃に設定しました。

画像自体はCanvaなどの無料デザインツールで作成しました。意識したのは次の3点です。

特にスマホでの見やすさは重要です。副業ブログの読者の多くはスマホで閲覧しているため、文字が小さすぎると意味が伝わりません。

⚠️ ヘッダーロゴサイズの注意
「ヘッダーロゴサイズ」の幅・高さを指定すると、画像が強制的にそのサイズへ調整されます。指定しない場合は画像本来の比率で表示されるので、特にこだわりがなければ空欄のままで問題ありません。

ここで少し私の実体験を共有します。実は私のブログのロゴ画像には「副業ログ35」という名前が入っています。でもブログ名自体は「Puglightyear」です。

🤔 私の状況
ロゴ画像は今年1月頃、まだブログの方向性を模索していた時期に作りました。その後ブログ名を「Puglightyear」に変えましたが、ロゴ画像はそのままになっています。

最初は「これって直さないとダメなのでは」と気になっていました。でも実際には、ロゴとブログ名が完全に一致していなくても、読者にとって致命的な問題にはなりませんでした。

むしろ大事なのは、ロゴが「このブログは何を発信しているか」を一目で伝えられているかどうかです。「副業ログ35」というロゴも「35歳会社員のリアル体験と稼ぎ方」というキャッチコピーも、ブログの内容そのものは正しく伝えています。

友人

名前が違うままで大丈夫なの？早く直したほうがいいんじゃ…

私

そのうち直そうとは思っています。でも「完璧に揃ってから公開しよう」とするよりも、まず動かしながら少しずつ整える方が私には合っていました。ブログ名やロゴは状況に応じて変えていけばいいというのが今の考え方です。

✅ ここで伝えたいこと
ロゴとブログ名が完全一致していなくても、ブログ運営は止まりません。「完璧な状態」を待つより「とりあえず設定して動かす」ことの方が、副業ブログでは前に進む力になります。

Cocoonのヘッダーにロゴ画像を設定する作業は、画像を用意してURLを貼り付けるだけのシンプルな作業です。

📌 この記事のまとめ

ロゴはブログの「顔」になる部分です。完璧を求めすぎず、まずは設定してみることをおすすめします。気になる部分は、運営しながら少しずつ整えていけば十分です。