特定の画像の枠線を非表示にしたい

gingerpot
(@gingerpot)

8年、 3ヶ月前
こんにちは、お世話になります。

「Skeleton」というテーマを使っています。
このテーマではデフォルトで画像に枠線が表示されません。

そこで、style.cssに以下のコードを加えて、
画像に枠線が表示されるよう設定しました。
```
img {
margin: 5px;
padding: 10px;
border: solid #dddddd 2px;}
```
ところが、個別の画像によっては
枠線を表示させたくない場合が出てきました。

同様にstyle.cssでクラスを作成して、
投稿・記事内ではhtmlで非表示を
選択したいと考えています。

そこで、style.css内に、新たに以下のコードを書き足しましたが、
枠線を非表示にすることができません。

【style.cssへの記述】
```
.post img.border-none {
border: none;
padding: 0;
}
```
【記事・投稿内での指定】
```
<img class="border-none">
```
style.cssでの正しい指定方法をご教授いただけませんでしょうか。
どうぞよろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)

モデレーター Okamoto Hidetaka
(@hideokamoto)

8年、 3ヶ月前

https://ja.wordpress.org/themes/smpl-skeleton/
このテーマでしょうか？

style.cssの書き方というよりはCSSの当て方の問題に思えますので、
一度Chrome Developer Toolsなどで検証されてみることをお勧めします。

・参考
CSSの修正が捗る「リアルタイムコーディング」とは
http://ascii.jp/elem/000/000/997/997889/
トピック投稿者 gingerpot
(@gingerpot)

8年、 3ヶ月前
Okamoto Hidetakaさま

ご回答、ありがとうございます。
お返事が遅くなり、申し訳ございません。

テーマはそちらで間違いありません。
割と単純なテーマを選んだつもりです。

結果から申し上げますと、
以下のふたつの方法が問題解決に有効でした。

１．htmlでstyleを指定する
```
<img style="border: 0px; />
```
２．style.cssに次のコードを追加する
```
.border-none {
border: none !important;
padding: 0;
}
```
!importantを使うのは避けたかったのですが、
他のコードではどうしても、
全画像に対する指定を上書きできなかったものですから。

せっかく教えていただきましたが、
「CSSの当て方」の意味が理解できませんでした。
ごめんなさい。

参考で教えていただいたページは
とても興味深いものでした。
ソースが見られるのは知っていましたが、
直接修正、しかもCSSの修正までできるなんてびっくりです。

まだ手探りでいろいろいじっているので、
直接修正するのは少し怖い気もしますが、
単純な作業から試してみたいと思います。
モデレーター Okamoto Hidetaka
(@hideokamoto)

8年、 3ヶ月前

CSSには優先順位がありまして、
!importantやクラスの指定の仕方によって上書きのされ方が変わってきます。

このあたりの記事がわりと参考になるかと思いますので是非:)

!importantはもう使わない！CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ : http://creator.aainc.co.jp/archives/4947
CSS3 – CSSセレクタの優先順位の計算方法 – Qiita : http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
CSS優先順位の実例とまとめ | mawatari.jp : http://mawatari.jp/archives/css-selector-priority

3件の返信を表示中 - 1 - 3件目 (全3件中)

トピック「特定の画像の枠線を非表示にしたい」には新たに返信することはできません。

トピックタグ

表示