カスタム絵文字を設定する

[Discourse]

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

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

カスタム絵文字の設定

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

絵文字セットの選択

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

• Apple/国際スタイル
• Googleスタイル
• Twitterスタイル
• Emoji Oneスタイル
• Win10スタイル
• Googleクラシック
• Facebook Messenger

絵文字セットは、その他の絵文字関連の設定とともに、/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（デフォルト: https://emoji.discourse-cdn.com）。空白のままにすると無効になります。
• discourse_reactions_enabled_reactions - 有効なリアクションのリストを定義します。ここでは任意の絵文字が許可されます。デフォルトのリアクションには、ハート、笑い、泣き、爆発頭、拍手、紙吹雪ボール、ハグ、シェフのキス、100、+1、ロケット、スターに目がくらむ、discourse、目 が含まれます。
• 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;
}