初心者向き!Amazonアソシエイトのテキストを目立たせるCSS設定

FXのイメージ

はじめに

前回までのまとめ

CSSを勉強していると「before/after 擬似要素」というのが出てくると思います。これを使ってAmazonアソシエイトのロゴ画像を簡単に表示できるようにしましたので参考にしていただければと思います(^O^)/

方針として

前回紹介したaタグを装飾する他、いろいろやり方はあるのですが、まずは方針として

  • 華美になりすぎない、悪目立ちしない
  • WordPressのエディタ上で簡単にセッティングできる
  • できればショートカットで設定したい
  • 当然ながらAmazonアソシエイトの規約をきちんと尊守

という方向を決めました。当サイトのスタンス的には、広告をガンガン貼って間違ってクリックさせるのではなくて、あくまでも家事等の生活に関する記事を補完する形で、市販品でいうとこういうアイテムがあります、という紹介がしたいわけですね。

あまりにもアフィリエイトリンクが目立ちすぎても邪魔になってしまいます。…かといって宣伝なのに目立たないというのでは意味がなく…(笑)

そこはデザインもある程度バランスが取れてさりげなく感を出したいところですね。

結局こうします

先のエントリーでも書いたように、Amazonさんで公式の素材を用意してくれてましたので、これを簡単にWordPressのエディタ上で利用できるようにするのを目標とします。

CSS:before 擬似要素で装飾

下準備

Amazonアソシエイト用の素材を用意

下記よりダウンロードします。

Amazon.co.jp ロゴボタン
https://affiliate.amazon.co.jp/tips/t3/a3

今回紹介しているCSS設定は上から1個目、2個目の小さいバナーです。それ以外のものでも動作はしますが、文字のサイズや位置を微調整した方がよいかもしれません。

バナーを自分のサーバーにアップロード

私は「メディアに追加」を使って普通にブログ用の画像データと同じ場所にアップロードしています。FTPを使って専用フォルダにアップロードした方がキレイとは思いますが、こっちの方が使い勝手がいいのかな?くらいの感じです。画像のURLがきちんとわかれば良いので、お好みで。

実際の設定編

WordPressに追加のCSSを書く場所について

当サイトはテーマとしてSimplicity2を使用しています。カスタマイザーの「追加CSS」へ書き込むことで簡単にCSSを追加できます。

筆者はカスタマイザーを起動させるのが面倒なので、ダッシュボード→外観→テーマの編集からstyle.cssを編集する形にしています。

また、FTPで別にカスタマイズ用のCSSファイルをアップロードするという方法もありますが、このあたりはやりやすい方法で良いのかなと思います。

くれぐれもAmazonさんのページに直接リンクはNGです。規約に書いてあったかわかりませんが、先方さんのサーバーに負担をかけますし、常識的にマナー違反です。

出来上がり

さて、先に出来上がりです。こんな感じになります。シンプルに画像ロゴの横に商品名が並びます。場所を取らないので記事の間に挿入しやすいです。

ASUS ノートブック E200HA

コードです

CSS側

これを追加CSSとしてWordPressの上記の場所に書き込みます。
Before(疑似要素)を使っています。

/* Amazonロゴを表示 Type1 */
.amabtn1:before {
content: url(画像のURL);
position:relative;
top:8px;
margin: 0px 10px 0px 0px;
}
/* 商品リンクの文字をちょっとだけ小さくする */
.amabtn1{
font-size:80%;
}

Before(疑似要素)を使用することでspanタグさえエディタ上で書いてしまえば、自動的に画像ロゴが追加されます。画像違いでamabtn1、amabtn2、amabtn3のようにクラスを作っておいて、商品のカテゴリで変更したり等、応用ができますね。

HTML側

WordPressのテキストエディタ上ではこんな感じに入力します。

<span class="amabtn1">
<a href="AmazonへのリンクURL">商品名</a>
</span>

AmazonへのリンクURLは紹介する商品のアフィリエイトリンクURLを入れてください。

おまけ:事故を起こさないために

今回は書きませんが、できればWordPressのカスタムを行う前に、ローカル環境でテストできるようすると効率が良く、事故の可能性も低くなります。また、最低限、子テーマは導入しておいた方が良いでしょう。

おわりに

次のエントリでは、WordPressのエディターボタンからワンタッチで今回作ったCSSコードを呼び出す方法をご紹介したいと思います。

ここまで読んでいただいてありがとうございました。
ハッピーな1日を!

早速使ってみました笑

カフェや公園でブログを書くなら

### 続き:追加の記事です。この記事で作った設定を簡単に呼び出します!

WordPressのエディター画面で簡単にオリジナルのCSSを呼び出す方法

ABOUTこの記事をかいた人

モモモサーバー編集長。 興味のあることにどんどん首を突っ込んで行きたい。 カレーパンが大好き。