PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

Cocoon マイクロコピーでボタン近くの文字や吹き出しの作り方

スポンサーリンク

Cocoon マイクロコピーロゴ画像

こんにちは、解説ゾロです!

マイクロコピーって、何だ???

ですよね!

Webサイトやショッピングサイトなどで、登録ボタンや購入ボタンの近くに、チョット小さい字で「無料お試し」「先着10名様」「キャンセルOK」とか、見かけたことありませんか?、コレ、マイクロコピーです。

実は、この「マイクロコピー」があることで、次の行動(クリックなど)に移しやすいようにハードルを下げたり、背中をちょっと押したりする効果があり、マーケティングや広告などのコピーライティングには必須の手法といえます。

この手法が、Cocoonのマイクロコピーなら簡単に使えるのです!

今日は、WordPressテーマのCocoon マイクロコピーを超簡単に作る方法を実際の画像を見ながら丁寧に解説いたしますので、初めてでも今日から簡単にマイクロコピーを作ることができますので、一緒にマイクロしましょ!

前回の記事は、マウスポインターが一緒に撮れるスクショです!
Windowsのスクリーンショットでマウスカーソルを含める撮り方
マウスカーソル(マウスポインター)を一緒に含めて撮れるスクリーンショットの解説です。アプリも必要なくWindowsの標準機能でマウスカーソルを含めたスクショが撮れちゃいます。とっても丁寧に解説しますので簡単です。一緒にスクショしましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

実際の「マイクロコピー」デザイン例

文字の説明よりも実際にマイクロコピーを見ていただいたほうがわかりやすいので、ご覧ください。例えば、下記の「\\ このマウス、使ったらもう手放せません! //」や、タイムセール中!下にも表示できます!」の「吹き出し」が、Cocoon マイクロコピーというものです!(タイムセール中の場合ですが、笑)

こんな感じです!⇩ ←コレも コレも→ 、マイクロコピーです!
\\ このマウス、使ったらもう手放せません! //

タイムセール中!

下にも表示できます!

Cocoon マイクロコピーという機能は、画像で見ると「あっ、よく見るコレがマイクロコピーか!」と、わかりやすいですね!

スポンサーリンク

Cocoon マイクロコピーをテキストやブログカードで使う方法

マイクロコピーの使い方を広く知っておくと「チョットお得!」が増幅しますので、先にお得をお知らせします。

マイクロコピーは主に、webサイトなどのリンクボタンの近くで使われていますが、リンクボタン以外の「テキスト」や「ブログカード」周辺でも同じ手順で表示することができるという「お得」です。コレ、案外と使えます!

Cocoon マイクロコピーの吹き出しで作った「こんな感じです! ←コレも」と「マジか?笑!」や、Cocoonのブログカード中央に装飾した、\ もう、ほかのマウスは使えません!/です。(ホントにこのマウス最高なんです。笑!)

こんな感じです! ←コレも
マジか?笑!

Cocoon マイクロコピーはあなた様のアイディア次第で効果爆上がりも可能です!!!

実際に「WordPress」のサイトにマイクロコピーを表示させるとなると、それなりのコード(HTML・CSS)が必要になりますが、Cocoon マイクロコピーであればとても簡単に色々な場面でチャチャっとマイクロコピーを作ることができてしまいます。

スポンサーリンク

「登録ボタン」で解説

それでは、イメージが湧いたところで、WordPressでいつも皆さんが記事を書いている「投稿を編集」の「ビジュアル」画面から始めます。今日は「登録」を促すマイクロコピーを作ってみます。マイクロコピーの作り方表示位置をわかりやすく解説できますように、仮の登録ボタンを表示します。
のように「登録はこちら」という仮の「リンクボタン」を設定してみます。そして、ボタンの上部に、
のように、マイクロコピーの言葉にする「登録は無料です!」という文言を入力してみます。

Cocoon マイクロコピー登録ボタンで解説

マイクロコピーを左側に表示

