記事内で特定条件の画像だけボックスシャドウを付ける

どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか？
初めての方、いらっしゃい！
複数回目の方、再訪問ありがとです(・∀・)

昨日の記事「記事内の見出し改善」では、
見出しの描画を改善するCSSを導入して
「CSS」のカテゴリを作りました。

このブログには、他にもいろいろと
見た目関連で気になってることがあります。

この記事では、以下のことをします。

• 記事内の画像に「枠線」と「ボックスシャドウ」を付ける
• ただし、記事内の画像「全部」ではなく「特定の画像を除外」して
  「枠線」と「ボックスシャドウ」を付ける

修正の前と後を比較できたほうが良いので、
スマホ版の記事でスクリーンショットを撮りました。

修正前の状態

グラフ部分が目立つように
「枠線」と「ボックスシャドウ」を付けたいですね。

何も考えずにCSSを修正すると

「枠線」と「ボックスシャドウ」を付けるCSSは、こんな感じです。

/* 【スマホ用】記事内のimgタグ

 * --------------------------------------------------------------------------- */

.article-body img{

  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);

  border: solid 1px #000000;

}

簡単に説明するとこんな感じです。

• .article-body img 
  article-bodyクラス（ココログスマホ版の記事のクラス）にあるimgタグの設定という意味
• box-shadow ボックスシャドウの設定
• border 枠線の設定

早速、確認してみましょう！

むむむ、グラフ部分だけじゃなく「音符の絵文字」まで
「枠線」と「ボックスシャドウ」が付いてしまいました！

絵文字以外に「枠線」と「ボックスシャドウ」を付ける

この絵文字は、2019年3月に行われた
ココログリニューアル前に使えた絵文字である。

リニューアルで絵文字のバリエーションは減ってしまい、
リニューアル後の絵文字は、リニューアル前と比べて
ダサいというのが、かげさんの印象だ。

ココログリニューアル前に使えた絵文字は
imgタグで直接書くことで今でも使用できる。

リニューアルで元々の記事にあった絵文字は
imgタグに変換されていて、今も表示できる。

それは良いんだけど、絵文字にまで
「枠線」と「ボックスシャドウ」が付くのは、いただけない…。

目的を変更しよう。

”絵文字以外の画像”に「枠線」と「ボックスシャドウ」を付ける。

絵文字のURLは、
「https://emojies.cocolog-nifty.com/emoticon/～.gif」である。
（https化していないココログの場合、https://→http://になる）

imgタグのsrcが「https://emojies.cocolog-nifty.com/emoticon/」
以外から始まるものだけに「枠線」と「ボックスシャドウ」を付ければ良い。

CSSのセレクタで「〇〇以外」とするには、「:not([〇〇])」を使う。

〇〇に”srcが「https://emojies.cocolog-nifty.com/emoticon/」から始まるもの”
と指定すれば良い。

”から始まる”は、一般的な正規表現を使う時と同じ記号「^」を使う。

つまり、〇〇には「src^="https://emojies.cocolog-nifty.com/emoticon/"」が入る。

最終的なCSSは、こうなる。

/* 【スマホ用】記事内のimgタグ

 * ※2019/03リニューアル前に使えた絵文字以外の場合、

 * 　枠線とボックスシャドウを付ける

 * （絵文字に枠線とボックスシャドウが付くと見づらいので）

 * --------------------------------------------------------------------------- */

.article-body img:not([src^="https://emojies.cocolog-nifty.com/emoticon/"]){

  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);

  border: solid 1px #000000;

}

変更したCSSを確認すると

うん、イイ感じ！

まとめ

この記事での「CSSセレクタに関連すること」をまとめした。

・CSSのセレクタで「〇〇以外」とするには、「:not([〇〇])」を使う
・”から始まる”は、一般的な正規表現を使う時と同じ記号「^」を使う。

CSSセレクタをうまく使えるようになると便利ですね！

ここまではOKだ