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

2021 6/19

2021-06-19

マイクロコピーってなに？

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

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

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

つまり、クリックされやすくなるということですね。

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

私もさっそく利用したかったのですが、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; /*ボタンとの距離*/
}