Cocoon（コクーン）の使い方！見出し・枠・ボックスの出し方は？

才能覚醒プログラムの参加者さんが、LINE登録用のLP（ランディングページ）を書いてるの。そこで出た疑問にお答えするわね。

色々触ってみよう！Cocoon（コクーン）の使い方

「ワードプレスが初めてなので、ボックスなどの使い方を覚えたい」とのこと。

すばらしい意気込みだわ！その調子よ。

結論から言うと、「色々触ってみよう！」ということなんだけど、ザックリと簡単な使い方だけお教えしておくわね。

とくに、LPの見栄えをよくする、見出し、枠、ボックスを付けるあたりよね。

プラグインの設定をする：Cocoon（コクーン）の使い方

才能覚醒プログラムに参加してるメンバーは、Advanced Editor Tools のプラグインを入れてるわね？

まず始めに、このように設定してね。

設定→Advanced Editor Tools

そして、下のように、私と同じように設定してね。

必要に応じて、あなたがよく使うボタンを、上に追加してもいいのよ。

見出しの付け方：Cocoon（コクーン）の使い方

まず、見出しの付け方ね。

見出しっていうのは、こういう、オレンジの部分のことね。
↓ ↓ ↓ ↓ ↓ ↓ ↓

色は、オレンジじゃなくても、自分の好きな色を選ぶことができるわ。あなたのテーマカラーを決めておくといいわね。

こういう見出しが入ることで、記事全体が読みやすくなるの。

もちろん上手い見出しの付け方があるので、それをマスターしていきつつ、まずは習うより慣れろよ。

ちなみに、上の薄い水色の枠は、こうやって出すのよ。
↓ ↓ ↓ ↓ ↓ ↓ ↓

スタイル→ボックス（アイコン）→補足情報

他にも色んな色や意味のボックスがあるわ。目的に合わせて、選んでみてね。

薄い色のボックス：Cocoon（コクーン）の使い方

下の画像のように、薄いグリーンのボックスを使うには、どうすればいいのか説明するわね。

カーソルを、次の順に合わせて、最後にサクセスを押すの。

スタイル→ボックス（案内）→サクセス

すると、背景が薄～いボックスが表れるわよ。

ちなみに、赤の太字は、どうやって出すかというと、こうすればOK。

反転させ→B→赤色

Cocoon（コクーン）の枠やボックス使い方

私がよく使う、赤枠の出し方を紹介するわね。

例えば、こういう赤色の「POINT」っていう枠を付けたい時ね。
↓ ↓ ↓ ↓ ↓ ↓ ↓

こうやって出すのよ。

スタイル→ボックス（タブ）→ポイント→赤色

まぁ、こんな風にして、色々な枠やボックスがあるから、まずは自由に使ってみてね。

上手くなるコツは、習うより慣れろ、よ。

ちなみに、上のような黄色のマーカーは、こうやって出すの。
↓ ↓ ↓ ↓ ↓ ↓ ↓

スタイル→マーカー→黄色マーカー

読みやすい色とは？Cocoon（コクーン）の使い方

以上、ザックリと枠やボックスなどの出し方を説明しました。

ただ、くれぐれも気を付けて欲しいポイントがあるの。それはね、

ってことよ。

久美子流ライティングスキルにも、色数のことは書いてるんだけど、あまり色の種類が増えると、ゴチャゴチャして見にくくなるのね。

色んな枠やボックスが使えるようになってきて楽しくなってくるんだけど、気分次第で色を変えてはいけないの。

読者が読みにくくなるし、それって離脱の原因にもなるじゃない？離脱って、ページを読むのを止めるってことね。

私のコンテンツでは、黒、赤、黄色、青、緑、紫…と使っているけど、それぞれ、ルールを決めて使ってるの。例えば、赤は重要、青はNG、緑は提案、など。

あなたも、自分なりのルールを決めて、色数を限定してみてね。

まとめ

いかがでしたか？

枠やボックスは、読みやすくするためのものですが、ルールを決めて使わないと、カラフルになってしまい、かえって読みにくくなります。

自分なりのルールを決めて使えば見やすくなるので、ぜひ練習してみてね。