ユーザーカードのカスタマイズ

[Discourse]

このガイドでは、Discourse 上でユーザーカードを表示するかどうか、またその表示方法をカスタマイズする方法について説明します。これには、カスタムフィールドの追加やユーザープロフィールの非表示も含まれます。

必要なユーザーレベル：管理者

CSS を使用してユーザーカードをカスタマイズすることで、表示される外観や情報を個別に設定できます。

ユーザーカードのカスタマイズ

ユーザーカード は CSS でカスタマイズできます。以下に、使用可能な CSS カスタマイズの例を示します。

背景色の変更

ユーザーカードの背景色を変更するには：

.user-card {
    background-color: #f0f0f0;
}

ユーザーカードの周囲に枠線を追加

ユーザーカードの周囲に枠線を追加するには：

.user-card {
    border: 2px solid #4CAF50;
    border-radius: 10px;
}

ユーザー名のフォントと色の変更

ユーザーカードに表示される主要な名前/ユーザー名のフォントと色を変更するには：

.user-card .name-username-wrapper {
    font-family: 'Arial', sans-serif;
    color: #FF5733;
}

特定の要素の非表示

ユーザーの所在地や参加日などの特定の要素を非表示にするには：

.user-card .location,
.user-card .metadata__user-created {
    display: none;
}

ユーザーグループまたは特定のユーザーに基づいた外観のカスタマイズ

特定のユーザーグループまたはユーザーに対してユーザーカードの外観をカスタマイズするには：

/* 特定のユーザーグループのカスタマイズ */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 特定のユーザー名のカスタマイズ */
.user-card.user-card-Username {
    background-color: #FFD700;
}

ユーザーのプライマリグループのみがクラスセレクターとして設定されます。ユーザーにプライマリグループがない場合、クラスセレクターは group-null となります。

カスタムユーザーフィールド

さらに、以下の手順を実行することで、ユーザーカードに カスタムユーザーフィールド を追加できます：

1. /admin/config/user-fields ページに移動します。
2. ユーザーカードに表示したいフィールドについて、「Show on user card?（ユーザーカードに表示する）」チェックボックスを選択します。

すべてのユーザープロフィールの非表示

ユーザープロフィールを一般から非表示にする必要がある場合は、以下のサイト設定を使用できます：

• hide user profiles from public（一般からユーザープロフィールを非表示にする）：匿名ユーザーに対してユーザーカード、ユーザープロフィール、ユーザーディレクトリを無効にします。

その他のカスタマイズ

他のカスタマイズは、テーマコンポーネントを通じて行うことも可能です。例としては以下があります：

• プロフィール上のクリック可能なソーシャルアイコンリンク
• ユーザーカードディレクトリ
• 「最後にアクセスした」ユーザーカード

[Mason_L]

@Discourse

.user-card[data-user-card="specific_username"] {
    background-color: #FFD700;
}

この部分は機能しません。
‘user-card’ クラスの下に ‘data-user-card’ はありません。

[Turtle]

サイトのどこでも管理者のユーザー名を青色にしたいのですが、どこでも機能するユーザー名のセレクターがあるかどうかわかりません。以下はCSSですが、機能しません。

.group-admins .user-card .username {
    color: #2596be;
}

何か考えやアイデアはありますか？これは2年以上前に公開されたものなので、セレクターが違うのでしょうか？ @SaraDev さん、あなたがこれを書いた方のようですが、何かご存知ですか？

[manuel (Manuel Kostka)]

はい、これは最新ではないようです。現在の宣言は次のようになると考えられます。

@Discourse

/* 特定のユーザーグループ用にカスタマイズ */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 特定のユーザー名用にカスタマイズ */
.user-card.user-card-Username {
    background-color: #FFD700;
}

また、ユーザーのプライマリグループのみがクラスセレクターとして設定されます。ユーザーにプライマリグループがない場合、クラスセレクターは group-null になります。

つまり、管理者やモデレーターのユーザーカードをターゲットにすることはできません。これらのグループはプライマリグループとして設定できないためです。メタの管理者カードを検査すると、クラスセレクターが group-team であることがわかります。

[SaraDev (Sara Devlaeminck)]

@Turtle

サイトのどこでも管理者のユーザー名を青色にしたいのですが

@manuel

現在の宣言は次のようになると考えられます。

@Discourse

/* 特定のユーザーグループをカスタマイズ */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 特定のユーザー名をカスタマイズ */
.user-card.user-card-Username {
    background-color: #FFD700;
}

また、ユーザーのプライマリグループのみがクラスセレクターとして設定されます。ユーザーにプライマリグループがない場合、クラスセレクターは group-null になります。

これは正しいことを確認できます。ユーザーグループまたは特定のユーザーに基づいてユーザーカードの外観をカスタマイズするための、現在の最善の方法です。

これを指摘してくれた @manuel と @Turtle に感謝します。

ここでもガイドをこの情報で更新しました。

[Turtle]

カードのユーザー名の色を変更したい場合はどうすればよいですか？何を追加すればよいですか？すみません、CSSセレクターについてはあまり詳しくありません。

[SaraDev (Sara Devlaeminck)]

@Turtle

カードのユーザー名の色を変更する

この種のカスタマイズには、次のCSSを使用します。

.name-username-wrapper {
   color: #f47dff;
}

これにより、サイト上のすべてのユーザーのユーザーカードのusername要素の色がカスタマイズされます。

例：

また、サイトでのこのようなカスタマイズに使用する特定のCSSセレクターを見つけるのに役立つように、以下を参照してください。適切なCSSセレクターを見つける

[jrgong]

簡単な提案です。ユーザーのアバターの背景色がユーザーカードと同じ場合、適切な区切りがありませんでした。

ユーザーカードのアバター画像に同じbox-shadowを追加しただけで、うまくいきました。

.user-card .first-row .avatar {
    box-shadow: var(--shadow-dropdown);
}