Amazonのアフィリエイトリンクを貼るのに使っているAmaQuick。
「デフォルトのままテンプレートタグを使っているけど具体的なHTMLやCSSを知りたい人」もいると思うので例として自分が使っているタグを書いてみようと思います。
AmaQuickテンプレート
基本的にはほぼbabylinkの形をひな形に直接記述されているCSSを全て外部CSSにしてHTMLタグをすっきりさせてclass名をAmaQuick用に書き換えています。
HTMLタグ
HTMLのテンプレートはAmaQuickの設定で以下に記述する部分です。
↓HTMLがこちら
|
1 |
<div class="amaquick-box"><div class="amaquick-image"><a href="${url}" target="_blank"><img src="${img}" style="border: none;" /></a></div><div class="amaquick-info"><div class="amaquick-name"><a href="${url}" target="_blank">${title}</a></div><div class="amaquick-detail">${author}</div><div class="amaquick-description"></div></div><div class="amaquick-footer" style="clear: left"></div></div> |
CSS
↓CSSがこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.amaquick-box{ /*全体のボックス*/ overflow: hidden; padding: 0; border-radius: 5px; margin: 10px 0 5px; } .amaquick-image{ float: left; display: block; margin: 0 15px 0 0; text-align:center; } .amaquick-info{ /*商品名以降のボックス*/ overflow: hidden; } .amaquick-name{ /*商品名*/ line-height:130%; margin-bottom: 5px; font-size: 18px; } .amaquick-detail { /*メーカー名など*/ line-height: 120%; margin-bottom: 7px; font-size: 15px; } .amaquick-description { /*自分で書く補足説明など*/ font-size: 15px; line-height: 130%; margin-top: 10px; } .amaquick-footer{ display: block; overflow: hidden; } |
このCSS、見よう見まねで見た目が希望通りになるようにしているだけなので正直全部のタグが必要なものなのか完璧には理解できていません。
blockとかhiddenとか一応書いてますけどその位置に必ず必要なものなのかどうか謎です。
見た目
上記のHTMLタグとCSSを反映させると以下のような非常にシンプルな見た目のAmazonリンクが生成されます。（今後変わるかもしれないので画像を貼ってます）
ーーー
ーーー
正直今まで何回もCSSを変えてきたので今後も同じデザインで使うかわかりません。
枠線を付けたりフォントを太字にしたり商品名を下にしたりと何回も試行錯誤してきました。
でも結局レイアウトの良し悪しでそんなに収益が変わるものでは無いので、極端な話CSSを使わなくても良いかもしれません。適切な商品とタイミングなら、レイアウト関係なくクリックされます。
シンプルなHTMLテンプレート
CSSとか良くわからないけどAmazonリンクが貼れればなんでも良いなら、以下のように外部CSSさえ使わないシンプルなテンプレートもありかも。divも使っていません。
HTMLタグ
|
1 |
<a href="${url}" target="_blank"><img src="${img}" alt="${title}" style="border: none;"/></a><br /><span class="amaquickName"><a href="${url}" target="_blank">${title}</a></span> |
一応申しわけ程度に商品名だけclass名を指定してフォントサイズとか変えられるようにしましたけどそれ以外は商品画像の下に商品名が並ぶだけのものです。
見た目
以下のようにすごくシンプルな見た目になります。弱点があるとしたら後になってから商品名を画像の横に配置したくてもできないこと。
CSSを使うか使わないか悩みどころ
外部CSSを使えばアフィリリンクの見た目を一括で変えられるのでブログ全体のデザインが変わった時に対応できるのが強みですけど、CSSを使ったことが無かったらちょっとハードル高め。
かと言ってCSSを直接記述すると、後でレイアウトを変えたいと思った時に全部手動で変更しないといけないので正直おすすめできません。
じゃぁいっそのことHTMLテンプレートの中にclass名さえ入れずにCSSを今後も使わないと決めるか。これも後で変えたいと思っても変えられないのでおすすめできません。
じゃぁCSSがよく分からなくても無難な方法があるとしたら最初に紹介したHTMLテンプレートを使ってCSSは何も設定せずに使うということくらいでしょうか。
後になって外部CSSで見た目を変えたいと思った時にclass名があるので一括で変更することができます。
いやー、どうすれば一番良いのかこういうのって判断が難しいですねぇ。学習コストと成果のバランス感覚が求められそう。
＜関連＞
⇒ 「AmaQuick」の設定と使い方
