「カエレバ」でつくった広告に枠線をつける方法。記事本文とのメリハリ・アクセントをつける

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」があれば枠線は書けますが、そのままだと角が強かったり、広告タイトルと枠線が近かったり、広告下の記事本文と枠線が近かったりするので、その調整用としていくつか足してます。

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

最後に

簡単にですがこれでカエレバ広告に枠線を追加する方法の紹介を終わります。

初期の状態だと記事本文との差別化がされていないので、広告とはっきり認識してもらうには枠線を使うのが効果的です。

いくらいい商品を広告として貼っても、認識されなければ購入してくれる機会も減ってしまいます。

広告に枠線を追加して少しでも自然に目立つようしましょう。