本文画像の枠線の設定で、特定の画像だけ枠線の設定を変える方法

PR 2015/8/4

このトピックには3件の返信、2人の参加者があり、最後にtensukeにより11年、 1ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2015年8月3日 10:45 AM #30297
  
  tensuke
  ゲスト
  
  いつもSIMPLICITYを使わせていただいております、本当にありがとうございます。
  画像の枠線について質問させてください。
  現在、SIMPLICITYの画像設定で、「本文画像の枠線」をボーダーに設定しています。
  今回、特定の画像だけ枠線を消そうと思い、画像挿入時にstyle=”border:none”やborder=”0″などを入れて枠線を消そうとしましたがうまくいきませんでした。
  他にも、ネットで調べて下記の通り、「sennasi」という枠を無しにしたcssのクラスを設定し、画像に同じクラスを指定しましたが、やはり枠線が無くなりませんでした。
  
  img.sennasi {
  border: none;
  }
  
  SIMPLICITYの画像設定を適用しないように、特定の画像だけ枠線の設定を変えることは難しいでしょうか？
  ご教授頂けたら幸いです。
- 2015年8月3日 11:31 AM #30299
  Hidekichi
  ゲスト
  たぶん、それは該当ページのヘッダあたりに
```
<style>
imgのセレクタ {
  border: 1px solid #ccc !important;
}
</style>
```
  なんてセレクタが書いてあるからなんだろうと思います。
  ページに書いてあり、尚かつ!importantがついてるので最優先されてしまいます。なのでインラインで、
```
<div class="...">
  <a href="...">
    <img src="..." style="border: none !important;" />
  </a>
</div>
```
  なんて毎回書けば消えるはずですが面倒なので、画像ボーダーの利用を停止しておいて、子テーマcssあたりに、
```
#the-content img {
  border: 1px solid #ccc;
}

.no-border {
  border: none !important;
}
```
  などと設定しておき、imgのclassに、class=”no-border”とするか、あるいは、
```
.no-border img {
  border: none !important;
}
```
  としておいて、div class=”no-border”とすれば、そのブロックの中にあるimgはボーダー無しになるんじゃなかろうかと思います。
- 2015年8月3日 6:36 PM #30322
  
  わいひら
  キーマスター
  
  hidekichiさんの書かれているように、インラインでもborder: none !important;指定する必要があるかもしれません。
  
  もしくは、Simplicityの画像のボーダー表示を使用しないで、自前で画像にボーダーを設定すれば、importantする必要はないかもしれません。
- 2015年8月3日 11:33 PM #30340
  
  tensuke
  ゲスト
  
  Hidekichiさん、わいひらさん、ありがとうございます。
  教えて頂いたやり方で、指定した画像の枠線を無しに設定することができました。
  大変勉強になりました。
  素人にも分かるように親切にご説明していただき、本当にありがとうございました。
投稿者

投稿