広告バナーの上に表示するマイクロコピーのCSSの書き方 (スラッシュとバックスラッシュで挟むやつ)

CSS
投稿日:
カテゴリー HTML/CSS

広告バナーの上に表示するマイクロコピーのCSSの書き方について説明します。よく見るスラッシュとバックスラッシュでテキストを挟んでるやつです。

広告

マイクロコピーとは

マイクロコピーとは、Webページ上のボタンなどに一言添えるテキストのことです。広告バナーにマイクロコピーを添えると、CTR(クリック率)が向上します。

サンプル

セール開催中
広告バナー(サンプル)

ソースコード

HTML

<div class="microcopy" style="color:orange;">セール開催中</div>
<div style="text-align:center;"><img src="sample.jpg"></div>

私は、マイクロコピーの色を変えることが多いので、色は直接指定しています。

CSS

.microcopy {
    text-align: center;
    font-weight: bold;
}
.microcopy::before {
    content: "＼";
    margin-right: 8px;
}
.microcopy::after {
    content: "／";
    margin-left: 8px;
}

疑似要素::beforeと::afterで”＼”と”／”を付けています。ちなみに全角のスラッシュとバックスラッシュは「スラッシュ」で変換すると出せます。

おすすめのASP

A8.net

一番おすすめなのはA8.net です。広告の数が豊富です。アフィリエイト初心者が一番最初に利用するASPとしておすすめします。

バリューコマース

次におすすめなのがバリューコマースです。Yahoo!ショッピングのアフィリエイトをやるなら、ここ一択です。広告の提携の申請を拒否された場合、同じサイトで二度と申請することができません。そのため、即時提携以外の広告を申請する際は、注意が必要です。なお、Yahoo!ショッピングは、アカウント作成時に自動で提携済みになります。

私のサイトでは、この2つのASPとAmazonアソシエイトとGoogle AdSenseが主な収入源になっています。

広告