【Cocoon編】ヘッダーのカスタマイズ手順|サイズとロゴ作成する方法

想定読者

Cocoonヘッダーのカスタマイズを行い方「Cocoonヘッダーでできるカスタマイズを全て知りたい。」

本記事は上記の方に向けて執筆しています。

本記事の内容

  • Cocoonヘッダー要素をカスタマイズ
  • Cocoonヘッダーロゴ画像をカスタマイズ

この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」というテーマに変更していますが、サブブログではCocoonを活用しています。

おにちゃん

ぜひ最後までご覧ください。

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

Cocoonテーマのヘッダー要素をカスタマイズ

Cocoonテーマのヘッダー要素は下記の項目で構成されています。

Cocoonテーマのヘッダー要素
  • レイアウト
  • 固定
  • 高さ
  • ロゴ
  • ロゴサイズ
  • キャッチフレーズの位置
  • 背景画像
  • 全体色
  • ヘッダー色
  • グローバルメニュー色
  • グローバルメニューの幅
おにちゃん

Cocoonの初期設置でこれだけのヘッダーカスタマイズを行うことができます。
本記事は、中でも人気のある項目を絞り込んで解説をしていきます。


Cocoonヘッダーレイアウトのカスタマイズ

Cocoonヘッダーレイアウトのカスタマイズ
Cocoonヘッダーレイアウトのカスタマイズ

まずは、Cocoonのヘッダーレイアウトをカスタマイズしていきましょう。

注意点:ヘッダーレイアウトはスキン側によって設定できない場合がございます。
おにちゃん塾がサブで運営しているCocoonサイトはスキンの影響で設定できません。

そのため、僕はセンターロゴ(デフォルト)を活用しています。

おにちゃん

基本的にトップメニューはデザインが良くないので、センターロゴをおすすめしています。
中でもセンターロゴ(スリムメニュー)がデザイン的には主流です。

ヘッダー固定項目

Cocoonのヘッダー項目には「ヘッダーの固定」があります。

ヘッダーの固定を簡単にいうと、追従メニューを意味しています。

おにちゃん

追従メニューは個人の好みですが、僕個人的には不要だと考えています。
なぜなら、追従メニューは読者の気をちらせてしまうから。

一度固定してみて、動きを確かめてみてください。
9割以上の方が要らないと判断するはずです。


Cocoonヘッダー高さのカスタマイズ

Cocoonヘッダー高さのカスタマイズ
Cocoonヘッダー高さのカスタマイズ

Cocoonのヘッダーでは高さを設定することができます。

デフォルト設定
デフォルト設定
300pxで設定
300pxで設定
おにちゃん

僕がCocoonサイトを運営する際は、ヘッダーの高さはデフォルトです。
あまり高さのあるヘッダーが好きではないので。

  • 高さ
    →PC用のヘッダー
  • 高さ(モバイル)
    →モバイル用のヘッダー

自分の好み通りカスタマイズしたい方は上記の項目に数字を入れてみましょう。
おすすめはPC:120、モバイル:80です。


Cocoonヘッダーのキャッチフレーズ設定

Cocoonヘッダーのキャッチフレーズ設定
Cocoonヘッダーのキャッチフレーズ設定

Cocoonのヘッダー設定でキャッチフレーズの配置を変更することができます。

  1. 表示しない
  2. ヘッダートップ
  3. ヘッダーボトム

僕は、表示しないタイプのブロガーなので、普段は表示しない項目にチェックを入れています。

表示しない
表示しない
表示する(ヘッダートップ)
表示する(ヘッダートップ)
おにちゃん

この部分も個人の好み次第なので、ご自身の願望通りカスタマイズを行いましょう。

ブログのキャッチフレーズを設定するとSEO対策に繋がる!?

よく聞かれる質問「ブログのキャッチフレーズはSEO対策に繋がるんですか」

この回答を下記の記事で詳しく解説しています。
タイトル通りの内容なのかどうかチェックしてみてください。


Cocoonヘッダー背景画像の設定

Cocoonヘッダー背景画像の設定
Cocoonヘッダー背景画像の設定

Cocoonではヘッダー背景画像を設定することができます。

