Google
2007-07-05

画像のボーダー(枠線)をなくす方法 このエントリーをはてなブックマークに追加

ブログに画像を添付すると画像の周りにフレームが自動でつくのですが これは取る事ができますか?フレームがつくだけなら別にいいのですがアフィリエイトの画像なども載せておりまして その場合、画像の右に【ロ】のような四角がでます。

こんな質問メールが来ました。「同じことで悩んでいる人が他にもいるかも」と思ってこちらで回答することにします。

たとえば、次のようなエントリーを書いたとします。



するとアフィリエイトの広告リンクの横に、不自然な四角形の枠が表示されてしまいます。多分これのことですね。

ここには、見えない 1 x 1 ピクセルの画像が入っています。広告が何回表示されたのか統計を取るために、アフィリエイト広告のコードにはたいていこのような画像のコードが含まれています。ブログの方で画像に枠を表示する設定になっていると、この統計用の画像にまで枠が表示されて、上掲のような不自然な四角が出てしまう、というわけ。


画像のボーダーをはずす

そこで、投稿中の画像のボーダー(枠線)のはずし方をご紹介。

1.Blogger 管理画面「テンプレート > HTML の編集」のテンプレートコードから、次のようなコードを見つけ出します。完全には一致しないかもしれませんが、ともかく .post img についての設定のかたまりを見つけてください。
.post img {
  padding: 4px;
  border: 1px solid #cccccc;
}

2.それを次のように変更します。
.post img {
  padding: 0;
  border: 0 none;
}

3.「テンプレートを保存」ボタンを押すと終了です。それだけ。


Blogger ブログでアフィリエイトをされている方は、ぜひ試してみて下さいね。


関連:
posted at 21:23 | Translate このエントリーをはてなブックマークに追加 このエントリーを含むはてなブックマークを表示
:
  • さっそく教えて頂いたとおりしましたら枠線がなくなりましてすっきりしました。
    助かりました。ホントにありがとうございました。

    By Blogger 直太朗, at 06 July, 2007 01:39  

  • どういたしましてです。やはり同じ悩みを持っていた人もいたみたいですね。

    なかなか全部には答えられていない現状なんですが、また何かあればどうぞ。

    By Blogger Kuribo, at 08 July, 2007 22:34  

  • こんにちは、クリボウさん。画像のボーダーについてさらなる質問をさせて下さい!
    各画像毎に枠線を入れたりはずしたりする方法、知っていらっしゃらないでしょうか?普通の写真の場合は、個人的に枠ありの方が好きなのですが、絵文字を入れる場合は当然枠があっては変なので、今は全て枠なしにしているのです。
    写真を入れたときだけボーダーを入れたいのですが、各ポストのHTMLの写真の部分にある

    border="0"

    を例えばborder="5"に変えてみても、Composeのところでは線が見えるのですが、Previewで見ると枠が入らないのです。どうしたら、1つ1つの枠のコントロールが出来るのでしょうか?あと、もし出来たら、枠の色のコントロールの仕方も、知っていらっしゃったら、ぜひ教えてください!

    By Blogger Lothlorien, at 13 July, 2007 02:01  

  • 画像のタグの border="0" を消して、style="border:1px solid red;" と入れてやると赤い線の枠がその画像の周りに出ます。

    さらに style="border:1px solid red;padding: 5px;" なんてすると、画像と赤枠の間に 5 ピクセルの余白ができます。

    スタイルシートについてはこちらを、使用できる色についてはこちらをご確認くださーい。

    By Blogger Kuribo, at 20 July, 2007 23:05  

  • おお、できた。いつも助かります!!! ありがとうございます。

    By Blogger 竹内幹, at 10 December, 2007 22:44  

  • はーい、どういたしましてです。

    By Blogger Kuribo, at 12 January, 2008 11:25  

Post a Comment


Links to this post:

Create a Link