kengo700のナレッジベース

誰かの役に立つと思う情報を発信するブログ

はてなブログで画像に枠線をつけ、Amazonアソシエイトの画像には枠線をつけない設定

はてなブログに張り付けた画像に枠線を表示しつつ、Amazonアソシエイトの画像には枠線をつけない設定を紹介します。

はじめに

下記記事を参考にさせていただいて、以前はブログの画像に枠線を表示していました。

nikkiblog.hatenablog.jp

しかし、Amazonアソシエイトを張り付けたところ、下図のようにアソシエイトの画像にも枠線が表示されてしまいました。

f:id:kengo700:20160220151420p:plain:w400

この枠線のサイズがバラバラな感じに耐えられません。(((;゚Д゚)))

とりあえず枠線の色を薄くして凌いでいたのですが、Amazonアソシエイトの画像の枠線だけ表示しない設定ができたので紹介します。

※ 私はHTMLなどに詳しくないので、ほとんど見よう見まねで設定しています。もっと簡単な方法があるかもしれません。

枠線をつけない設定について

下記記事によると、クラス属性(ホームページの要素につけた名前?)ごとに枠線を消せるそうです。

einmeteor.jugem.jp

はてなブログの「Amazon商品紹介」機能を使ってAmazonアソシエイトを張り付けたページのソースを見ると、下記のようになっているので、クラス属性は「hatena-asin-detail-image」らしいです。

<img src="URL" class="hatena-asin-detail-image" alt="商品名" title="商品名">

Amazonアソシエイトの画像に枠線をつけない設定

以上のことから、画像には枠線をつけ、Amazonアソシエイトの画像には枠線をつけない設定は、下記のように行えます。

  1. はてなブログの管理画面の「設定」の「詳細設定」を開く
  2. 「headに要素を追加」の欄に、下記コードをコピペして「変更する」ボタンをクリックする
<style>
.entry-content img {
border: 1px solid #555;
}
.hatena-asin-detail-image {
border: 0px!important;
}
</style>

この設定で、Amazonアソシエイトの画像だけ枠線を消せました。

f:id:kengo700:20160220151825p:plain:w400

おわりに

わからないなりに色々と試してみると、だんだんとわかってきますね。