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

スタッフ通知を使い始めたばかりですが、どの投稿に関するものなのかが分かりにくいことに気づきました。上の投稿に関連しているのか、下の投稿に関連しているのかを判断するのが非常に難しいと思います。

投稿を区切る区切り線の下に配置する方が理にかなっていると思いませんか?

「いいね!」 3

お使いのテーマが原因の部分もあるかと思います。通知の下部の角が丸いため、下の投稿から切り離されているように感じられます。デフォルトのテーマであるMetaでは、こちらの方が良いように思われますか?(例として、このトピックにいくつかの通知を追加しました)

「いいね!」 3

デイビッド、ありがとう。しかし、テーマなしで試しましたが、まだはっきりしません。ここに載せた例は、一つは最初の投稿であり、もう一つはトピックマップで区切られているため明白です。そこを超えると、慣れていないとどちらの方向に行くのか分からないでしょう。これを試してください。これらの通知を削除し、ここに返信して、私の返信に通知を追加してください。

私も参加したいです :slight_smile:

編集:正しく表示されているようです

「いいね!」 2

むしろ、パディングが少し足りないくらいです。
image

上記のDavidの投稿の通知を削除すると、どの投稿を指しているのか非常に混乱しやすいと思います。今日、モデレーターにこの機能を見せたところ、すぐに「まったくわかりにくい」という反応でした。

「いいね!」 2

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

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

今日、すべての投稿通知にグローバルに適用できる代替案は、アバターの前に挿入するカスタム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

素晴らしいアイデアですね、トッド!自分だけがおかしいわけではないと知って嬉しいです :wink:

下向き矢印の表示に問題があったので、少し修正し、きれいに整え、テーマとの互換性のために三次色を使用しました。

.post-notice p::before {
  content: "\2B07\FE0E";
  color: var(--tertiary);
  margin-right: .5rem;
}

#post_1 .post-notice p::before {
  content: "\29BF\FE0E";
}
「いいね!」 2

投稿がトピック内でどのように並べられ、スクロールする際に、下にある投稿を参照しているように感じられるのは自然で論理的です。矢印は良いタッチであり、より多くの表示のための良い解決策です。スタッフの通知で参照を少し使用することもできます。:slight_smile:

「いいね!」 3

悪気はないのですが、それは「知っていて慣れているから、自分にとっては自明に感じる」というようなことのように思えます。スタッフの通知は、投稿が公開された後にしか設置できないことは明らかだと思います。したがって、物事が「順番通り」に進むのであれば、スタッフの通知がその後に来ることを期待するのが自然です。

個人的には、@davidkingham が指摘している点は確かに一理あると思います。曖昧です。一目で誰にでもより明確にわかるようにした方が良いでしょう。現状ではそうではありません(投稿の先頭に表示したいのであれば、例えば投稿者の名前の下にスタッフの通知を表示することで、さらに明確になるでしょう。技術的にはより複雑であったり、他の理由で好ましくないかもしれませんが)。

一部のテーマ(現在使用中のMeta Brandedテーマなど)では、スタッフ通知が投稿を区切る線の下に表示されるため、通知が何を参照しているのかが明確になります。
他のテーマでも同様に採用できないでしょうか?

「いいね!」 1

そうかもしれませんね。 :thinking:

私が言おうとしていたこと(しかし下手だった)は、トピックをスクロールするとき、投稿の論理的な時間順序にもかかわらず、下の投稿を参照しているように思えるということです。

「いいね!」 1

最初のスタッフ通知には線がないのに、残りの通知にはあるのはなぜですか?

個人的には、ここで議論されている問題のため、スタッフ通知は使用していません。より多くの露出を試みましたが、右に移動することはおそらく必要です。

投稿の上にではなく、下にスタッフの通知を表示するにはどうすればよいですか?

すみません、CSSで何かできますか?

「いいね!」 1

個人的にも、通知は投稿の後に表示する方が論理的だと思います。まだ簡単な方法を見つけられていませんが、一時的な解決策としてこのCSSスタイルを追加しました。

.post-notice.custom {
    background: linear-gradient(to bottom, rgb(255 0 5) 0%, rgba(255, 137, 139, 0.2) 2%, rgba(255, 137, 139, 0) 70%);
}

これで通知は以下のようになります。

グラデーションの方向のおかげで、どこが「論理的な続き」であるかが直感的にわかります。
.customクラスを持つルールを使用したことに注意してください。このクラスは、たとえばユーザーが最初のメッセージを投稿したときや、長い期間後に投稿したときに作成される自動通知には適用されないためです。そのような場合、別のグラデーションカラーを使用できます。

ちなみに、通知に適用できる他のクラスがあるかどうか、また.customクラスはスタッフ通知にのみ適用されるのか、それとも他の場所でも適用されるのかを知りたいです。

「いいね!」 1