WPで画像の枠をなくして「CSSクラス」で特定の枠を選択できるようにする

2018-05-11 2018-05-12

画像のまわりに中途半端なわくが入るのがとっても気になる。
これを外す方法を検索しましたよ。

前にDiverの高木さんに教えてもらったのは、キャプション、アイキャッチ画像の枠を外す、という追加CSSでした。
記事内の画像の枠については一番簡単なのはCSSのボーダーの設定をnoneにする、というやり方。それはわかるけど、基本、追加CSS以外はいじりたくないですね。ビビリです。

追加CSSを説明しているサイトがあったので、早速試しましたが、ダメでした。
Diverの追加CSSは記述がオカシイと×マークがつきます。（他のテーマでもそうなのかしら！？）

ついでに見つけたのですが
（これはCSSでボーダーの設定を削除、あるいは追加でnoneを入れるのが前提ですが）
画像CSSクラス　というもの。これは貼りつけた画像の詳細画面で、あらかじめ設定した枠にクラスというショートカットみたいなものを呼び出せば、その設定の枠が付くよ、というもの。
これ、便利そうですね。枠なしにできたアカツキにはトライしたい・・・

ともかく、枠なしにするのが先だ・・・。あちこち見ましたが、CSSをいじるのが簡単確実なのだから、他には見つからない。

ま、またしても親切のかたまりのDiver、高木さんに聞こう。

とりあえずはこれで。

青部分をCLCLに登録しました。
CLCLはクリップボードの拡張ソフトです。フリーです。チョー便利ですよ。リンク先、窓の杜に詳しく説明があります。

で、肝腎な画像の枠をとるやり方は、Diverのサポートでアッサリ解決。基本設定、投稿設定に画像の扱いの設定があったのでした。チャンチャン。

次に先ほどのCSSクラスの設定をやります。
参考にしたのはコチラ　IROIROKANSATSU

画像の角を丸くします。ラインは白#ffffffにしてあたかも枠線がないように見せます。
「maru 」がCSSクラスの名前です。角マルなのでこれをつけました。（任意）
角マル20pxは適当な数値です(>_<)

追加CSS

img.maru {
border : 1px solid #ffffff;
border-radius: 20px;
}

これで画像を挿入後、画像の詳細で「CSSクラス」欄に「maru 」といれれば角マルになるはずです。