「カエレバ」でつくった広告に枠をつける方法

Amazonや楽天といった物販サイトのアフィリエイト広告をひとまとめにしてくれる広告作成サイト「カエレバ」。
そんな便利なカエレバ製の広告ですが、広告枠は実装されていません。
今回はカエレバで発行した広告に枠線をつける方法を簡単に紹介します。

スポンサードリンク

枠線がつく前と後

枠線を追加する前だとこんな感じです。

・・・記事の背景色と混じってしまって、一瞬だと広告とわかりづらいですよね。
読者がスクロールして記事を速読していると、うっかり見落としてしまうかもしれません。

では実際に広告に枠線を追加してみましょう。

こんな感じで枠線が追加されるので、視覚的に広告だとわかりやすくなります。
記事と広告の差別化をするためにも、枠線を追加してみましょう。

CSSにコードをコピペ

一番てっとり早く枠線を追加するには、以下のコードをCSSにコピペしてください。

.kaerebalink-box{
border: 1px solid #aa33ff;
border-radius: 5px;
padding: 20px 20px 20px 20px;
margin-bottom:20px;
width:70%;
}

このコードをブログテーマの「style.css」などのCSSファイルに追加してくれれば、広告に枠線が付くようになります。

WordPressを使っている人なら「追加CSS」でもOKです。
追加CSSは「外観」→「カスタマイズ」の画面で、項目の下のほうにあります。

プログラムに詳しくない人用に、とりあえず内訳としてはこうなってます。

border : 1px solid #aa33ff → 広告全体を1ピクセル水色の一本線の枠線で囲む
border-radius : 5px → 囲み枠の角を丸くする
padding : 20px 20px 20px 20px → 枠線内の上・右・下・左に余白をつくる
margin-bottom : 20px → 下の枠線外の余白をつくる
width : 70% → 囲み枠の幅をウィンドウの70%の幅にする

最低限「border」があれば枠線は書けますが、そのままだと角が強かったり、広告タイトルと枠線が近かったり、広告下の記事本文と枠線が近かったりするので、その調整用としていくつか足してます。

項目を追加・消去、あるいは数値を弄れば枠線の仕様を調整できるので、お好みで調整してください。

最後に

簡単にですが、これでカエレバ広告に枠線を追加する方法の紹介を終わります。
初期の状態だと、記事本文との差別化がされていないので、広告とはっきり認識してもらうには枠線を使うのが効果的です。
いくらいい商品を広告として貼っても、認識されなければ意味がありません。
広告に枠線を追加して、少しでも自然に目立つようしましょう。