元サラリーマンブロガーなつのプロフィール

当ブログおすすめのテーマ!


\\//

✔徹底的に表示速度にこだわった完璧なSEO対策のテーマ!

高機能なのに初めてブログを作る人でもカスタマイズがしやすいテーマ。
ブログ作成の欲しい機能がギュッと詰まった今一番人気のテンプレートです。
今なら5大特典「たった30記事で15万円稼いだ方法」やオリジナルデザインマニュアルその他豪華特典付き!
 
詳しい内容は下記のボタンでご確認ください!

Cocoon(コクーン)のヘッダー周りのカスタマイズ!コピペでできる!【WordPressテーマ】

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

ブログのヘッダーの役割は、訪れた読者の目を引くことや記事へのスムーズな導入などがあります。

もしあなたがブログを開いたときにセンスのよいヘッダーがあれば「おっ、なんか良い感じ」と良い印象を与えることができます。

Cocoonはシンプルでクールなイメージのテーマですが、さらに魅力が引き立つようなヘッダーを作ってみたいと思います。

 

Cocoon(コクーン)のデフォルトのヘッダー

まず、Cocoon(コクーン)の基本系のヘッダーをご覧ください。ここから少し違うイメージができるように作っていきます。

出典:Cocoon

 

この画面が、Cocoonの基本のヘッダー画面です。見た目には変更しなくても良いくらいシンプルでかっこいいヘッダーです。

この中をいくつかの要素に分けて設定をしていきます。

 

Cocoon(コクーン)のヘッダー完成図

このページではCocoonのヘッダー周りの設定をしていきます。すべてできればこの画像のようなヘッダーができあがるようになっています。

 

 

色番号等も添付してありますので、そのままコピペで使ってもらえばと思います。

 

↓ 芸大出身のなつが作ったTHE THORのアレンジデザインです。購入特典として差し上げています。

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!
今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

ガーリー

シンプル
オーガニック


※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。

⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

//今なら、なつ特製オリジナルデザインマニュアル付き!\\

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

Cocoon(コクーン)のヘッダーのカスタマイズ画面

Cocoonのカスタマイズはほぼ同じ管理画面でできるようになっています。ヘッダー部分ではお知らせやロゴなど他の要素も入ってくるので、すべて同じページでカスタマイズできませんがタブで分かれていますのでその都度変更していきましょう。

Cocoonをインストールすると以下のような設定画面が現れます。

Cocoon設定をクリックするとカスタマイズできるメニューが出てきます。

 


初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

 

Cocoon(コクーン)のヘッダーの基本設定 「全体」

Cocoonを使っていく上で全体的なものの設定をしておきます。ここで設定するのはテキストです。デフォルトでは少し大きめに見えていますので、小さくもできます。

▼ Cocoon設定 ⇒ Cocoon設定 ⇒ 全体

 

変更箇所

プレビューで全体的な大きさを見ながら調整していってください。

  • テキスト・・・メイリオ
  • テキストの大きさ・・・14px

 

必要に応じてテキスト色の変更もここでします。

 

Cocoon(コクーン)のヘッダーカスタマイズ 1. 「ロゴ」

ロゴはあらかじめ作っておいてください。大きなものでもここで調整できるようになっています。

▼ Cocoon設定 ⇒ Cocoon設定 ⇒ ヘッダー

 

ロゴのサイズ調整をここでやる場合には同じページのヘッダーレイアウト「センターロゴ」にしてください。

変更箇所

  • ヘッダーロゴ
  • ヘッダーロゴサイズ

 

自分で作ったロゴサイズの縦横比があわないので、どちらかを入力しもう一方を空欄にしておけば適切な縦横比で表示されます。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

Cocoon(コクーン)のヘッダーカスタマイズ 2. 「メニュー」

メニューをヘッダーに表示させますが、基本のメニューは設定しておいてください。メニューの設定は、外観で変更します。

