このガイドでは、選択可能な絵文字セット、新しい絵文字のアップロード、サイト設定の構成、絵文字サイズの調整を通じて、Discourseサイトの絵文字をカスタマイズする方法について説明します。
必要なユーザーレベル: 管理者
絵文字セットの選択
Discourseは現在、5つの絵文字セットをサポートしています。
- Fluent UI
- Noto
- OpenMoji
- Twemoji
- Standard (Unicode)
各セットの外観の概要については、この絵文字セット比較を参照してください。/admin/config/emoji/settingsでemoji_setサイト設定を、その他の絵文字関連の設定とともに構成できます。
カスタム絵文字の追加
カスタム絵文字を追加するには:
-
/admin/config/emojiで管理 - > 外観 - > 絵文字に移動します -
:kbd:
絵文字を追加ボタンをクリックして、絵文字画像を名前付け、分類、アップロードします
アップロードする画像ファイルが複数ある場合は、ファイルピッカーで最大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;
}