WordPress 画像周りの枠線を消す

ここではWordPressで画像を表示した際出る画像周りの枠を削除する方法を解説しています。

wordpress_logo

全ての画像の枠を消す

概観→テーマの編集→スタイルシート(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 画像周りの枠線を消す」への5件のフィードバック

  1. Baba chin

    WordPress初心者にです。
    非常にわかりやすくて助かりました。
    有難うございます!!

    返信
  2. ピンバック: 画像の周りのみっともない枠を消す | レインボウ情報館

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*