【ワードプレス】画像に『CSSクラス』を与える方法

ビジュアルエディタの場合

【ビジュアルエディタ】【CSSクラスを与えたい画像】をクリック【鉛筆マーク】をクリック【画像CSSクラス】の欄に与えたいクラス名を入力して更新

 

 

ウィジェットの場合

サイドバーに画像を載せる方法は大きく2つ『画像ウィジェット』もしくは『HTML記述』です。それぞれ消し方を見てみましょう。

 

画像ウィジェットの場合

『投稿エディタのやり方』と全く同じ方法【画像編集】ボタンをクリック【画像CSS】に『aaa』と記述。これで画像にaaaクラスが与えられるので枠は取れます。

 

HTML記述の場合

この場合はクラスが指定されてあるか、されてないか分かりにくいので

『aaaというクラスが指定されていなければ、画像に枠が付く』

『aaaというクラスが指定されていれば、画像の枠が消える』

という命令を事前にCSSで与えています。

 

<a href=”https://wordpress.marumado.net/stork-customize-1/”><img src=https://wordpress.marumado.net/wp-content/uploads/2017/08/170803-103606.png></a>

<a href~>はリンク先URL
<img src=~>は画像URL

HTMLで画像付きリンクを表示している場合は上記の記述になりまして、表示されるのは下の画像リンク。

 

 

ビジュアルエディタでは【画像編集】から【CSSクラス】を指定できていましたが、HTMLの場合はコードを使ってクラス指定しなければなりません。

なので以下の様に書き換えます。

<a href=”https://wordpress.marumado.net/stork-customize-1/”><img class=aaa src=https://wordpress.marumado.net/wp-content/uploads/2017/08/170803-103606.png></a>

<img class=aaa src=~> CSSクラスを『aaa』に指定した画像URL

HTMLで画像付きリンクを表示している場合に『CSSクラスを与えるコード』は上記の記述になりまして、表示されるのは下の画像リンク。

しっかり枠が消えていますので『CSSクラスの適用』が反映しているという事になります。

 

詳しくはこちらの記事に書いてますので参考にしてください。

 

タイタニックのエンディングがすごすぎる