Cocoonテーマを使っていて、「Canvaで作ったヘッダー画像をブログにどう設定すればいいの？」と悩んでいませんか？
ヘッダーはブログを開いたときに一番最初に目に入る部分なので、設定するだけでサイト全体の印象がグッと良くなります。
この記事では、Canvaで作成したヘッダー画像をCocoonブログに設定する方法を、実際の操作画面付きでわかりやすく解説します。
初心者の方でも迷わず設定できるよう、順番に説明していきますので、ぜひ参考にしてください。
Canvaでヘッダー画像を作成する方法
まずはCanvaでヘッダー用の背景画像を作成します。
Canva公式サイトにアクセス
左側のメニューから 「テンプレート」 をクリック
検索窓に「ヘッダー パソコン」などと入力
「このテンプレートをカスタマイズ」をクリック
好きなテンプレートを選んで 「このテンプレートをカスタマイズ」 をクリック
いらない文字やパーツを削除して編集
「ファイル 」→ 「ダウンロード」
編集が終わったら 「ファイル 」→ 「ダウンロード」
形式は PNG を選択し、ダウンロードします。
これでヘッダー用の背景画像の準備は完了です。
Cocoonでヘッダー画像を設定する方法
次に、WordPressのCocoon設定からヘッダー画像を設定します。
「Cocoon設定」 → 「ヘッダー」タブ
WordPress管理画面 → 「Cocoon設定」 → 「ヘッダー」タブ をクリック
ヘッダー背景画像 の「選択」をクリック
ファイルをアップロード
「ファイルをアップロード」→「ファイルを選択」をクリック
ダウンロードのところに入っているので、選んで「開く」をクリック
画像を選んで 右下の「画像の選択」 をクリック
レイアウトの設定
ヘッダーレイアウトは 「センターロゴ」 に設定（もちろん、好きなレイアウトでいいですよ！）
高さはパソコンとモバイルで調整できます。
それぞれで表示の仕方が若干違うので、別々に設定した方がきれいでした。
私は、パソコンの高さ：300、モバイルの高さ：150にしてみました
実際に表示を確認しながら調整すると良いです。
「背景画像を全て表示する」 のチェックは外しておきます。
そうしないと、先ほど設定した高さが適用されません。
最後に 「変更をまとめて保存」
Cocoonでブログ名をヘッダーに表示する設定
背景画像を設定したら、ブログ名の表示設定も確認しておきましょう。
「Cocoon設定」 → 「タイトル」タブ
「Cocoon設定」 → 「タイトル」タブ をクリック
フロントページタイトルは 「サイト名」にチェック
自由形式タイトルに 「ブログ名」 を入力
最後に「変更をまとめて保存」
これで、Canvaで作った背景画像に「ブログ名」が表示されるシンプルなヘッダーになります。
まとめ
Canvaで背景画像を作る
Cocoon設定の「ヘッダー」で背景画像を反映
Cocoon設定の「タイトル」でブログ名を表示
この手順で、オリジナル感のあるヘッダーを簡単に作ることができます。
私も実際に試してみましたが、シンプルでとても気に入っています。
WordPressブログ開設後にやることはこちらの記事にまとめています。ブログ運営に必要な設定を順番に解説していますので、ぜひ参考にしてみてください。
