ブログの絵文字のサイズを小さくした【CSSのクラス指定】

教室のブログを見ていたら、気になる点が……

わかりますか？

絵文字の部分が不自然に大きいんです。

しかも、灰色の枠までついている。

ということで、CSSをちょっといじります。

デベロッパーツールでCSSを確認する

Chromeのデベロッパーツールで検証してみると、「.iwe-border-bold img」に該当するようです。

絵文字ですが、インライン画像の挿入になっているんですね。

ということで、文章中の画像には境界線が表示されないようにする必要があります。

ところが、この「.iwe-border-bold img」のCSSを編集すると、ついでに通常の画像の枠線やサイズにも影響してしまいます。

どうしたものか……

そこで気づいたのが、<p>タグの中にあるimg（インライン画像）にだけCSSを適用すればいいのでは？ということです。

で、できたCSSがこちら。

/* 絵文字のボーダーをなしに*/
 .iwe-border-bold p img, .iwe-border-bold p amp-img {
  border: 0.1px solid #fff;
	height: 1.3em;
	top: 0.2em;
}

「p img」とタグを重ねることで、CSSの対象を絞り込んでいます。

結果は…

ちゃんと絵文字が文字のサイズ（1.3em）になっていますね😄

こちらもどうぞ