情報ありがとうございます ![]()
UX でユーザー名を優先するが有効になっている場合、ユーザーのユーザー名とフルネームが同じであれば、各投稿にユーザー名が表示されます。
そして、CSS のみでユーザー名を非表示にしたい場合、前の要素をターゲットにできないため、行き詰まってしまいます。
たとえば、次のような 2 つの投稿があります。
-
ユーザー名
- 投稿内容
-
ユーザー名 フルネーム
- 投稿内容
ユーザー名とフルネームが異なるユーザーのユーザー名のみを非表示にすることはできません。なぜなら、ユーザー名はフルネームの 前 に表示されるからです。
説明するのが少し難しいです ![]()
CSS のみで解決したい場合は、UX でユーザー名を優先するを無効にして、次の CSS を使用する必要があります。
.names {
.full-name +.username {
display: none;
}
}
名前の下のタイトルについては、この更新された CSS を使用できます。
.topic-meta-data .names {
flex-wrap: wrap;
.user-title {
width: 100%;
order: 1;
}
}
order: 1; は、ユーザーのステータス絵文字がタイトルの隣ではなく、フルネームの隣に表示されるようにします。
これらの CSS をすべて組み合わせると、次のようになります。
前:
.topic-meta-data .names {
flex-wrap: wrap;
.full-name +.username {
display: none;
}
.user-title {
width: 100%;
order: 1;
}
}
後:

