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

Cocoonのトップページを作成してみる!【WordPressテーマ】

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

Cocoonは機能が多いWordpressテーマで、手を加えていくとセンスのよいデザインにもできますし「スキン」と呼ばれる着せ替えの機能もあります。

もしあなたが初心者なら、スキンをそのまま活用しても良いですが、せっかくなら自分自身のデザインを楽しんでもよいでしょう。

Cocoonのトップページの作り方をお伝えしていきます。

Cocoonのトップページで使える機能(抜粋)

まずは、Cocoonのトップページでどんなことができるのか確認しておきましょう。機能を確認すると自分でも応用がきくようになってきます。

 

このトップページを作る設定方法を説明していきます。もちろん、上部タイトルにロゴを入れたり色を調整したりできますので、

 

ヘッダー部分の調整(画像の1番~2番)

  • ヘッダーのレイアウト
  • ヘッダーの高さ調整
  • ヘッダーの高さ調整(モバイル)
  • ヘッダーロゴ 設定
  • ヘッダーロゴ サイズ
  • キャッチフレーズの配置
  • ヘッダー背景画像
  • ヘッダーの全体背景色
  • ヘッダーの全体文字色
  • ヘッダーロゴエリア背景色
  • ヘッダーロゴエリア文字色

 

グローバルナビの調整(画像の3番)

  • グローバルナビメニュー色
  • グローバルナビテキスト色

 

アピールエリア(画像の4番)

  • アピールエリアの高さ
  • エリア画像の背景
  • エリア画像の背景色
  • テキストエリアタイトル
  • テキストエリアメッセージ
  • ボタンテキスト
  • ボタン色

 

おすすめカード(画像の5番)

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

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

ガーリー

シンプル
オーガニック


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

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

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

【初心者必見!】THE THOR(ザ・トール)の8大特典!購入の割引についても調査!【WordPressテーマ】

※ヘッダーの画像は、写真ACとイラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

Cocoonのトップページを作成

この章からは、実際にCocoonのトップページを作成していきます。グローバルナビやおすすめカードの設定についてはメニュー設定を済ませている前提でお伝えしていきます。

 

ヘッダー部分の作成

画像の上部、グローバルナビより上の範囲の設定をしていきます。タイトルの部分にロゴを配置することも可能ですが、今回はタイトル(テキスト)としています。

ロゴ設置も同じところで可能ですので、ロゴを設定したい方はここで操作してください。

 

  1. ヘッダーのレイアウト
  2. キャッチフレーズの配置
  3. ヘッダー背景画像
  4. ヘッダーロゴ部分の色

 

Cocoonのトップページ作成 1-1 「ヘッダーのレイアウト」

ヘッダーのレイアウトでは、タイトルやグローバルナビの位置を調整します。レイアウトの調整によってグローバルナビの下にヘッダーをもってくるような配置にもなります。

センターロゴ(デフォルト)

センターロゴ(トップメニュー)

 

センターロゴ(スリム)

センターロゴ(スリムトップメニュー)

グローバルナビがスリムになったり、上部に配置させたりとこの部分の操作では見た感じがかなり変わります。

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

【初心者必見!】THE THOR(ザ・トール)の8大特典!購入の割引についても調査!【WordPressテーマ】


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

 

ヘッダーのレイアウトの調整

ヘッダーのレイアウトの調整はCocoonの管理画面で行います。

▼ Cocoon設定画面 ⇒ ヘッダー

このヘッダーレイアウトという部分で選び、最後に「変更をまとめて保存」をクリックします。

 

Cocoonのトップページ作成 1-2 「キャッチフレーズの配置」

トップ画像の中の「aiueo」となっている部分がキャッチフレーズです。キャッチフレーズを入力しておけばヘッダーのトップ又は、ボトムに配置できます。

キャッチフレーズを表示させるには3つの設定が必要となります。

  1. キャッチフレーズを入力
  2. キャッチフレーズを表示する設定
  3. ヘッダーに設置

 

1. キャッチフレーズを入力

まずは、キャッチフレーズを入力していきます。

▼ 外観 ⇒ カスタマイズ ⇒ サイト基本情報

この部分で、タイトルとキャッチフレーズを入力し「公開」をクリックします。

 

