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

[Discourse]

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

必須ユーザーレベル：管理者

CSSを使用してユーザーカードをカスタマイズすると、表示される外観と情報をパーソナライズできます。

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

ユーザーカードはCSSでカスタマイズできます。以下に、使用できるCSSカスタマイズの例をいくつか示します。

ユーザーカードの背景色の変更

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

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

ユーザーカードの周りに境界線を追加する

ユーザーカードの周りに境界線を追加するには：

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

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

ユーザーカードのユーザー名のフォントと色を変更するには：

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

特定の要素の非表示

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

.user-card .map-location,
.user-card .user-info .join-date {
    display: none;
}

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

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

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

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

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

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

さらに、次の手順でユーザーカードにカスタムユーザーフィールドを追加できます。

1. /admin/customize/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);
}