このガイドでは、Discourseサイトでカスタム絵文字を設定する方法について説明します。
必要なユーザーレベル: 管理者
カスタム絵文字の設定
Discourseサイトの絵文字を変更したいですか？絵文字セットの選択、新しい絵文字のアップロード、絵文字サイズの調整など、Discourseサイトでカスタム絵文字を設定する方法を見てみましょう。
絵文字セットの選択
Discourseには11種類の異なる絵文字セットが付属しています。
- Apple/International スタイル
- Facebook Messenger
- Fluent UI
- Google スタイル
- Google Classic
- Noto
- OpenMoji
- Twemoji
- Twitter スタイル
- 標準 (Unicode)
- Win10 スタイル
絵文字関連のその他の設定とともに、/admin/config/emoji/settings?filter=emoji%20set で絵文字セットを選択できます。
カスタム絵文字の追加
カスタム絵文字を追加するには:
- 以下に移動します:
Discourse 管理-設定-絵文字(/admin/config/emoji) - 次のいずれかを行うことができます:
- 名前を入力し、
絵文字を追加をクリックして写真を絵文字としてアップロードします - 10個までのファイルを
名前フィールドにドラッグアンドドロップして一括アップロードします。ファイル名が絵文字名として使用されます。
- 名前を入力し、
絵文字の設定
絵文字がサイトでどのように動作するかをカスタマイズするには、/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を追加します。
/* 絵文字を通常のサイズにする（正方形に強制しない） */
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;
}