2. キャッチフレーズを表示させる設定

キャッチフレーズを表示させるための設定をします。ここからはCocoonの管理画面で設定します。

▼ Cocoon設定画面 ⇒ タイトル

「フロントページタイトル」の部分で、「サイト名 | キャッチフレーズ」にチェックを入れ、「変更をまとめて保存」をクリックします。

 

3. ヘッダーに設置

キャッチフレーズを上記に設置するための設定をしていきます。

▼ Cocoon設定画面 ⇒ ヘッダー

「キャッチフレーズの配置」部分を「ヘッダートップ(デフォルト)」にし変更を保存をクリックします。

下に配置したい場合には、ここでヘッダーボトムにしてください。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
※今なら、8大購入特典をお付けしています!

Cocoonのトップページ作成 1-3 「ヘッダー背景画像」

ヘッダーを画像にするのか、色を入れるのかは好みによりますが今回は画像を入れてみます。もし、ヘッダーに色がない方が良い場合にはここは触らないで良いですし、色をなにか設定したい場合には同じ画面で設定します。

▼ Cocoon設定画面 ⇒ ヘッダー

Cocoonのトップページ作成 1-4 「ヘッダーロゴ部分色」

ちなみに、ヘッダーに画像を入れず背景色を入れたい場合には次の操作をしてください。

▼ Cocoon設定 ⇒ ヘッダー

ヘッダー全体色の部分に好きな色を配置し変更を保存にします。

すると以下のような色になります。

 

Cocoonのトップページ作成 「アピールエリア」

ヘッダー画像の部分にアピールエリア(テキストやボタンの構成になっている部分)の設定をしていきます。

 

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

「エリア画像」の部分に背景画像を設置します。

 

「テキストエリア表示」の「テキストメッセージエリアを表示する」にチェックを入れます。

タイトル、メッセージ、ボタンメッセージ、ボタンリンク先、ボタンの色を設定して変更を保存をクリックします。

全部設定できたら以下のようになります。

ちなみに、この画像は、イラストACの「背景」よりダウンロードしています。

  • ボタンの色: #e95464
初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
※今なら、8大購入特典をお付けしています!

Cocoonのトップページ作成 「おすすめカード」

おすすめカードは他のWordpressテーマにもあります。AFFINGER5ならヘッダーカードという名前で標準装備ですし、JINにもあります。

この部分で表示させるメニューを選ぶのですが、最初にメニュー画面で表示させたいメニューを構成しておくことになります。

  1. メニュー設定
  2. おすすめカード設定

 

1. メニュー設定

ここでは、通常通りのメニュー設定をします。

▼ 外観 ⇒ メニュー

 

メニューのタイトルを入力し、左にある項目を右のメニュー構造に配置します。今回は4つの記事を配置しました。

メニュー設定については特になにもする必要はありません。

 

2. おすすめカード設定

メニューが完成したら、次におすすめカードの設定をしていきます。

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

まずは、メニュー選択をします。先ほどメニュー画面で作ったメニュー名を選びます。次にどんなスタイルにするのか表示スタイルを選びます。

どんな風になるのか画像を確認したい場合には、表示スタイルのラジオマークの右に画像のアイコンがあります。

このアイコンにカーソルを持っていくと、スタイルが表示されますので確認します。

スタイルそのままでも構わないのですが、画像がピッタリとくっつく形になるので下の「カード余白」の「おすすめカード毎に余白を儲ける」にチェックを入れ最後に変更を保存をクリックします。

Cocoonのトップページ作成  まとめ

Cocoonのトップページはアピールエリアとおすすめカードがあるとかなり華やかに見えます。もちろん画像のみにしてテキスト無しなど工夫をすればあなたのブログにピッタリになりますので、調整していってもらえばと思います。

 

↓ 当ブログからWordpressテーマTHE THORを購入くださった方に特典をプレゼントしています。

【初心者必見!】THE THOR(ザ・トール)の8大特典!購入の割引についても調査!【WordPressテーマ】

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

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

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

 

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

 

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

 

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

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

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

1. 検索上位を目指せる

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

 

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

 

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

 

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

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

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

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

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

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

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

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

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

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

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

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


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

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備

 

シェアしてね!

コメントを残す

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