▼ 外観 ⇒ メニュー

 

新規で作る場合には、名前を設定して左側の「メニュー項目を追加」の中からメニューに入れたいものを選んで設定します。

複数のメニューを作りたい場合には上部の「新しいメニューを追加しましょう」から作ります。

下の方にある位置の「ヘッダーメニュー」にチェックを入れ最後に「メニューを保存」をクリックします。

 

Cocoon(コクーン)のヘッダーカスタマイズ 3. 「おすすめカード」

AFFINGER5 /WING(アフィンガー5)やJINなどにもある「ヘッダーカード」のことです。ヘッダーの下に配置し、記事に興味を持ってもらう部分です。

▼ Cocoon設定 ⇒ Cocoon設定 ⇒ おすすめカード

 

  • おすすめカードの表示・・・どの範囲で表示するか設定
  • メニュー選択
  • 表示スタイル ・・・テキストをどう見せるか設定
  • カード余白
  • カードエリア左右余白

すべて設定できれば「変更をまとめて保存」をクリックします。

 

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

Cocoon(コクーン)のヘッダーカスタマイズ 4. 「通知」

ヘッダーのすぐ上にお知らせを配置できます。特別な連絡事項などがあればここで設定してください。

▼ Cocoon設定 ⇒ Cocoon設定 ⇒ 通知

 

  • 通知表示・・・通知エリアの表示にチェックで表示
  • 通知メッセージ
  • 通知URL
  • リンクの開き方
  • 通知タイプ

 

通知エリアの背景色・・・#f5e56b

最後に「変更をまとめて保存」をクリックします。

↓ Cocoonのカスタマイズのまとめです!インストールからブログ完成まで!

Cocoon(コクーン)のカスタマイズ方法と設定を丁寧に説明!使い方次第で初心者でもカッコよいブログに!【WordPressテーマ】

Cocoon(コクーン)のヘッダーカスタマイズ 5. 「アピールエリア」

ヘッダー画像の中で、説明文章や誘導ボタンなどがコンパクトに配置できる部分です。設定次第ではすべてのページにも表示できます。

▼ Cocoon設定 ⇒ Cocoon設定 ⇒ アピールエリア

 

  • アピールエリアの表示・・・どの部分に設置するか
  • 高さ
  • エリア画像
  • エリア背景色・・・画像があると反映されません
  • タイトル
  • メッセージ
  • ボタンメッセージ
  • ボタンリンク先
  • ボタンリンクの開き方
  • ボタン色

 

アピールエリア例

すべて設定すると以下の画像のようになります。

  • 画像 ⇒ Bg-Pattrens
  • ボタンの色・・・#e95464
  • 画像 ⇒ Bg-Pattrens
  • ボタンの色・・・#e95295

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

 

Cocoon(コクーン)のヘッダーカスタマイズ 6. 「グローバルメニューの背景色」

ヘッダーの設定でグローバルメニューを設置したらその背景色の変更もできます。必要ない場合はこの部分の設定は不要です。

▼ Cocoon設定 ⇒ Cocoon設定 ⇒ ヘッダー

グローバルナビメニュー色の設定をして「変更をまとめて保存」をクリックします。

グローバルメニュー背景色・・・#bed2c3

 

Cocoon(コクーン)のヘッダーカスタマイズ 7.「リセット」

カスタマイズをしていて、なんとなく気に入らなかったりあまりにも変更しすぎてどこを触ったかわからなくて元に戻したい時には「リセット」できるようになっています。

※ただし、アピールエリア等もリセットされて消えてしまいますのでご注意ください。

 

 

↓ このブログから大人気のTHE THOR(ザ・トール)を購入くださった方に特典をプレゼントしています。

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

 

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE・THOR

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

  おススメ!WordPressテーマ

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで大人気
  • 着せ替え機能でいろんな用途に使える
  • 会員フォーラムがある

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です