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などのエレメントで大丈夫です。

8 thoughts on “WordPress 画像周りの枠線を消す

  1. Baba chin

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

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

  3. h

    初心者です。lightningを使っているのですが、スタイルシートに borderという記述がなく、こちらに書いてあることができません。べつのところに記述があるのでしょうか?

    返信
    1. 後藤 祐一 投稿作成者

      style.cssのどこに記載があるか分からない場合
      F12で開発者ツールから画像に適応されているCSSのみを表示させ、いらないスタイルのみ削除する。

      以下のCSSをstyle.cssに追記する。
      img {
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      }

      返信

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください