【ワードプレス】画像に自動で枠をつけるCSS・特定の画像の枠を外すCSS

『画像を枠で囲む方法』【STORKを1日でカスタマイズ】で紹介していますが、今回はその応用編です。

 

【おさらい】画像に枠を付けるCSS

/* 画像に枠【aaa】 */
img.aaa {
border: solid 2px #848484; 
box-shadow: 2px 2px 3px #848484;
}

【追加CSS】に上のコードをコピペ 【投稿エディタ】で枠を付けたい画像を選択し【画像CSSクラス】に『aaa』を与えれば枠が付く

この方法の面倒な所は『画像1つ1つにクラスを与えていかなければいけない』って部分ですね。

100個の画像に枠を付けたければ100個全てクラス指定しなければ枠が付かない。1個2個ならいいけど、さすがに数が増えると面倒くさいって話です。

 

 

面倒だから全部の画像に枠つけちゃえCSS

/* コンテンツ内の全ての画像に枠 */
#inner-content img{
border: solid 2px black;
box-shadow: 2px 2px 3px #848484;
}

【追加CSS】にコピペすれば自動で全ての画像に枠が付きます。

 

 

特定の画像だけ枠はずしちゃえCSS

/* 【aaaクラス】の枠だけを消す */
img.aaa {
border:none !important;
box-shadow:none !important;
}

この命令もコピペしておけば、画像のCSSクラスを【aaa】に指定する事で特定の画像だけ枠が外れます。

『記事の画像全てに枠を付けている』っていう方は、このCSSだけでもかなり効率アップになるはずです。是非導入して頂きたいシステムの1つ。

 

 

サイドバーに設置した画像の枠を消す

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

 

画像ウィジェットの場合

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

 

HTML記述の場合

<a href=”https://marumado.net/airon-bi-zu-sukarumiryo-ne/”><img src=https://wordpress.marumado.net/wp-content/uploads/2018/02/IMG_1632.jpg></a>

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

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

CSSクラスに何も指定してないので枠がついてます。

投稿エディタでは【画像編集】から【CSSクラス】を指定できていましたが、HTMLの場合はコードを使って指定しなければなりません。なので以下の様に書き換えます。

 

 

 

<a href=”https://marumado.net/airon-bi-zu-sukarumiryo-ne/”><img class=aaa src=https://wordpress.marumado.net/wp-content/uploads/2018/02/IMG_1632.jpg></a>

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

CSSクラスに『aaa』を指定したので枠が消えました。

 

【おまけ】画像ウィジェットとHTML記述の違い

『画像ウィジェット』の方が管理も設定も楽なので初心者的には助かります。しかし欠点が1つありまして『画像を縦に複数連続で表示させた場合、画像と画像の間にかなりの空間が入る』

『HTML』だと英文だらけで見にくいし、設定も難しいし、リンク先URLと画像URLを取得してこなくてはいけないから面倒くさい。その代わりに『画像と画像の間が限りなく詰まる』

両者を比べてみましょう。左が『画像ウィジェット』右が『HTML』です(スマホ閲覧の場合は上が『画像ウィジェット』下が『HTML』)

こうやって比べてみると横にも空白ができてますね。

画像が最大まで拡大できないんでしょう。

サイドバーにコンテンツをギチギチに詰めたい方は『HTML記述』で画像を貼る方法をおすすめします。

 

 

専門学校の時、一緒に昼ごはんを食べていたハトに会ってきました