WordPress 画像のクラスで枠線を付ける

WordPress
画像のクラスによって枠線を付ける
CSSの記述
 

画像の枠と背景の違いが分かりにくいと、境目がわかりにくくなってしまい、画像によっては外枠を付けたいものがある。
あらかじめ外枠付きの画像を作ってから、メディア追加をすればよいが、加工の手間が煩わしいし、HTMLで枠線を付けるのもめんどくさい。
そこで一番便利なのが、画像のクラスによって枠線を付ける方法である。

枠線を付けた画像表示(クラス設定有り)

上と同じ画像を、枠線なしで表示(クラス設定無し)

 
スポンサー リンク
 
 

 目 次

  • 1. 画像にクラスを設定する方法
  • 2. 画像クラスで枠線を付けるCSS
 
 
1. 画像にクラスを設定する方法
 

枠線を付けたい画像を選択し、『編集』をクリックする。

画像詳細画面が開くので、上級者向け設定を開け、『画像 CSS クラス』欄にクラス名を入力する。

クラス名は自由に設定してよい。ここでの『gws』がCSSでのクラス名と同じになる。

 
2. 画像クラスで枠線を付けるCSS
 

style.css に次の記述を追記する。

img.gws の『gws』がクラス名で、枠線の太さや色を指定する。

こうすることで、
①.事前に枠線を付けてから画像をアップロードする必要がなくなる。
②.枠線を消すこともできる。
③.テキスト編集で、枠線を付けるHTMLを記述する必要がなくなる。
等、メリットが多い。

 

以上。
(2017.07.26)

 
             

スポンサー リンク
 

コメントを残す

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

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