【Cocoonカスタマイズ編】初心者がアピールエリアを設定する方法

想定読者

Cocoonのアピールエリアをカスタマイズしたい方「初期設定からカスタマイズするまでの流れを詳しく知りたい。」

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

本記事の内容

  • Cocoonアピールエリアとは何なのか
  • Cocoonアピールエリア初期設定
  • Cocoonアピールエリアのカスタマイズ

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

おにちゃん

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

記事の内容

サイト運営者

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

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

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

Cocoonアピールエリアとは

Cocoonアピールエリアとは
Cocoonアピールエリアとは

Cocoonのアピールエリアとは、読者が思わず見てしまう場所です。
上記の画像のように設定することで、ブログ初心者でも簡単に読者にアピールすることができます。

おにちゃん

アピールエリアを自力で実装するとなるとかなり大変ですが、
Cocoonでは初期機能としてアピールエリアが実装されています。

初期機能+カスタマイズを上手く駆使して自分好みのアピールエリアデザインを作り上げてみてください。


Cocoonアピールエリアのカスタマイズ手順

Cocoonアピールエリアのカスタマイズ手順は下記の通りです

Cocoonアピールエリアのカスタマイズ手順
  1. 高さ
  2. エリア
  3. テキストメッセージ
  4. ボタン

まずは、WordPress管理画面<アピールエリアへ移動しましょう。

Cocoonアピールエリアのカスタマイズ手順
Cocoonアピールエリアのカスタマイズ手順

アピールエリアの表示には7種類あります。
Cocoonユーザーの多くが「フロントページ(トップページ)のみ」or「全ページで表示」を選択していました。

おにちゃん

僕は「フロントページのみ」で設定しています。


アピールエリア:高さ

アピールエリア:高さ

上記の項目で、Cocoonアピールエリアの高さをカスタマイズすることができます。

デフォルト
デフォルト
Max
Max

アピールエリアの高さを設定することで、アピールポイントの視覚性を高めることができます。

おにちゃん

僕は普段300程度で設定しています。


アピールエリア:エリア

アピールエリア:エリア
アピールエリア:エリア

Cocoonアピールエリアでは、画像や背景色を設定することができます。

  • 画像を使用する→エリア画像
  • 画像を使用しない→エリア背景色
背景画像を設定
背景画像を設定
背景色を設定
背景色を設定

アピールエリアですので、画像を使う使わないのどちらでも目立つようにデザインを作成しましょう。


アピールエリア:テキストメッセージ

アピールエリア:テキストメッセージ
アピールエリア:テキストメッセージ

テキストメッセージを活用したい方は、「テキストエリア表示」の項目にチェックを入れましょう。

  • タイトル:アピールエリアのメインテキスト部分
  • メッセージ:アピールエリアのサブテキスト部分
おにちゃん

上記を正しく設定できると下記の画像のように表示することができます。

アピールエリア:テキストメッセージ
アピールエリア:テキストメッセージ


アピールエリア:ボタン

アピールエリア:ボタン
アピールエリア:ボタン

Cocoonアピールエリアでは、ボタンをカスタマイズすることができます。

  • ボタンメッセージ
    →例:お問い合わせ
  • ボタンリンク先
    →例:https::/〇〇/contact
  • ボタンの開き方
    →おすすめは_blank
  • ボタン色
    →自分の好み次第
ボタン設定を行う
ボタン設定を行う


【CSS編】Cocoonアピールエリアのカスタマイズ

CSSを活用したカスタマイズは自己責任でお願いします!

CSS編|Cocoonアピールエリアのカスタマイズ
  • タイトルとテキストの色を変更する
  • テキストに影を入れる
  • ボックスに影を入れる


タイトル・テキスト色のカスタマイズ

.appeal-title {
	color: black;
}

.appeal-message {
	color: black;
}

上記のblack部分に好きな色やカラーコードを設定することで、好きなテキストカラーにカスタマイズすることができます。

おにちゃん

上記のclass名を使うと、テキスト色だけでなく、色々なデザインカスタマイズが可能です。


ボックスデザインのカスタマイズ

ボックスデザインのカスタマイズ
ボックスデザインのカスタマイズ

画像のように、簡単なコードでボックスデザインを変更することができます。

.appeal-content {
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}


まとめ: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をコピーしました!
記事の内容
閉じる