今入力した「登録は無料です!」を、マイクロコピーでボタンの左上に表示してみます。
のように「登録は無料です!」をマウスかカーソルで選択します。次は、上の方にある、
の「スタイル」をクリックしてください。すると、メニューが表示されますので、
の「マイクロコピー」にマウスポインターを乗せると、新たにメニューが表示されますので、
の「テキスト(上)」にマウスポインターを移動すると、またまたメニューが表示されますので、
の「左側」をクリックしてください。

Cocoon マイクロコピーを左側に表示設定

フォントサイズやカラーも変更可能

すると、リンクボタンの左上に先ほどの、
の「登録は無料です!」が、小さい文字で表示されました。コレ、マイクロコピーです。簡単にできちゃいました・・・よね。笑!でも、少し文字が小さいと思ったら、
で「フォントサイズを変更」できます。
で文字の「色も変更」することが可能です。

Cocoon マイクロコピーのフォントサイズやカラーの変更方法

マイクロコピーを中央に表示(装飾文字)

今度はリンクボタンの中央の位置にマイクロコピーを表示させてみます。同じように、
は「登録は無料です!」を選択します。今回は効果が上がるようにスラッシュを使って、\\ 登録は無料です! //と、装飾し、文字色を赤に変更してみました。次は、
の「スタイル」をクリックして、
の「マイクロコピー」にマウスポインターを乗せて、
の「テキスト(上)」の上にもマウスポインター乗せて、
の「中央」をクリックしてください。

Cocoon マイクロコピーをボタン中央の表示方法

すると、リンクボタンの中央に、
の装飾した、\\ 登録は無料です! //が表示されました。ちょっとリンクボタンをクリックしたくなりました・・・よね。笑

Cocoon マイクロコピーが中央に表示された

マイクロコピーを右側に表示

次は、右端です。
で「選択」して、
で「スタイル」をクリックして、
で「マイクロコピー」から右に移動して、
の「テキスト(上)」で、
の「右側」をクリックです。

Cocoon マイクロコピーを右側の表示方法

ハイ、今度は右端にマイクロコピーが表示されました。

Cocoon マイクロコピーが右側に表示された

マイクロコピーの「吹き出し」を中央に表示

もう慣れてきたと思いますが、今度は「吹き出し」のマイクロコピーを中央に表示してみます。
は同じで、
は「吹き出し(上)」から、右に移動して、
の「中央」をクリックしてみます。

Cocoon マイクロコピーの吹き出しを中央に表示する設定

すると、中央に吹き出しの「登録は無料です!」が表示されました。文字色を赤にしてみます。

Cocoon マイクロコピーの吹き出しが中央に表示

マイクロコピーの「吹き出し」を下中央に表示

こんな感じで、もう見なくても(それムリだろ、笑)できそうですが、最後に「吹き出し」のマイクロコピーをボタンの下中央に表示してみます。
まで同じで、
で「吹き出し()」から、
の「中央」をクリックです。

Cocoon マイクロコピーの吹き出しを下中央に表示する方法

リンクボタンの下に「吹き出し」が表示されました。これも赤にしてみます。

Cocoon マイクロコピーの吹き出しが下中央に表示された

もう「Cocoon マイクロコピー」は完璧ですね!お疲れさまでした。

まとめ

「登録ボタン」や「購入ボタン」周りで使うCocoon マイクロコピーはもちろんですが、冒頭の「テキスト」や「ブログカード」などにも使える広がりのある機能です。

そして、WordPressのテーマであるCocoonなら長いコードを使うことなく、とても簡単にマイクロコピーを使うことができますので、使わない手はないかなと感じます。

読まれた方が食い付くマイクロコピーを作って、あなた様だけのオリジナルブログでお楽しみくださいませ!

関連記事:Cocoonでプルダウンの階層メニュー幅を変更する方法
関連記事:Cocoonでプルダウンメニューの「色」を変更する方法
関連記事:ボックスメニューが簡単にできた!Cocoonカスタマイズ

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

タイトルとURLをコピーしました