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