スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | - | pookmark |
Entry: main  << >>
画像の枠を消す
HTML

線の太さをピクセル数で指定します。 ※HTML4.01では非推奨
<img src="画像URL" width="xxx" height="xxx" alt="xxx" border="0">




CSS

全体的な画像枠設定の変更・削除
img { border: 0px スタイル 色; }

※CSSの一番下に下記を追記すれば全ての画像枠がなくなります。
img {
background-color: transparent;
border: 0px!important;
padding: 0px;
}



■ クラス属性、id属性ごとに指定する

.クラス名 img { border: 0px!important; }
#id名 img { border: 0px!important; }

例:「stella_basics

ブログに挿入された画像全ての枠を削除する。
#wrapper_body img { border: 0px!important;}

投稿記事に挿入された画像の枠を削除する。
.entry_body img { border: 0px!important;}



■ クラス属性 class="pict" を利用する ※JUGEM専用

JUGEMでは画像を挿入した際、自動的にクラス属性(class="pict" )が指定されます。
<img src="画像URL" width="xxx" height="xxx" alt="xxx" class="pict" />

このクラス属性(class="pict")に対して画像枠削除の指定をしましょう。
.pict { border: 0px!important; }



■ リンク効果の枠線

リンクの効果に「枠線」を使用していると画像リンクに枠線が現れます。
この場合は、<img>の枠線の幅を0にしても消すことはできません。

解決方法として・・・

1. 下記タグをCSSの一番下に入力しましょう。
.linkimg:link, .linkimg:visited, .linkimg:hover, .linkimg:active{
background-color: transparent;
border: 0px;
}
.linkimg img{
border: 0px;
}

2. 枠を付けたくない画像を本文に貼るときにクラスを書き換えましょう。
<a href="(画像のリンク先)" class="linkimg"><img(画像URL)></a>
※class="linkimg"を書き加える位置が<a>の中だということに注意しましょう。



| pika | - | - | pookmark |
スポンサーサイト
| スポンサードリンク | - | - | pookmark |

Calendar

   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>

Search

Entry

Category

Archives

Link

Profile

Mail

テンプレート・カスタマイズに関する質問はコチラからどうぞ。
※5日以内に返信が無い場合は、もう一度お送りくださいませ。

メールフォーム

Feed

Others

無料ブログ作成サービス JUGEM

Mobile

qrcode

Sponsored Links