マイクロコピーってなに？
マイクロコピーとは、ボタン周りなどに短い文章を表示させてユーザーの行動を促す手法のことです。
例えば、こんな感じのボタンを見たことありませんか？
ボタン周りの小さな補足情報を付けることによって、ユーザーの決断をポジティブに促す効果があるそうです。
つまり、クリックされやすくなるということですね。
なんて素敵な効果なんだ！
私もさっそく利用したかったのですが、WordPressテーマTHE THORにはそうした機能はありませんでした…。
ということで、CSSでカスタマイズして作ってみました。
この記事の内容：
THE THORのマイクロコピーの作り方
THE THORをお使いの方で同じ様に悩んでいる場合は、ぜひ参考にしてください。
もちろんコピペOKです（システムに影響するほどの大それたことはしてませんが、自己責任でお願いします）。
当サイトでの使用例
当サイトの記事ではこんな風にマイクロコピーを使っていました（今は少し変えています）。
追加CSSに以下をコピペ
ではいよいよ、マイクロコピーを作っていきます
まず、以下のコードを追加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タグのなかで行ってください。実験したところ、pタグでは反映されませんでした。
簡単に解説します。
上側マイクロコピーと下側マイクロコピーのクラス名はそれぞれ、micro-copy-top、micro-copy-bottomにしています。
これを変更する場合は、追加CSSにコピペしたものも同様に変更してください。
そしてボタンを上下で挟み込むようにマークアップするとマイクロコピーの完成です！
ボタンには[共通ボタン]＞[プライマリボタン]を使っていますが、[スタイル]＞[ボタン]でもうまくいきます。
マイクロコピーがCVにどれだけの影響を与えるか？
マイクロコピーでCVが大幅にアップしたとの報告をよく見かけますが、その効果はどれほどでしょうか？
当サイトのアクセスはまだまだ少ないのでその効果のほどは未知数ですが、少し様子を見てみようと思います。
いい報告ができればいいのですが…。
他にも面白いCSSカスタマイズがあればお知らせします。
当サイトではこの他にもTHE THORの色んな問題点やカスタマイズについて記事にしています。よければ、こちらの記事もご覧ください。
では、また別の記事でお会いしましょう！
コメント