スタッフ通知の配置があいまい

(以前のスタッフ通知の混乱について、古い投稿を再確認していたところ、これを見つけました…)

スタッフ通知の配置は、常に曖昧である可能性があると思っていました。テーマによって色、境界線、区切り線を異なる方法で処理できるため、その方法で解決するのは難しいでしょう。

今日、すべての投稿通知にグローバルに適用できる代替案は、アバターの前に挿入するカスタムCSSです。

image

CSS: アバターの前
.post-notice::before {
  content: '🡇';
}

(または、おそらくより適切に):

.post-notice::before {
  content: " \\1F847";
}

…またはテキストコンテンツの前に:

image

CSS: テキストの前
.post-notice p::before {
  content: " \\1F847";
  margin-right: .5rem;
}

…色を変更するトリックはこちらです:

image

CSS: 色を変更
.post-notice p::before {
  content: " \\1F847\\fe0e";
  color: yellow;
  margin-right: .5rem;
}

(Unicode文字に\\fe0eを追加すると、色を受け入れるテキストバージョンがレンダリングされます。参照。)

そして、メイントピックの通知には下向きの矢印は適切ではないと判断しました。それはトピックをリードしていることがより明白だからです。このCSSは、最初の投稿に対してのみ矢印を箇条書きに置き換えます:

image

CSS: メイントピックで異なる
#post_1 .post-notice p::before {
  content: " \\29BF\\fe0e";
  color: yellow;
  margin-right: .5rem;
}
「いいね!」 1