Cocoonのヘッダーをカスタマイズする方法【差別化してSEO対策も】

Cocoon

 

「Cocoonのヘッダーをカスタマイズしたい」

「ヘッダーサイズのおすすめは?」

「誰とも被らないオリジナルヘッダーを作りたい!」

 

こんな悩みを解決します。

 

この記事を書く僕は、ブロガー兼WEBライターとして稼ぐ大学生。

Twitter(kan_blogger)も運営中。

 

WordPressでブログを始めてよくおすすめされるCocoonですが、サイトの第一印象であるヘッダーのカスタマイズ方法を知りたいですよね。

 

そこで今回は、Cocoonのヘッダーをカスタマイズする方法と唯一無二のオリジナルヘッダーを作る方法を紹介します。

 

 

記事の内容

  • ヘッダーに好きな画像を設定する方法
  • ヘッダーを好きな高さに変更する方法
  • ヘッダー画像の幅が合わない時
  • ロゴの設定方法
  • キャッチフレーズの設定方法
  • 【差別化】世界に一つだけのオリジナルヘッダーの作成

 

この記事を読み終わると、Cocoonのオリジナルヘッダーを作ってカスタマイズする方法が分かります。

 

Cocoonのヘッダーに好きな画像を設定する方法

画像に alt 属性が指定されていません。ファイル名: undraw_Photo_re_5blb.png

ヘッダーに好きな画像を設定する手順はこちら

  1. ダッシュボード
  2. Cocoon設定
  3. ヘッダー
  4. ヘッダー背景画像から選択
  5. 変更をまとめて保存

 

分かりやすく実際の画面付きで紹介します。

 

1、ダッシュボードのCocoon設定→ヘッダー

画像に alt 属性が指定されていません。ファイル名: feb1ec6977ba3a9e787b306f4b71cd8b-1-1024x576.png

 

2、下へスクロールして「ヘッダー背景画像」の「選択」から好きな画像を選択

画像に alt 属性が指定されていません。ファイル名: 8ba15a6a58f3ed1c844e722acdf98a94-1024x576.png

 

3、最後に「変更をまとめて保存」を押して完了

画像に alt 属性が指定されていません。ファイル名: 25ec99be61e8e1af9e5dba79365a35c1-1024x576.png

 

筆者 カン
 

かなり簡単ですね!

Cocoonのヘッダーを好きな高さに変更する方法

画像に alt 属性が指定されていません。ファイル名: undraw_Online_party_re_7t6g.png

ヘッダーを好きな高さに変更する手順はこちら

  1. ダッシュボード
  2. Cocoon設定
  3. ヘッダー
  4. 高さ←ここだけ違う
  5. 変更をまとめて保存

 

実際の画面はこちら

 

Cocoon設定→ヘッダーの「高さ」から好きな高さに変更

画像に alt 属性が指定されていません。ファイル名: b87385a6e2c1bd560a04daa6e0cf700a-1024x576.png

先ほどと同じCocoon設定の「ヘッダー」の中にある「高さ」から変更できます。

筆者 カン
 

当サイトの場合、モバイル版は10px下げていますが、ここは好みで問題ありません!

「変更をまとめて保存」も忘れずに押して完了です。

 

 

おすすめの高さは?

 

 

筆者 カン
 

ブログのデザインによるので一概には言えませんが、

シンプルなサイトは100前後が多いです!

 

 

ヘッダー画像の幅が合わない時

画像に alt 属性が指定されていません。ファイル名: undraw_Profile_data_re_v81r-1024x676.png

 

画像が引き延ばされて変になる!

 

筆者 カン
 

画像の幅が足りていません!

 

じゃあ幅はどれくらいにすればいいの?

 

結論おすすめは「1400px」です。

 

なぜなら画像が短すぎると引き延ばされますが、1400を大きく超えると入らなくなるからです。

 

せっかくオリジナルのヘッダーを作っても「サイズが合わない!」とならないように

自分で作る時も外注する時も幅を忘れることなく伝えましょう。

 

外注ってどうするの?

 

筆者 カン
筆者 カン

イチオシはココナラです!

 

完全オリジナルヘッダーを作る方法は後半の「世界に一つだけのオリジナルヘッダーを作ろう!」で紹介しています。

 

ロゴの設定

画像に alt 属性が指定されていません。ファイル名: undraw_discoverable_xwsc.png

次はロゴの設定方法一覧はこちら

(気になるリンクを押すとページ内を飛ぶことができます。)

 

ロゴの文字を変える方法

 

注意点:ロゴの文字を変えるという事はサイトのタイトルを変える事になります。

    ヘッダー部分以外にも変わる部分が出る事を覚えておきましょう。

 

ダッシュボード→設定→一般→サイトのタイトル

画像に alt 属性が指定されていません。ファイル名: 073cfbc17ce9f8888fb2781318b70678-1024x576.png

 

最後に「変更を保存」を押して完了です。

 

ロゴの文字色を変える方法

「Cocoon設定」→「ヘッダー」→「ヘッダー色(ロゴ部)の「ロゴ文字色」から選択

 

「Cocoon設定」→「ヘッダー」から下へスクロール

画像に alt 属性が指定されていません。ファイル名: 6ecbe578f28e40795ed0ba9e0e3895e6-1024x576.png

 

「ヘッダー色(ロゴ部)の「ロゴ文字色」から好きな色を選択

画像に alt 属性が指定されていません。ファイル名: 2f638041b4b7b80105947802fb3c8bf0-1024x576.png

最後に「変更をまとめて保存」を押して完了です。

 

