Blogger：情報欄のCSSを追加する

対象

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

要件

過去記事：ワンポイント注意書きCSSを追加 と同じ感じで青色の保続情報(class='info')を作成したい。

対応

class="notice"（赤色系統）と対になるような、補足・情報（Info）ブロック用の青色系 class="info" のCSSを作成する。
追加CSSの末尾（]]></b:skin<: の直前）に、以下のコードを貼り付けて保存。

/* --- info（補足情報・青文字）スタイル --- */
#single-content .info {
  color: #1e40af !important;            /* 視認性の良い濃い青色テキスト */
  background-color: #eff6ff !important; /* 薄い青色の背景 */
  border: 1px solid #bfdbfe !important; /* 青系統の枠線 */
  border-left: 4px solid #3b82f6 !important; /* 左側に太いZennブルーライン */
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 1.2em 0 !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}

/* info内のリンク色 */
#single-content .info a {
  color: #1d4ed8 !important;
  text-decoration: underline;
}

表示例