Configurar emoji personalizado

[Discourse]

このガイドでは、Discourseサイトでカスタム絵文字を設定する方法について説明します。

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

カスタム絵文字の設定

Discourseサイトの絵文字を変更したいですか？ 絵文字セットの選択、新しい絵文字のアップロード、絵文字サイズの調整など、Discourseサイトでカスタム絵文字を設定する方法を見てみましょう。

絵文字セットの選択

Discourseには11種類の異なる絵文字セットが付属しています。

• Apple/国際スタイル
• Facebook Messenger
• Fluent UI
• Googleスタイル
• Googleクラシック
• Noto
• OpenMoji
• Twemoji
• Twitterスタイル
• 標準（Unicode）
• Win10スタイル

絵文字セットは、その他の絵文字関連の設定とともに、/admin/config/emoji/settings?filter=emoji%20setで選択できます。

カスタム絵文字の追加

カスタム絵文字を追加するには：

1. 次の場所に移動します：Discourse Admin - Config - Emoji （/admin/config/emoji）
2. 次のいずれかを行います。
   • 名前を入力し、「Add emoji」をクリックして写真を絵文字としてアップロードします。
   • ファイル名を絵文字名として使用し、最大10個のファイルをNameフィールドにドラッグアンドドロップして一括アップロードします。

絵文字の設定

絵文字がサイトでどのように動作するかをカスタマイズするには、/admin/config/emoji/settingsで絵文字設定にアクセスできます。

• enable_emoji - Discourseインスタンスでの絵文字の表示と使用を有効にします。無効にすると、絵文字はレンダリングされず、ユーザーはテキストフィールドで絵文字にアクセスしたり使用したりできなくなります。
• emoji_set - 好みの絵文字スタイルを選択します。異なる絵文字セットは、サイトに表示される絵文字に独自の外観を提供できます。
• max_emojis_in_title - トピックタイトルで許可される絵文字の最大数（デフォルト：1）。設定値がゼロの場合、トピックタイトルでの絵文字の使用が防止されます。
• enable_emoji_shortcuts - :) :p :( などの一般的なスマイリーテキストが絵文字に変換されます。
• emoji_autocomplete_min_chars - 絵文字のオートコンプリートポップアップをトリガーするために必要な最小文字数（デフォルト：0）。
• enable_inline_emoji_translation - インライン絵文字（前後にスペースや句読点がないもの）の翻訳を有効にします。
• emoji_deny_list - これらの絵文字は、メニューやショートコードで使用できなくなります。
• external_emoji_url - 絵文字画像の外部サービスのURL。デフォルトを使用する場合は空白のままにします。
• discourse_reactions_enabled_reactions - 有効なリアクションのリストを定義します。ここでは任意の絵文字が許可されます。デフォルトのリアクション：+1、laughing、open_mouth、clap、confetti_ball、およびhugs。
• discourse_reactions_excluded_from_like - 「いいね」としてカウントされないリアクション。このリストにないリアクションは、バッジ、レポート作成、その他の目的で「いいね」としてカウントされます。
• discourse_reactions_allow_any_emoji - これが有効な場合、リアクションピッカーでユーザーがあらゆる絵文字を選択できるようにするボタンが追加されます。メンバーはカスタム絵文字を含む任意の絵文字を選択してリアクションできるようになります。利用可能なリアクションを制限するには、emoji_deny_listサイト設定を使用します。

カスタム絵文字のサイズ変更

デフォルトでは、すべての絵文字はCSSによって20x20にリサイズされますが、これはカスタムCSSで上書きできます。投稿内で正しいアスペクト比とネイティブサイズを維持するには、次のCSSを追加します。

/* Make emoji normal size (don't force square) */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

特定の絵文字のサイズを変更するには、次を使用します。

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

チャットメッセージやチャットのユーザー状態の絵文字をリサイズするには：

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}