WordPressでQiita風のインフォ・ワーニング・アラートを表示するためのCSS設定

外観 > カスタムCSSに以下のコードを追加

/* Qiita風のインフォ・ワーニング・アラート */
.q-note {
  border-radius: 8px;
  padding: 16px;
  margin: 24px 0px;
}

.q-info {
  background-color: #dff4cf;
}

.q-info::before {
  font-family: FontAwesome;
  content: "\f058";
}

.q-warn {
  background-color: #fff0b3;
}

.q-warn::before {
  font-family: FontAwesome;
  content: "\f06a";
}

.q-alert {
  background-color: #ffdbdb;
}

.q-alert::before {
  font-family: FontAwesome;
  content: "\f05e";
}
/* ここまで Qiita風のインフォ・ワーニング・アラート */

ブロックエディターの「段落」を「HTMLとして編集」を選択して

<p class="q-note q-info">インフォ<br>インフォの内容です。<br></p>

とすると、下記のように表示されます。

インフォ
インフォの内容です。

classのq-infoのところを、ワーニングの場合はq-warn、アラートの場合はq-alertにすればワーニングもアラートも同じように表示できます。

ワーニング
ワーニングの内容です。

アラート
アラートの内容です。