ブログ

エントリー本文の画像に出てしまう枠線を消したい

旧フォーラムの記事です　http://blog.fc2.com/forum/viewtopic.php?f=6& t=2131
洵　2005-07-09 15:36:53
件名　：エントリー本文の画像に出てしまう枠線を消したい

「本文の画像に枠が出る」問題は、大きく分けて三通りの原因があります。
それぞれ別に対処法を書いておきますので、ご自身の状況に合わせてご覧下さい。

１．リンクを貼ったときだけ、太い枠線が出る
[画像]http://blog10.fc2.com/w/webbingstudio/file/waku_1.gif[ /画像]
２．リンクを貼る・貼らないに関わらず、飾り枠が出る
[画像]http://blog10.fc2.com/w/webbingstudio/file/waku_3.gif[ /画像]
３．リンクを貼ったときだけ、本文のリンク効果と同じ枠線が出る
[画像]http://blog10.fc2.com/w/webbingstudio/file/waku_2.gif[ /画像]

対処法：１
本文に画像を貼り付けるときはHTML要素<img>を使うのですが、
これに「border="0"」を指定していないと、リンクを貼ったとき枠線が出てしまいます。

つまり、エントリーを投稿するときに
<img src="（画像のURL）" border="0& quot;>
と書いてやれば直ります。

※補足
初心者の方は全然気にすることはありませんが…
W3C（正しいHTML文書を書こう！と提唱している団体）は
「<img>内に枠線の太さを書かないほうが良い」と勧めています。
正しいHTML文書にこだわりたい方は、スタイルシートの設定の最後に
img{border: 0px}
を書き加えておけば、ページ内の画像全てに枠が出なくなります。


対処法：２
これは、公式テンプレート「sofa」などを使用していると起こる現象です。
「sofa」は、「本文中に貼られた画像を写真風に飾り付ける」
という命令がスタイルシートに加わっているので、こうなってしまうのです。

まず、HTMLの編集画面を開いて、
<%topentry_body>という記述を探してください（記事の本文になり ます）。

sofaだと、こんな風にentry_textと名前の付いた枠で囲まれています。
<div class="entry_text"><%topentry_body ></div>

次に、スタイルシートの編集画面から
.（<%topentry_body>を囲んでいた枠の名前） img{
・・・・
}
という命令を探してください。

sofaだと、こうなってます。

/*テキスト内の画像*/

.entry_text img {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
margin: 0px 5px 5px 0px;
padding: 3px;
}

これを、こう直して「更新」します。

/*テキスト内の画像*/

.entry_text img {
background-color: transparent;
border: 0px;
padding: 0px;
}

こうすると、本文の画像のみ、枠が一切出なくなります。

該当する命令がどこにあるかわからない…という場合は、
スタイルシートの最後尾に

img {
background-color: transparent;
border: 0px;
padding: 0px;
}

と書いて「更新」してください。
ブログ内の画像、全てに枠が出なくなります。


対処法：３
これは、テンプレートの作者がリンクの効果に
「枠線」を使っているために起こる現象です。

基本的にあまり目立ちませんが、背景が透明な画像を貼ったときや、
アフィリエイトバナーを貼ったときに気になるかもしれません。
この場合、<img>の枠線の幅を0にしても、消すことはできません。

まず、以下の文章をスタイルシートの最後に追加して「更新」してください。

.linkimg:link, .linkimg:visited, .linkimg:hover, .linkimg: active{
background-color: transparent;
border: 0px;
}
.linkimg img{
border: 0px;
}

そして、枠を付けたくない画像を本文に貼るときに、以下のように修正します。

<a href="（画像のリンク先）" class="lin kimg"><img（変更する必要はない）></a>

「class="linkimg"」を書き加える位置が<a>の中だということに注意して ください。
これで、任意の画像の枠を外すことができます。

※この方法は記事にいちいち「class="linkimg"」を書かなければならず
面倒なのですが、残念ながらこれ以外の対処方法は今のところないようです。

アフィリエイトが中心のブログを運営する予定の方は、こういった特殊な
リンク効果（同じ色の下線以外）が付いているテンプレートは避けた方が無難です。

2005年07月09日 15:36  by FC2スタッフ