Blogger：ワンポイント注意書きCSSを追加

対象

以下記事で対応した QuuQデザイン が対象です。
※ 過去記事：デザイン変更

要件

記事本文内で <div class="notice"> や <p class="notice"> を使った際、背景付きのワンポイント注意書き（赤文字・枠線付き）として綺麗に表示されるCSSを追加する。

対応

追加CSSの末尾（]]></b:skin> の直前）に、以下のコードを貼り付けて保存する。

/* --- notice（注意書き・赤文字）スタイル --- */
#single-content .notice {
  color: #dc2626 !important;            /* 視認性の良い赤色テキスト */
  background-color: #fef2f2 !important; /* 薄い赤色の背景 */
  border: 1px solid #fecaca !important; /* 赤系統の枠線 */
  border-left: 4px solid #ef4444 !important; /* 左側に太い赤ライン */
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 1.2em 0 !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}

/* notice内のリンクも赤系統に統一 */
#single-content .notice a {
  color: #b91c1c !important;
  text-decoration: underline;
}

表示例

---

---