【Cocoon】ヘッダーのカスタマイズ手順をわかりやすく解説！

無料テーマ「Cocoon」のヘッダーを有料テーマレベルにカスタマイズ

WordPressの人気無料テーマ「Cocoon」のデフォルトのヘッダーってシンプルだけど、どこか味気が無いと感じませんか？

そう感じる方に向けて、簡単にヘッダーをイカした感じのデザインにカスタマイズする方法を解説していきます。

プラグインの使用は一切ありません。

解説する手順に従って操作すればイカしたヘッダーができますよ！

ヘッダーに使用するロゴと背景を作成する

ヘッダーはページ最上部に当たります。

サイトが表示された時に必ずサイト訪問者の目に付く部分なので、どのようなサイトか把握できるデザインが好ましいです。

ではヘッダーに使用するロゴと背景を作成していきます。

作成に使用するのはいずれも無料の素材作成サイトです。ですが、先に一つ注意しておきたいことがあります。

ロゴ（サイト名やサブタイトル）と背景は別々に作成します。

この注意を頭に入れた上で作成していきましょう。

ロゴを「ロゴメーカー」で作成する

ロゴメーカーは「STORES」が提供する商用利用可能な無料ロゴ作成サイトです。

Captcha Challenge - STORES

logo-maker.stores.jp

以下の手順に従ってロゴを作成します。

1. 左側のショップ名にサイトタイトルを入力する（入力すると画面中央に反映されます）
2. 左側のキャッチコピーにサブタイトルを入力する（入力すると画面中央に反映されます）
3. 上部のコマンドでロゴの「フォント」「太さ」「カラー」を指定します
4. 右下の完成をクリックします
5. ロゴの保存形式を選択します（ここではpng透過を推奨します）
6. ロゴの保存サイズを選択します（全サイズ保存しておき、ヘッダーへのロゴ挿入時に好みのサイズを選択することを推奨します）

背景を「Canva」で作成する

「Canva」はオーストラリア発のグラフィックデザインツールです。基本無料で利用できます。

Just a moment...

www.canva.com

以下の手順に従って背景を作成します。

1. デザインを作成→カスタムサイズ→サイズを「1260×265px」に指定する
2. 好みの背景をデザインする
3. 作成した背景を保存する（保存形式はpngまたはjpgを推奨します）

作成したロゴと背景をヘッダーに挿入する

次にWordPressの管理画面でヘッダーの挿入作業をしていきます。

まず「Cocoon設定」を開き「ヘッダー」をクリックします。

ヘッダー調整画面に移行したら、以下の手順に従ってロゴと背景を挿入していきます。

1. 作成した「ロゴ」を挿入する（保存したロゴの中から好みのサイズを挿入します）
2. 高さを220に指定する（モバイルの高さは後で好みに応じて指定してください）
3. キャッチフレーズを表示しないに設定
4. 作成した「背景」を挿入する

まとめ

簡単にヘッダーをカスタマイズする方法を解説してきました。

ヘッダーのデザインはサイトテーマと親和性が高いものにすることをオススメします。

カスタマイズはあくまで一例に過ぎません。イカしたデザインにカスタマイズして、サイト訪問者のユーザビリティを向上を目指しましょう。