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

想定読者

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

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

本記事の内容

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

エコおじい

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

Cocoonアピールエリアとは

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

エコおじい

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

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

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

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

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

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

エコおじい

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

アピールエリア：高さ

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

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

エコおじい

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

アピールエリア：エリア

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

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

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

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

エコおじい

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

アピールエリア：ボタン

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

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

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

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

.appeal-title {
	color: black;
}

.appeal-message {
	color: black;
}

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

エコおじい

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

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

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

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

WordPressカスタマイズ外注したい方

カスタマイズを外注したい方は「ココナラ」がおすすめです。

このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。

先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。

1分以内に完了！無料会員登録はこちら

まとめ：Cocoonアピールエリアのカスタマイズ

ここまでで「【Cocoonカスタマイズ編】初心者がアピールエリアを設定する方法」の解説は以上です。

エコおじい

本記事は以上です。
Cocoonのカスタマイズを本格的に行いたい方は下記の記事を参考にしてみてください。

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

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

エコおじい

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

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

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

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

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

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

エコおじい

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