オリジナルロゴを入れる方法

 

ヘッダーに文字じゃなくてロゴを入れたい!

 

その場合も「Cocoon設定」から「ヘッダー」までは同じです。

 

「ヘッダーロゴ」の「選択」から好きな画像を選択

画像に alt 属性が指定されていません。ファイル名: 61fca7a50804016b6877dc7bf6318290-1024x576.png

 

「変更をまとめて保存」を押して完了です。

 

キャッチフレーズの設定方法

画像に alt 属性が指定されていません。ファイル名: undraw_Updated_re_u4yh-1024x739.png

 

キャッチフレーズの設定方法一覧はこちら

ヘッダーのキャッチフレーズを変える方法

ヘッダーにキャッチフレーズ表示設定を変更する方法

 

ヘッダーのキャッチフレーズを変える方法

「ダッシュボード」→「設定」→「一般」→「キャッチフレーズ」から好きな言葉を入力。

画像に alt 属性が指定されていません。ファイル名: 7b92cbe4ab6a87c561b815098daf8635-1024x576.png

最後に「変更を保存」を押して完了です。

 

 

ヘッダーにキャッチフレーズ表示設定を変更する方法

 

「Cocoon設定」→「ヘッダー」→「キャッチフレーズの配置」から選択。

画像に alt 属性が指定されていません。ファイル名: 7e01557263843f554a851b15742eeef0-1024x576.png

 

2つの違い

  • 「ヘッダートップ」:ロゴの上にキャッチフレーズを表示
  • 「ヘッダーボトム」:ロゴの下にキャッチフレーズを表示

 

最後に「変更をまとめて保存」を押して完了です。

 

【差別化】世界に一つだけのオリジナルヘッダーの作成

画像に alt 属性が指定されていません。ファイル名: undraw_Just_saying_re_kw9c.png

他の人と被らない世界に一つだけのオリジナルヘッダーを作る方法はこちら

  • Canva(無料)で作成する。
  • ココナラ(登録無料)で作成依頼する。

 

筆者 カン
 

何ができるのかを1つずつ紹介します!

 

Canvaで作成する

Canvaは無料で様々な形に合わせたデザインを作る事が出来ます。

 

主な特徴としては

  • 無料で使える
  • テンプレートを使って素人でもおしゃれなデザインが作れる
  • パソコンなしでも使える

 

などの特徴があり、無料で作れるデザインサイトではブロガーの中でもかなり人気が高いです。

 

オリジナルのデザインを無料で作りたい!と思う方は「Canva」一択で問題ありません。

 

Canvaのホームページはこちら

 

アプリはこちら

Canva-名刺,ロゴ,チラシ,サムネイル,ポスター作成

Canva-名刺,ロゴ,チラシ,サムネイル,ポスター作成

Canva無料posted withアプリーチ

 

しかし、人気が高いためデザインが被る可能性もデメリットの一つです。

 

筆者 カン
 

誰とも被らなくてかっこいいオリジナルを作りたい時は、

ココナラで依頼する事をおすすめします!

 

ココナラで作成依頼する

ココナラとは、自分の特技やスキルを売り買いできるサービスです。

 

主な特徴としては

  • 会員数100万人以上
  • 案件数が豊富
  • サポートも充実
  • やり取りは非公開の匿名でも可能
  • 決済はサイトが仲介してくれて安心

 

など、様々なスキルを極めた人達によって作品売買がされるので品質が高く、インフルエンサーや有名ブロガーの人達は外注しているケースが多いです。

 

なんで初心者ブロガーでもお金を払ってまで外注する必要があるの?

 

筆者 カン
筆者 カン

初心者ブロガーがブログを辞めてしまう王道パターンがあるからです!

 

【継続こそ大切なブログを初心者が辞めてしまう王道パターン】

初心者ブロガー「よし、ブログを開設できた!ヘッダーのデザインはこんな感じが良いかな...アイコンは一生変えない方が良いからよく考えよう...」

↓(記事が書けない

「あれ全然記事が書けていない、なんか収益も出てないしツライな...」

↓(大切な記事を書けずに収益も出ずモチベが下がる

「うーん、収益でなさすぎ!やる気なくしたから辞める!」

 

とは言え、ブログは初期費用が少なくて誰でも始められますが、最低限の初期投資をすることで収益化までの道のりを加速させてくれて早く元が取れます。

 

無料で登録できるので、まだ登録していない方はどうぞ

 

まとめ:Cocoonのヘッダーをカスタマイズして他にないオリジナルヘッダーを作ろう!

画像に alt 属性が指定されていません。ファイル名: screenshot-8.jpg

今回はCocoonヘッダーのカスタマイズ方法について紹介しました。

 

まとめると

「ダッシュボード」→「Cocoon設定」→「ヘッダー」

オリジナルヘッダーを作るなら「Canva」か「ココナラ

 

Cocoonのヘッダーをカスタマイズするだけでサイトの印象が変わり離脱率が大きく改善される場合も少なくありません。

 

筆者 カン
 

それくらい見た目は大事なので、記事を書くことが第一ですがオリジナルヘッダーも作っておきましょう!

 

人気記事

未成年でも登録出来るアフィリエイトASPと確定申告の注意点
「未成年でもできるアフィリエイト(ASP)を教えて!」「ついでにおすすめも教えて!」「アフィリエイト(ASP)の選び方は?」こんな悩みを解決します。今回は未成年でもできるアフィリエイトを6選紹介します。
Cocoon
スポンサーリンク
シェアする
カンをフォローする
KanBlog

コメント

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