かげさんの111から始まるHistory » ウェブログ・ココログ関連 CSS » 記事内で特定条件の画像だけボックスシャドウを付ける

« 記事内の見出し改善 | トップページ | Twitterのハッシュタグ »

2020.02.19

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

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

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

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

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

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

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

修正前の状態

00before

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

何も考えずに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 枠線の設定

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

01afterng

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

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

この絵文字は、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を確認すると

02afterok

うん、イイ感じ!

まとめ

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

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

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

ここまではOKだ



| | コメント (0)

このエントリーへのリンク

このエントリーのリンクを入れるHTML:

コメント

このブログの新着コメントをRSSリーダに登録する為のxml




←名前とメールアドレスは必須です。
URLも記入すれば、URLのみが公開されます。
メールアドレスのみですと、メールアドレスが公開されてしまいますので、御注意ください。

↓コメント本文では、「a href」「b」「i」「br/」「p」「strong」「em」「ul」「ol」「li」「blockquote」「pre」のタグが使えます。絵文字をクリックすると、本文にタグを挿入できます。