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

Blog

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ロゴメーカー | 【商用利用OK】無料で誰でも簡単に自分のショップのロゴが作れる
商用利用可能なロゴが誰でも簡単に無料で作れるサービスです。

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

  1. 左側のショップ名にサイトタイトルを入力する(入力すると画面中央に反映されます)
  2. 左側のキャッチコピーにサブタイトルを入力する(入力すると画面中央に反映されます)
  3. 上部のコマンドでロゴの「フォント」「太さ」「カラー」を指定します
  4. 右下の完成をクリックします
  5. ロゴの保存形式を選択します(ここではpng透過を推奨します)
  6. ロゴの保存サイズを選択します(全サイズ保存しておき、ヘッダーへのロゴ挿入時に好みのサイズを選択することを推奨します)
  • 「ショップ名」と「キャッチコピー」の位置は自由に配置できます。
  • 好みに応じて左下のアイコンを挿入してください。
  • 画面に表示されているデザインがそのままロゴになります。
  • ロゴの「カラー」はヘッダーに使用する背景のカラーと被らないように指定してください。白または黒にしておくことが無難です。

背景を「Canva」で作成する

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

Attention Required! | Cloudflare

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

  1. デザインを作成→カスタムサイズ→サイズを「1260×265px」に指定する
  2. 好みの背景をデザインする
  3. 作成した背景を保存する(保存形式はpngまたはjpgを推奨します)
  • 「1260×265px」が最適サイズになります。
  • 「Canva」内の画像ではなく、既にお持ちの画像を使用したい場合は左側のコマンドの中にあるアップロードから画像を挿入することができます。

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

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

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

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

  1. 作成した「ロゴ」を挿入する(保存したロゴの中から好みのサイズを挿入します)
  2. 高さを220に指定する(モバイルの高さは後で好みに応じて指定してください)
  3. キャッチフレーズを表示しないに設定
  4. 作成した「背景」を挿入する
  • 背景は端末に合わせてサイズが自動で最適化されます。
  • 高さ(モバイル)とヘッダーロゴサイズは自由に設定してください。

まとめ

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

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

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

スポンサーリンク

コメント

  1. 税理士 より:

    ヘッダーを自作しようと色々検索した末にここにたどり着きました

    ここはとても分かりやすく書いてあって、自分でも簡単に作ることができました!

    とても丁寧にありがとうございます

タイトルとURLをコピーしました