アフィリエイトリンクの特定URLを含むバナー画像にのみCSSを適用させる方法

ウェブ

goat-on-photo-with-grass

今回ご紹介するカスタマイズは、特にスマホサイト上でバナータイプのアフィリエイトリンクを貼る時に何かと便利なものではないかと自負しておりまする。

画像サイズの扱いが面倒なスマホサイトや、投稿エリアに挿入する画像にCSS装飾をしている場合なんかに役に立つと思います。

最近はMFI(モバイルファーストインデックス)の発表があったりと、もうスマホサイトがのっぴきならない状況になってきていますね。

 

はじめに画像を装飾する例をば

とりあえず目に見やすい例として、ウチのサイトでは投稿内に挿入する画像は基本的にすべて↓のようなシャドウなどをつけた見栄えにしています。

goat-on-photo-with-grass

そこまでこだわる必要はない、とツッコミをいただきそうですが、個人的な所感としては、特に背景が白い画像などはその境目が分かりづらく、画像を画像として目立たせるためにも、ボーダーやシャドウを付けておくのが好みなのであります。

ちなみに↓のようなCSSを当てております。

 

これでコンテンツ内に挿入した画像は、問答無用に装飾がなされるのですが、困ったちゃんなのは、A8などのアフィリエイトリンクを貼った時にも、このスタイルが継承されてしまう点です。

↑この小さな四角。。
お分かりいただけるでしょうか。

A8ネットのアフィリエイトリンクのコードは、下記のような構成になっています。

つまり、この3行目のimgタグにも、CSSがかかっている状態というわけですね。

 

ちなみにバナー画像を使用しないテキストリンクの場合でも、謎のスペーサー画像は付いてくるので、スタイルを当てている場合は妙な見栄えになります。

あと、スマホサイトで画像widthを100%指定にしていれば、意味不明な空白が出てしまう、といった経験をお持ちの方もいらっしゃるはず。

 

特定のURLを含む画像にのみCSSを適用させる記述

さて、本題のカスタマイズについてです。

特定のURLを含む画像にのみ、CSSを適用して見た目を変更するための、基本的な書き方は↓となります。

 

そして、↓が実際に各ASPのアフィリエイトリンクにのみCSSを当てる方法のサンプルです。

 

A8ネットの場合

下記の要領でCSSを記述すると、画像URLの中に【a8.net】が含まれているものだけ、スタイルシートが適用されることになります。



これで、A8さんが提供するアフィリリンクのすべてのコードには、スタイルが適用されなくなります。

 

バリューコマースの場合

バリューコマースのアフィリエイトリンクは、A8ネットのコードとは少し異なり、iframeベースで書かれています。

タグの中には確かにimgタグは存在しているのですが、アドセンスやYouTubeなどのように、CSSの干渉を受けないので特に気にする必要は無いと思います。

つーか、未だにiframeってのが良く分からんばい。

ちなみに、特定のiframeのみCSSを変更する方法については、↓の記事を参考にしてください。
基本的な要領は同じです。

YouTube動画など特定のiframeだけcssで幅とかを指定する

 

アフィリエイトBの場合

アフィリエイトBの広告コードは、A8ネットと同じような内容になっています。

同じということは、、↓

カンファレンスバナー

 

やっぱり(メイン広告の右下あたりに)謎のスペーサーが表示されてしまいます。

こういった場合でも、先ほどのA8の要領でURLの部分を調整してあげれば、問題なく対応することができます。

 

まとめ

特定の画像URLは、img[src*=”特定のURL”] でほにゃららする!

 

以上、いかがでしましたでしたでしょうか。

特にサイトをレスポンシブで作っている場合なんかは、画像のwidthをパーセント指定にすることが多いと思うので、そんな時にもなにかと使えるのではと思います。

それではまた。

こんな記事もよければどうぞ!

プロフィール

niki

age
30+
gender
male

なんやかややっています。
趣味・日常・仕事のことなどを書いています。

© COPYRIGHT 2016 niki weblog