AmaQuickのHTMLテンプレートカスタマイズ例

Amazonのアフィリエイトリンクを貼るのに使っているChrome拡張機能のAmaQuick

公式:AmaQuick 公式ページ [C!]

拡張機能:AmaQuick – Chrome ウェブストア

「デフォルトのままテンプレートタグを使っているけど具体的なHTMLやCSSを知りたい人」もいると思うので例として自分が使っているタグを書いてみようと思います。

あくまで一例なのでご参考までに。また、今まで使ってきたリンク生成ツールから自分好みの設定を参考にさせていただいているので他にもHTMLタグの例を見たいという人は以下のツールを参考にどうぞ。

広告

使用中のAmaQuickテンプレート

基本的にはほぼbabylinkの形をひな形に直接記述されているCSSを全て外部CSSにしてHTMLタグをすっきりさせてclass名をAmaQuick用に書き換えています。

HTMLタグ

HTMLのテンプレートはAmaQuickの設定で以下に記述する部分です。

CSS

このCSS、見よう見まねで見た目が希望通りになるようにしているだけなので正直全部のタグが必要なものなのか完璧には理解できていません。

blockとかhiddenとか一応書いてますけどその位置に必ず必要なものなのかどうか謎です。

見た目

上記のHTMLタグとCSSを反映させると以下のような非常にシンプルな見た目のAmazonリンクが生成されます。(今後変わるかもしれないので画像を貼ってます)

正直今まで何回もCSSを変えてきたので今後も同じデザインで使うかわかりません。

枠線を付けたりフォントを太字にしたり商品名を下にしたりと何回も試行錯誤してきました。

でも結局レイアウトの良し悪しでそんなに収益が変わるもんでも無いと思うので、極端な話CSSを使わなくても良いかもしれません。

シンプルなHTMLテンプレート

CSSとか良くわからないけどAmazonリンクが貼れればなんでも良いなら以下のように外部CSSさえ使わないシンプルなテンプレートもありかも。divも使っていません。

HTMLタグ

一応申しわけ程度に商品名だけclass名を指定してフォントサイズとか変えられるようにしましたけどそれ以外は商品画像の下に商品名が並ぶだけのものです。

見た目

以下のようにすごくシンプルな見た目になります。弱点があるとしたら後になってから商品名を横にしたいとか思ってもできないこと。

CSSを使うか使わないか悩みどころ

外部CSSを使えばアフィリリンクの見た目を一括で変えられるのでブログ全体のデザインが変わった時に対応できるのが強みですけど、CSSを使ったことが無かったらちょっとハードル高め。

かと言ってCSSをHTMLの中に直接記述すると外部CSSを使わなくてもHTMLだけで使えるけど、後でレイアウトを変えたいと思った時に全部手動で変更しないといけないので正直おすすめできません。

じゃぁいっそのことHTMLテンプレートの中にclass名さえ入れずにCSSを今後も使わないと決めるか。これも後で変えたいと思っても変えられないのでおすすめできません。

じゃぁCSSがよく分からなくても無難な方法があるとしたら最初に紹介したHTMLテンプレートを使ってCSSは何も設定せずに使うということくらいでしょうか。

後になって外部CSSで見た目を変えたいと思った時にclass名があるので一括で変更することができます。

いやー、どうすれば一番良いのかこういうのって判断が難しいですねぇ。学習コストと成果のバランス感覚が求められそう。

<関連>
「AmaQuick」がさらに使いやすく

極限までChromeを便利にする拡張機能まとめ

広告

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。