【Cocoon】Canvaで作ったヘッダー画像が文字と被る！？一発でスッキリ解決する方法

Canva（キャンバ）でかわいい・おしゃれなヘッダー画像をデザインして設定してみたものの、「元々のブログタイトルの文字」と「画像の中の文字」が重なって表示されてしまった経験はありませんか？

今回は、WordPressの人気無料テーマ「Cocoon（コクーン）」でよく起こるこのお悩みを、初心者の方でも一発で解決できる設定手順とポイントを分かりやすくご紹介します！

1. なぜ画像と元の文字が被ってしまうの？

Cocoonのヘッダー設定には、主に以下の2種類があります。
ヘッダー背景画像 ヘッダー部分全体の「背景」として敷く画像
ヘッダーロゴ サイト名（タイトル）そのものとして置く画像
Canvaで「サイト名（ロゴ）」まで入れた完成版画像を作成し、それを「ヘッダー背景画像」に設定してしまうと、背景画像の上にCocoonが標準で用意している「テキスト（文字）のサイトタイトル」がそのまま重ねて表示されてしまいます。
これが、文字と画像がぐちゃぐちゃに被ってしまう原因です。

2. 一発解決！「ヘッダーロゴ」に設定し直す手順

Canva画像の中にすでにサイト名やロゴが入っている場合は、背景画像ではなく「ヘッダーロゴ」の場所に設定するのが正解です。
ロゴとして設定すると、WordPress側が「タイトルの文字表示は不要だな」と自動で判断し、元々のテキストタイトルを隠してくれます。

【設定ステップ】

・ Cocoon設定を開く
   WordPressの管理画面（ダッシュボード）から 「Cocoon設定」＞「Cocoon設定」 を開き、上部の 「ヘッダー」 タブをクリックします。

・ 間違えて入れた背景画像をクリアする
   「ヘッダー背景画像」の項目に画像が入っている場合は、横にある 「クリア」 ボタンを押して一度解除します。

・「ヘッダーロゴ」に画像をセットする
   少し上にある 「ヘッダーロゴ」 の項目を探し、「選択」 ボタンを押してCanvaからダウンロードした画像をアップロード＆セットします。

・ 変更を保存する
   ページを一番下までスクロールし、「変更をまとめて保存」 をクリックします。

3. 設定後の確認と綺麗に見せるコツ

設定が終わったら、実際のブログ画面を開いて表示を確認してみましょう。
元のテキストタイトルがきれいに消え、Canvaでデザインしたこだわりのロゴだけが表示されていれば大成功です！

💡 さらに見た目を綺麗整えるポイント
スマホ表示での切れに注意
   PCで綺麗に見えていても、スマホ表示だと画像の左右が切れる場合があります。大切な文字やモチーフはなるべく画像の中央寄りに配置しておくと、どの端末から見てもバランス良く表示されます。
【ロゴサイズの微調整】
   ロゴが大きすぎたり小さすぎたりする場合は、「Cocoon設定＞ヘッダー」にある「ロゴサイズ（幅・高さ）」の数値で調整が可能です。

まとめ

CocoonでCanvaのヘッダー画像を使うときは、「文字入りのデザインならヘッダーロゴに設定する」 と覚えておけば失敗しません。
設定自体は数分でできるとても簡単な作業ですので、「画像の上に文字が被って困った！」というときは、ぜひ「ヘッダーロゴ」への設定変更を試してみてくださいね！

にほんブログ村

にほんブログ村

にほんブログ村