【THE THOR】ボタン用のマイクロコピーをCSSで作ったよ!

マイクロコピーとは、ボタン周りなどに短い文章を表示させてユーザーの行動を促す手法のことです。

例えば、こんな感じのボタンを見たことありませんか?

\マイクロコピー/
マイクロコピー

ボタン周りの小さな補足情報が、ユーザーの決断をポジティブに促す効果があるそうです。

なんて素敵な効果なんだ!

 

私もさっそく導入しようと思いましたが、当サイトのWordPressテーマTHE THORにはそうした機能はありませんでした…。

ということで、CSSでカスタマイズして作ってみました。

コピペOKです(システムに影響するほどの大それたことはしてませんが、自己責任でお願いします)。

当サイトでの使用例

目指しているのはこんなイメージです。

\マイクロコピー上側/
マイクロコピー下側

当サイトの記事のなかで、はこんな風にマイクロコピーを使っています。

 

該当記事はこちらですので、雰囲気だけでも掴んでいただければと思います。

関連記事

本記事の内容: U-NEXTの31日間無料トライアルに申し込んでみました。 話題の映画やお気に入りドラマを観たいけど、レンタルビデオ店に行くのは面倒…。 そんな不便を解消するのがVOD! 自宅で最新動画を楽しめる動画配信サービ[…]

追加CSSに以下をコピペ

ではいよいよ、マイクロコピーを作っていきます

まず、以下のコードを追加CSSにコピペして下さい。

文字色・大きさ・ボタンとの距離は、個人的感覚でベストだと思う状態にしています。

ボタンの上下にマイクロコピーを付けるシーンを想定していますが、上または下が不要であれば該当部分を削除して下さい。

/*マイクロコピー*/
/*マイクロコピー上側*/
.micro-copy-top{
text-align: center;
color: #E1344C; /*文字の色*/
font-size: 0.85em; /*文字の大きさ*/
position:relative;
top: 19.5px; /*ボタンとの距離*/
}
/*マイクロコピー下側*/
.micro-copy-bottom{
text-align: center;
color: #E808080; /*文字の色*/
font-size: 0.75em; /*文字の大きさ*/
position:relative;
bottom: 17.5px; /*ボタンとの距離*/
}

もちろん、クラス名を変更しても構いません。

エディタでクラス名を指定

WorsPressエディタでクラシックを選択して、マイクロコピー部分に対して以下のようにクラス名を指定してください。

なお、クラス名の宣言はdivタグのなかで行ってください。実験したところ、追加CSSのスタイルはpタグには反映されないようです。

簡単に解説

当サイトでは、上側マイクロコピーと下側マイクロコピーのクラス名をそれぞれ、micro-copy-top、micro-copy-bottomにしています。

これを変更する場合は、追加CSSにコピペしたものも同様に変更してください。

そしてボタンを上下で挟み込むようにマークアップするとマイクロコピーの完成です!

ボタンには共通ボタン>プライマリボタンを使っていますが、スタイル>ボタンでもうまくいきます。

これがCVにどれだけの影響を与えるか?

マイクロコピーでCVが大幅にアップしたとの報告をよく見かけますが、その効果はどれほどでしょうか?

当サイトのアクセスはまだまだ少ないのでその効果のほどは未知数ですが、少し様子を見てみようと思います。

いい報告ができればいいのですが…。

他にも面白いCSSカスタマイズがあればお知らせします。

では、また別の記事でお会いしましょう!

 

 

最新情報をチェックしよう!