> カスタマイズ | デザイン >
画像のボーダー（枠線）をなくす方法
こんな質問メールが来ました。「同じことで悩んでいる人が他にもいるかも」と思ってこちらで回答することにします。
たとえば、次のようなエントリーを書いたとします。
するとアフィリエイトの広告リンクの横に、不自然な四角形の枠が表示されてしまいます。多分これのことですね。
ここには、見えない 1 x 1 ピクセルの画像が入っています。広告が何回表示されたのか統計を取るために、アフィリエイト広告のコードにはたいていこのような画像のコードが含まれています。ブログの方で画像に枠を表示する設定になっていると、この統計用の画像にまで枠が表示されて、上掲のような不自然な四角が出てしまう、というわけ。
画像のボーダーをはずす
そこで、投稿中の画像のボーダー（枠線）のはずし方をご紹介。
１．Blogger 管理画面「テンプレート ＞ HTML の編集」のテンプレートコードから、次のようなコードを見つけ出します。完全には一致しないかもしれませんが、ともかく
２．それを次のように変更します。
３．「テンプレートを保存」ボタンを押すと終了です。それだけ。
Blogger ブログでアフィリエイトをされている方は、ぜひ試してみて下さいね。
関連：
スポンサードリンク：
お願い：
ブログに画像を添付すると画像の周りにフレームが自動でつくのですが これは取る事ができますか？フレームがつくだけなら別にいいのですがアフィリエイトの画像なども載せておりまして その場合、画像の右に【ロ】のような四角がでます。
こんな質問メールが来ました。「同じことで悩んでいる人が他にもいるかも」と思ってこちらで回答することにします。
たとえば、次のようなエントリーを書いたとします。
するとアフィリエイトの広告リンクの横に、不自然な四角形の枠が表示されてしまいます。多分これのことですね。
ここには、見えない 1 x 1 ピクセルの画像が入っています。広告が何回表示されたのか統計を取るために、アフィリエイト広告のコードにはたいていこのような画像のコードが含まれています。ブログの方で画像に枠を表示する設定になっていると、この統計用の画像にまで枠が表示されて、上掲のような不自然な四角が出てしまう、というわけ。
画像のボーダーをはずす
そこで、投稿中の画像のボーダー（枠線）のはずし方をご紹介。
１．Blogger 管理画面「テンプレート ＞ HTML の編集」のテンプレートコードから、次のようなコードを見つけ出します。完全には一致しないかもしれませんが、ともかく
.post img についての設定のかたまりを見つけてください。.post img {
padding: 4px;
border: 1px solid #cccccc;
}
padding: 4px;
border: 1px solid #cccccc;
}
２．それを次のように変更します。
.post img {
padding: 0;
border: 0 none;
}
padding: 0;
border: 0 none;
}
３．「テンプレートを保存」ボタンを押すと終了です。それだけ。
Blogger ブログでアフィリエイトをされている方は、ぜひ試してみて下さいね。
関連：
スポンサードリンク：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。 
さっそく教えて頂いたとおりしましたら枠線がなくなりましてすっきりしました。
ReplyDelete助かりました。ホントにありがとうございました。
どういたしましてです。やはり同じ悩みを持っていた人もいたみたいですね。
ReplyDeleteなかなか全部には答えられていない現状なんですが、また何かあればどうぞ。
こんにちは、クリボウさん。画像のボーダーについてさらなる質問をさせて下さい！
ReplyDelete各画像毎に枠線を入れたりはずしたりする方法、知っていらっしゃらないでしょうか？普通の写真の場合は、個人的に枠ありの方が好きなのですが、絵文字を入れる場合は当然枠があっては変なので、今は全て枠なしにしているのです。
写真を入れたときだけボーダーを入れたいのですが、各ポストのHTMLの写真の部分にある
border="0"
を例えばborder="5"に変えてみても、Composeのところでは線が見えるのですが、Previewで見ると枠が入らないのです。どうしたら、1つ1つの枠のコントロールが出来るのでしょうか？あと、もし出来たら、枠の色のコントロールの仕方も、知っていらっしゃったら、ぜひ教えてください！
画像のタグの border="0" を消して、style="border:1px solid red;" と入れてやると赤い線の枠がその画像の周りに出ます。
ReplyDeleteさらに style="border:1px solid red;padding: 5px;" なんてすると、画像と赤枠の間に 5 ピクセルの余白ができます。
スタイルシートについてはこちらを、使用できる色についてはこちらをご確認くださーい。
おお、できた。いつも助かります！！！ ありがとうございます。
ReplyDeleteはーい、どういたしましてです。
ReplyDelete私もborder="0"なのに枠線が出て悩んでました。style="border:0"で枠線がすっきりとれました。
ReplyDeleteやはり困った時はクリボウさん。ありがとうございます。
Bloggerのテンプレで
ReplyDelete.post-body img {
padding: 2px;
background: $(image.background.color);
border: 1px background: $(image.background.color);
になっている箇所を、それぞれ
.post-body img {
padding: 0px;
background: $(image.background.color);
border: 0 none;
に書き換えたら本当に枠がなくなりました。感激です。ありがとうございました。
画像周囲の影だけ残っていたので、その下を
-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
に変えたら影もなくなりました。
気になってしかたなく、どうしてこんなに余計なものが…
ReplyDeleteと考えていたところ、こちらに辿り着いて解決されました！
まさかそんな親切なこと書いてあるところなどないだろうと思っていたので、本当にうれしいです。
ありがとうございました。