ヘッダー背景画像を設定する
ヘッダー背景画像を設定する
ヘッダー背景画像
ヘッダー背景画像

このようにヘッダー背景画像を設定することで、デザイン性を高めることができます。

注意点:
ヘッダー背景画像のサイズによって、先ほど紹介した「ヘッダーの高さ」を変更する必要があります。
今回は、ヘッダーの高さを600にしていますが、デザイン性を意識したい方は150未満で抑えることを意識しましょう。


Cocoonヘッダーロゴ画像を設定する

先ほどまでで、Cocoonのヘッダーカスタマイズに必要な基本要素の解説は以上です。
ここからは、Cocoonユーザーの中でも特に要望の多かった「ヘッダーロゴ画像」について解説していきます。


ロゴ画像を設定しない方:Cocoonヘッダーロゴ色を変える

ロゴ画像を設定しない方は、下記の項目でデザインをカスタマイズしていきましょう。

  • ロゴエリア背景色
  • ロゴ文字色

一度適当に作ってみたデザインをご覧ください。

ヘッダー色を設定する
ヘッダー色を設定する
ヘッダー色をカスタマイズ
ヘッダー色をカスタマイズ

このように、変更されます。
ご自身が好きなデザインに合わせて、色を変更してみてください。


Cocoonヘッダーロゴ画像を設定する

Cocoonヘッダーロゴ項目の選択をクリックして使いたいロゴを選択しましょう。

Cocoonヘッダーロゴ画像を設定する
Cocoonヘッダーロゴ画像を設定する

設定が完了すると、正しくロゴが表示されます。

おにちゃん

ただ、これではサイズ感がマッチしていませんので、その点を修正していきましょう。


Cocoonヘッダーロゴ画像サイズは...

結論から言うと、好み次第です。
大きいヘッダーロゴ画像サイズが良い人は大きめに設定する。小さいヘッダーロゴ画像サイズが良い人は小さめに設定する。それだけです。

おにちゃん

僕個人的には、小さめが好きなので下記のサイズを活用しています。

400×150

このサイズだと、僕が希望するデザインになります。


Cocoonヘッダーロゴ画像作成はcanvaがおすすめ

Cocoonヘッダーロゴ画像を作成する場合はCanvaを使いましょう。

おにちゃん

僕が運営しているサイト全てのヘッダーロゴはCanvaで作成されています。

  • 画像サイズを指定できる
  • 透過背景
  • デザインの幅が広い

上記のメリットに加えて、14日間の無料トライアル期間があるので、お金をかけずに有料ツールで優れたデザインを作成することができます。

僕は、アイキャッチ作成や色々な画像処理で有料プランなのですが、ヘッダーロゴだけであれば、無料トライアル期間を活用してみてください。

Canva Pro
無料トライアル期間は14日間


まとめ:Cocoonヘッダーのカスタマイズ手順

ここまでで【Cocoon編】ヘッダーのカスタマイズ手順|サイズとロゴ作成する方法の解説は以上です。

Cocoonヘッダーのカスタマイズ手順
  • レイアウト
  • 固定
  • 高さ
  • ロゴ
  • ロゴサイズ
  • キャッチフレーズの位置
  • 背景画像
  • 全体色
  • ヘッダー色
  • グローバルメニュー色
  • グローバルメニューの幅
おにちゃん

本記事は以上です。
最後までご覧くださりありがとうございました。


Cocoonユーザー向けTwitterアカウント

おにちゃん塾の運営者(@onityanzyuku01)ではブログ関連の情報を随時発信しています。

  1. ブログ運営
  2. アフィリエイト収益化
  3. SEO対策含むWebマーケティング
おにちゃん

上記を知りたい方はぜひフォローしてください。


Cocoonではないテーマでブログ運営したい方

Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。

おにちゃん

今、稼いでいるブロガー達はこぞってSWELLを活用しています。

デザイン性+機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。

有料テーマに挑戦したい方はSWELLがおすすめです。


Cocoonを本格的にカスタマイズしたい方

→プログラミングを学びましょう。

Cocoon含む、WordPressを扱うためには下記の言語が必要です。

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
おにちゃん

おにちゃん塾で、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。

URLをコピーする
URLをコピーしました!
記事の内容
閉じる