記事内で特定条件の画像だけボックスシャドウを付ける
どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか?
初めての方、いらっしゃい!
複数回目の方、再訪問ありがとです(・∀・)
昨日の記事「記事内の見出し改善」では、
見出しの描画を改善する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だ
コメント
このブログの新着コメントをRSSリーダに登録する為のxml