スタッフユーザーをカスタムアバター、投稿、メンションでより認識しやすくする

ドキュメント サイト管理
, ,
1

スタッフユーザーを他のユーザーにすぐに識別可能にするためのさまざまな方法があります。

モデレーターシールドの表示

モデレーターである、または管理者かつモデレーターであるスタッフユーザーは、ユーザー名の横にモデレーターシールドが表示されます。

image
image444×209 12.3 KB

:left_speech_bubble: ヒント: スタッフユーザーが管理者の役割を持っているがモデレーターではない場合、シールドは表示されません。

シールドの色を変更する CSS

すべてのスタッフユーザーの色を変更する 
/*すべてのスタッフユーザーの色を変更*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

image
image428×285 16.8 KB

トピック内だけでなく、シールドが表示されるすべての場所で色を変更するには、以下のコードを使用します。

span.username.staff .d-icon.d-icon-shield-halved,
.user-card .first-row .names .d-icon.d-icon-shield-halved,
.user-profile-names .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}
管理者ユーザーとモデレーターユーザーを区別する色に変更する 
/*管理者ユーザーとモデレーターユーザーを区別する色に変更*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
}

image
image425×253 15 KB

シールドを非表示にする CSS

投稿でのみシールドを非表示にする 
.names .svg-icon-title {
    display: none;
}
投稿とユーザーカードでシールドを非表示にする 
.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

タイトルの追加

スタッフユーザーは /admin/users/list/staff にアクセスし、自身のアカウントにタイトルを作成できます。このタイトルはスタッフユーザーのユーザー名の横に表示されます。

image
image930×124 9.34 KB

例:

image
image679×572 41.1 KB

既存のタイトルをカスタマイズする CSS

スタッフメンバーのタイトルをカスタマイズする 
.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

image
image707×573 41.3 KB

管理者とモデレーターを区別するタイトルをカスタマイズする 
.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

image
image466×311 16.8 KB

:left_speech_bubble: ヒント: 組織のスタッフユーザーは、実際のサイト管理者やモデレーターである必要はありません。特別な権限を持たないメンバーであっても構いません。タイトルをカスタマイズするには、新しいカスタムグループを作成し、それをプライマリとして設定し、必要なユーザーを追加します。すべてのメンバーにデフォルトで割り当てられる自動タイトルを設定することも可能です。

プライマリカスタムグループに属する非管理者・非モデレーターユーザーのタイトルをカスタマイズする

YOUR-CUSTOM-GROUP をグループ名に置き換えてください。以下の例では .group--community ~ .user-title などです。

image
image284×262 3.11 KB

.group--YOUR-CUSTOM-GROUP ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
  }

image
image480×526 27.8 KB

ユーザーはユーザープロフィールから割り当てられたタイトルとは異なるタイトルを選択できます。この場合、投稿に表示されるタイトルはユーザーが選択したものになります。また、「なし」に設定することも可能で、その場合はタイトルが表示されません。

これを防ぐには、ユーザー側で編集できないように、ゼロからカスタムタイトルを作成することが可能です。

ゼロからカスタムタイトルを作成する CSS

サンプル:

image

ユーザー名の後にタイトルを表示させるヒント 
/*すべての STAFF ユーザーのユーザー名の後にカスタムタイトルを表示
サイト設定「UX でユーザー名を優先」が無効になっている場合は表示されません*/
.username.staff::after {
    content: 'Staff user';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*オプション - ユーザーカードでのサイズを縮小*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*オプション - 投稿でのみモデレーターシールドを非表示*/
.names .svg-icon-title {
    display:none;
}

image

/*管理者ユーザーとモデレーターユーザーを区別するカスタムタイトルをユーザー名の後に表示
サイト設定「UX でユーザー名を優先」が無効になっている場合は表示されません*/
.username {
  &.admin:after {
    content: 'Admin user' !important;
    color: red !important;
    border: 1px solid red !important;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }

  &.moderator:after {
    content: 'Moderator user';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*オプション - 投稿でのみアイコンシールドを非表示*/
.names .svg-icon-title {
  display: none;
}

image
image518×308 18.6 KB

フルネームの後にタイトルを表示させるヒント 
/*すべての STAFF メンバーのフルネームの後にカスタムタイトルを表示*/
span.staff :after {
  content: "Staff";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

image

/*管理者ユーザーとモデレーターユーザーを区別するカスタムタイトルをフルネームの後に表示 */
span {
  &.admin :after {
    content: "Admin" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Moderator";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

image
image518×295 18.4 KB

質問: カスタムタイトルを両方追加できますか？

はい、可能ですが冗長になります。以下の例をご覧ください:

.username.staff::after {
    content: 'Staff user';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*オプション - ユーザーカードでのサイズを縮小*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*オプション - モデレーターシールドを非表示*/
.names .svg-icon-title {
    display:none;
}


span {
  &.admin :after {
    content: "Admin" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Moderator";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

image
image587×326 19.7 KB

アバターフレアの追加

スタッフユーザーのアバターの右下にフレアを追加できます。

image
image395×293 16 KB

カスタムグループを作成し、スタッフユーザーをメンバーとして追加し、そのグループをプライマリにする必要があります。詳細については、Add group flair on member avatars をご覧ください。

アイコンの代わりにカスタム画像を追加したい場合は、画像をウェブサイトにアップロードし、リモートテーマおよびコンポーネントへのアセットの含め方ガイドに記載されている方法で URL を使用します。テーマのアップロードセクションに画像を追加すると、画像の変数と直接リンクが表示されます。直接リンクを右クリックし、アバターフレア画像フィールドにリンクをコピーします。

スタッフの名前とユーザー名をカスタマイズ

少しの CSS を使用して、投稿でのスタッフユーザー名をカスタマイズできます。

以下に示すのは例に過ぎず、誰もが好みに合わせてスタイルを変更できます！

ユーザー名の色を変更

デフォルトでは、ユーザー名はフルネームの前に表示されます。

すべてのスタッフユーザーのユーザー名の色を変更する 
span.username.staff a {
      color: #00A9DB;
}

image
image391×250 14.8 KB
管理者とモデレーターを区別するユーザー名の色を変更する 
span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

image
image391×254 14.9 KB

このバリエーションは、カスタムタイトルに使用される CSS とほぼ同じです。

span.username {
  &.moderator {
    a {
        color: white;
        background-color: green;
        border-radius: 8px;
        margin-left: 5px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }

  &.admin {
    a {
        color: white;
        background-color: red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }
}

image
image400×248 15 KB

名前の色を変更

フルネームをユーザー名の前に表示させたい場合は、サイト設定 display name on posts を有効にし、prioritize username in ux を無効にしてください。

すべてのスタッフユーザーの名前の色を変更する 
.names span.staff a {
   color: #00A9DB;
}

image
image397×252 15.3 KB

このバリエーションは、カスタムタイトルに使用される CSS とほぼ同じです。

.names span.staff a {
    color: #00A9DB;
    background-color: #D3F5FF; /*明るい色を使用*/
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
}

image
image416×265 16.1 KB

管理者とモデレーターを区別する名前の色を変更する 
.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

image
image408×251 14.9 KB

このバリエーションは、カスタムタイトルに使用される CSS とほぼ同じです。

.names span {
  &.moderator {
    a {
        color: green;
        border: 1px solid green;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }

  &.admin {
    a {
        color: red;
        border: 1px solid red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }
}

image
image406×259 15.9 KB

:left_speech_bubble: ヒント: 何らかの理由で、特定のスタッフメンバー（サイト創設者や特に価値のあるメンバーなど）をカスタマイズしたい場合があります。以下は、特定のユーザーをターゲットにする方法の例です。はい、この方法はスタッフ以外のユーザーにも使用できます。

ユーザー名 
/*USERNAME をユーザーのユーザー名に置き換えてください*/
.topic-meta-data .names span.username a[data-user-card=USERNAME] {
  color: blue;
}

image

名前 
/*USERNAME をユーザーの名前に置き換えてください*/
.topic-meta-data .full-name a[data-user-card=USERNAME] {
  color: blue;
}

image

名前とユーザー名の両方 
.topic-meta-data .names span a[data-user-card=USERNAME] {
    color: blue;
}

image

スタッフ投稿の背景をカスタマイズ

スタッフユーザーは、投稿にあるAdd Staff Color ボタンを使用して、手動でスタッフ色を追加できます。

image
image179×302 4.04 KB

結果は以下のようになります:

image
image793×208 10.5 KB

投稿全体に背景色を追加する

いくつかの CSS コードを追加することで、Add Staff Color ボタンがクリックされたときに、背景色を投稿全体に適用できます。

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*ここで色を変更*/
  }
}

image
image802×300 15.5 KB

この機能を自動化し、CSS を使用してスタッフユーザーが投稿したすべての投稿をさまざまな方法でカスタマイズすることが可能です。これを行うには、前述のようにプライマリカスタムグループを作成する必要があります。詳細については「フレア」章をご覧ください。スタッフメンバーがプライマリグループに属している場合、CSS でその投稿をターゲットにできます。

:left_speech_bubble: ヒント: グループにすべてのスタッフメンバーを追加するか、管理者のみ、またはモデレーターのみを追加するかを選択できます。また、管理者とモデレーター用に 2 つの異なるプライマリグループを作成することも可能です（「admins」と「moderators」は自動グループの名前として既に使用されているため、異なる名前を使用する必要があります）。そして、管理者の投稿とモデレーターの投稿を区別するように CSS を設定します。

すべてのスタッフユーザーの投稿背景を自動的に変更する 

/*GROUP-NAME をグループ名に置き換えてください*/
.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*ここで色を変更*/
}

image
image776×298 20.7 KB

または

.topic-post.group-GROUP-NAME .topic-body { 
    background-color: #ffffd0; /*ここで色を変更*/
}

image
image781×253 14 KB

さらに

/*GROUP-NAME をグループ名に置き換えてください*/

.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*ここで色を変更*/
}

.topic-post.group-GROUP-NAME .names span { 
    background-color: #ffffd0; /*ここで色を変更*/
}

image
image783×215 13.7 KB

すべてのスタッフユーザーの投稿のフォント色とフォントファミリーを自動的に変更する 
/*GROUPNAME をグループ名に置き換えてください*/
.topic-post.group-GROUPNAME .topic-body .cooked { 
    color: #fec601; /*ここでフォント色を変更*/
    font-family: ......; /* ここでフォントファミリーを変更 */
}
最初の投稿ではなく、スタッフの返信の背景のみを自動的に変更する

トピック内の各投稿には post_number という形式の ID が割り当てられています。トピックの最初の投稿の ID は post_1 で、返信の ID は post_2、post_3 などとなります。

最初の投稿を除くすべてのスタッフ投稿に背景を追加したい場合:

/*GROUP-NAME をグループ名に置き換えてください*/
.topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*ここで色を変更*/
}

image
image1270×1000 95.2 KB

スタッフ投稿に追加コンテンツを追加

簡単な署名 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    content: "From your friendly staff";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

image
image802×173 13.2 KB

簡単なロゴ 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    background-image: url("IMAGE-URL");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*画像サイズに応じてこれらの値を変更*/
    width: 138px; /*画像サイズに応じてこの値を変更*/
    height: 36px; /*画像サイズに応じてこの値を変更*/
    display: block;
    float: right;
    content: "";
}

image
image785×196 17.3 KB

言及色のカスタマイズ

参照: Customize mention colors

「いいね！」 58
How to make it obvious who is staff?
How to add a symbol next to someone’s name
Can I display a Font Awesome class icon next to a user Title?
Make Staff Responses More Visible
Help "sorting" my users
Admin / Mod post in different color
Nick or name customize, colorful and icon, how to do it?
Staff color by default for group members
Using CSS to hide specific elements based on user role
Customize mention colors
Adjust user titles to look like “team” or “Tester” above
CSS username colors only working for admin/moderators?
Create custom badges for admin moderator or employee group
The /about page does not display moderators that are also administrators
Update our admins and moderator shields
Flair image and Admin Icon next to my username not visible
Trust Level Permissions Reference
Icons and text next to the user info
Resources for using Discourse in the classroom
Please update 'Understanding Discourse Trust Levels' — or is there a different doc?
As admin I want to be able to change usernames, regardless of filters
Custom Icons for admins and moderators (and other groups)
Avatar flair image not visible for 'Staff' Group
Shield icon for Admins (in discussion threads)
Post Logo doesn't show up
How to display the shield icon on topics and on the admin profile to all members
63

これはどういう意味でしょうか？「スタッフユーザー」という言葉は、フォーラムの運営とは全く関係のない、組織やビジネス（例：従業員）のスタッフのことを指しているのでしょうか？なぜなら、Discourseの文脈では、「スタッフ」は非常に特定の意味、つまりモデレーターや管理者を意味するからです。

もしそうであれば、以下のように変更することを推奨します。

:left_speech_bubble: ヒント: あなたの組織の従業員ユーザーは、実際のサイト管理者やモデレーターである必要はなく、特別な権限を持たない単なるメンバーでも構いません。

「いいね！」 2