ここではWordPressで画像を表示した際出る画像周りの枠を削除する方法を解説しています。
全ての画像の枠を消す
概観→テーマの編集→スタイルシート(style.css)
/wp-content/themes/twentytwelve/style.css
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
border-radius: 3px;
}
ここの箇所で画像の枠を表示しています。
なのでこの部分をコメントアウトします。
/*
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
border-radius: 3px;
}
*/
こうすると画像の枠が消えます。
特定の画像の枠を消す
概観→テーマの編集→スタイルシート(style.css)
/wp-content/themes/twentytwelve/style.css
このファイルにこちらを追記します。
img.nostyle {
border-radius: 0;
box-shadow: none;
}
画像を表示するとき
<img src="imgpath" alt="alt" class="nostyle" />
とclassで指定します。
これでclass指定したimgタグのみ画像の枠線を消すことが出来ます。
もちろんclassでなくてもidなどのエレメントで大丈夫です。
情報ありがとうございます。とてもわかりやすかったです！
どういたしまして！
WordPress初心者にです。
非常にわかりやすくて助かりました。
有難うございます！！
どういたしまして！
ピンバック: 画像の周りのみっともない枠を消す | レインボウ情報館
初心者です。lightningを使っているのですが、スタイルシートに borderという記述がなく、こちらに書いてあることができません。べつのところに記述があるのでしょうか？
style.cssのどこに記載があるか分からない場合
F12で開発者ツールから画像に適応されているCSSのみを表示させ、いらないスタイルのみ削除する。
か
以下のCSSをstyle.cssに追記する。
img {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
お忙しい中、ありがとうございます！
まだまだですが、がんばってみます！