【簡単】ワードプレスで画像の枠線を消す方法【CSSを少しだけ変更するやり方】


ワードプレス画像枠線消す方法CSS

 

この記事では

ワードプレスで画像を挿入した際に表示される枠線を

消す方法を解説します。

 

 

ワードプレスのテーマによっては

画像を挿入すると枠線が表示されるものがあります。

例えばこういうものです。

ワードプレス画像枠線消す00

この桜の画像の周りにあるグレーの枠線。

ちょっと邪魔だな・・・

いう時ってありますよね。

 

できればこういう風にしたいです。

ワードプレス画像枠線消す01

 

この枠線はCSSを少しいじることで

簡単に消すことができますので

やり方を解説していきたいと思います。

 

画像の枠線の消し方

 

まずワードプレスのダッシュボードから

『外観』➡『テーマの編集』で

『スタイルシート (style.css)』を開いてください。

 

スタイルシートとは

文字のフォントや修飾などデザインを設定するためのもの。

ここで、画像の枠線も設定されています。

 

 

このスタイルシートの中で

探してほしいのが

”Image borders”

というような記述です。

 

Image borders

とは日本語訳すると「画像の縁」。

この付近に

画像の枠線の設定があります。

 

キーボードの『Ctrl+f』で”Image borders”を検索してみてください。

 

もし見つからない場合は

このような記述を探してください。

border: 1px solid #ccc;
padding: 6px;

 

この2行が画像の枠線の設定そのものです。

 
見つかりましたでしょうか?

 

初期設定では

上記のようにborderにもpaddingにも値が入っていると思います。

これを次のように変更します。

border: none;
padding: none;

 

実際には

元の設定を削除してしまうのはなく

下のようにコメントアウトするのが良いでしょう。

/*border: 1px solid #ccc;
padding: 6px;*/

border: none;
padding: none;

 

これで保存すると

画像の枠線が消えます。

ワードプレス画像枠線消す01

 

いかがでしょうか。

消えていますか?

本記事がお役に立てれば幸いです。

 


コメントを残す

サブコンテンツ

プライバシーポリシー

クレジットカード盗難

このページの先頭へ