Bloggerで、画像の影と枠線を消す方法【アフィリエイト広告コードのWebビーコン1px画像だけ】

どんな現象か

記事内にアフィリエイト広告を貼り付けると、四角っぽい透明っぽいものが影付きで表示されてしまうことがあります。これは、Bloggerの標準テンプレートを使っているで必ず現れる現象です。

四角っぽいものはなにか？いうと、「縦横1pxの透明（透過）の画像」なんですね。透明なので普通は見えないわけですが、Bloggerは標準で、写真を含む画像に自動で、影と枠線が表示されるようになっているので、そのため本来は見えないものが見えてしまうんですね。

写真とかに影と枠がつくのは見栄えがよいので、それは残したまま、この「縦横1pxの透明（透過）の画像」を消す方法を書いておきます。

消し方

.post-body img[width='1'],
.post-body img[height='1']{
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

上記のスタイルシートを追加するだけです。
Bloggerの機能で追加したい人は、管理画面の「テンプレート」-＞「カスタマイズ」ボタン-＞「上級者向け」-＞「CSSを追加」ところのテキストエリアに表示を張り付けるだけです。

広告コードのWebビーコンのタグ（HTML)をみればわかりますが、明示的にwidth='1'やheight='1'を指定している場合はほとんどなのでそれを利用して消します。

.post-body img{
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

画像すべてに適用したい場合は、上記のように書けばOKです。