Configure custom emoji

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

:bookmark: This guide explains how to configure custom emojis on your Discourse site.

:person_raising_hand: Required user level: Administrator

Configuring custom emoji

Want to change emoji for your Discourse site? Let’s take a look at how to configure custom emoji for your Discourse site, including selecting emoji sets, uploading new emoji, and adjusting emoji sizes.

Selecting an emoji set

Discourse comes with seven different emoji sets:

  • Apple/International style
  • Google style
  • Twitter style
  • Emoji One style
  • Win10 style
  • Google Classic
  • Facebook Messenger

image
image1563×698 20.3 KB

You can select an emoji set at /admin/config/emoji/settings?filter=emoji%20set along with other emoji-related settings.

Adding custom emoji

To add custom emoji:

  1. Navigate to: Discourse Admin - Config - Emoji at /admin/config/emoji
  2. You can:
    • Enter a name and click Add emoji to upload a photo as an emoji
    • Drag and drop up to 10 files into the Name field to bulk upload; filenames will be used as emoji names.

image
image2430×1022 97.2 KB

image
image1551×845 24.6 KB

image
image2147×918 64.8 KB

Resizing custom emoji

By default, all emoji are resized via CSS to 20x20, but this can be overridden with custom CSS. To maintain the correct aspect ratio and native size in posts, add the following 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;
}

To customize a specific emoji’s size, use:

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

For resizing emoji in chat messages and user status in chats:

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

Last edited by @martin 2025-01-23T05:07:38Z

Check documentPerform check on document:
「いいね！」 33
30

カスタム絵文字/スマイリーがチャットメッセージやチャットのユーザーのステータスで20x20で表示されることに気づきました。私はこのように解決しました。

div.chat-message-text img.emoji[src*="uploads"] { /* チャットメッセージ */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* チャットのユーザーのステータス */
    width: auto;
    height: auto;
}

あなたもこのようにしますか？もしそうなら、この上記のwiki投稿に追加すると役立つかもしれません。もしそうでなければ、私のCSSコードを最適化させていただきます。 :wink:

「いいね！」 3
31

新しい絵文字をカスタマイズしましたが、他の絵文字の中に見つけることができません。

「いいね！」 1
32

絵文字ピッカーの一番下までスクロールしましたか？カスタム絵文字グループはそこにあります。

image
image841×636 51.4 KB

「いいね！」 2
33

これらが変更されました。

34

カスタム絵文字の一括アップロードについて、いくつか試してみましたが、うまくいかなかったので、今後の最適な方法について質問させていただきます。

私は、自分のDiscourseすべてにアップロードしたいカスタム絵文字の小さなコレクションを持っています。その中にはFontAwesomeのアイコンもあり、DiscourseのUIアイコンをユーザーに説明できるように、コンポーザーの投稿で:icon-name:として利用できるようにしたいと思っています。また、ヨークシャーの旗のように、単に楽しみのためだけのものもあります。それらはフォルダーに入っています（そして、GitHubリポジトリにオンラインで置くことも簡単にできると思います）。

これらのフォルダー全体を、一度にカスタム絵文字のUIにアップロードできるようにしたいと考えています。現在のところ、アップロード制限は、simultaneous_uploads（「コンポーザーにドラッグ＆ドロップできるファイルの最大数」）のサイト設定を尊重していますが、上限値は20に制限されています（一時的に増やそうとしても、「simultaneous_uploads：値は0〜20の間でなければなりません」というエラーが表示されます）。

他の絵文字設定であるexternal-emoji-urlにも興味を持って調べました。これは、外部絵文字セットのURLを設定できるものですが、残念ながら、これはすべての「標準」絵文字を置き換えてしまうため、失いたくありません。

私が本当に必要なのは、カスタム絵文字のフォルダーアップロードが、現在個々のカスタム絵文字に対して行われているように機能することだけです。あるいは、許可されるアップロードの数に制限がない場合（おそらく、アップロードジョブをSideKiqに送信して非同期的に実行し、完了したらPM管理者に通知するなど）

Discourse REST APIの使用も検討しましたが、カスタム絵文字はREST APIを通じて公開されていません。アップロードはAPIで公開されており、これは動作させることができましたが、アップロードにcustom_emojiタイプを使用しても、リストに表示されません。

コミュニティが最良の方法は何だと思うか疑問に思っています。

  • カスタム絵文字の一括作成を自動化するRakeタスク？
  • Railsコンソールで実行？
  • 管理UIのアップロード制限を変更して、一度に数百のアップロードを許可する？
  • 管理UIに「フォルダーアップロード」を追加する？
  • カスタム絵文字を、GitHub URLから追加できるテーマコンポーネントとしてデプロイできるようにする？（これが一番簡単で気に入っています）
  • 複数の外部絵文字URLを許可して、絵文字セットとカスタム絵文字の両方を持つことができるようにする（GitHub Pagesリポジトリから提供されるなど）
  • URLで指定できる単一の「絵文字とカスタム絵文字」リポジトリをハックする？

または、DiscourseがUIで使用しているFontAwesomeアイコンすべてを、:icon-name:構文を使用してコンポーザーで利用できるようにする別の方法はありますか？本当にやりたいことの大部分はこれに関連しています。UIアイコンをコンポーザーで利用できるようにするサイト設定があれば、90％達成できます。

「いいね！」 2
35

同様のユースケースに Discourse Icon のテーマコンポーネントを使用しましたが、お役に立ちますか？

トピックからの例：

これは[wrap=icon id=far-square][/wrap]アイコンで、[wrap=icon id=pencil][/wrap]アイコンです。

これはアイコンで、アイコンです。

「いいね！」 3
36

@JammyDodger さん、ありがとうございます。それは参考になりますし、検討したい選択肢の一つです。[wrap=icon id=icon-name][/wrap]という構文のUXは:icon-name:ほど良くはありませんが。

Discourse Iconのアプローチの欠点は、使用したいアイコンのリストをすべて手動でsvg icon subsetサイト設定に追加しなければならないことです。しかし、少なくともテキストファイルからリストをコピー＆ペーストすることで、一度に完了できます。

「いいね！」 1
37

あなたの説明からすると、それほど多くを追加する必要はないはずです。この設定は、より多くのアイコンを追加するためのものです。フォーラムで使用されているすべてのアイコンはすでに利用可能です。

「いいね！」 1
38

どこで利用可能ですか？もし利用可能なら歓迎しますが、:icon-name: のような構文でアクセスできないようです。

例えば、タイムゾーンを認識する日時を投稿に追加するには、コンポーザーのツールバーにある :calendar-days: ボタンを使用することを簡単に伝えたいだけです。しかし、含まれている絵文字/アイコンを検索しても、最も近いものは :spiral_calendar: しか見つかりません。

39

ラップ構文と Discourse アイコンを svg icon subset に追加せずに機能させます。

回答は、すべてのアイコンを追加しなければならないというあなたのコメントに言及していました。

:calendar-days: を [wrap=icon id=calendar-days][/wrap] に置き換えるために #watched-words を使用すると機能するかもしれません :thinking:

「いいね！」 4
40

ああ、わかりました、ありがとうございます。誤解して申し訳ありません。これは素晴らしいです。つまり、ラップ構文を使用して、どこでも を使用できるということですね！毎日が Discourse の学校の日です！

唯一足りないのは、必要なアイコンの Discourse 名を簡単に検索できる機能ですが、ブラウザインスペクターを使用して d-icon- 名を見つけて調整することはいつでもできると思います。または FontAwesome のウェブサイトを使用することもできます。

@Moin さん、ありがとうございます。

「いいね！」 2
41

以前Discourseを更新してから（数日前）何かが変わりました。

代わりに

image

今はこう見えます

image

CSSを確認すると、この絵文字のHTML内にaspect-ratio: 20 / 20;というstyleがあります。これを無効にすると、絵文字は本来の見た目になります。

どうすればよいでしょうか？

（ちなみに、「Choker」は特に意味はありません。スキューバダイビングに関するもので、他のことではありません :stuck_out_tongue: ただ、投稿内のテキストのサイズを見るためだけです。）

42

テーマにこれらのCSS行を追加できます

.emoji-custom {
    aspect-ratio: unset !important;
}
「いいね！」 2
43

ありがとうございます。うまくいきました！:+1:

いくつか質問させてください。

最新リリースでアスペクト比を設定する目的は何ですか？

また、上記のコードはなぜコアのDiscourseに含まれていないのですか？他の何かを壊してしまうからですか、それともカスタム絵文字/スマイリーを使用している人が少なすぎるからですか？

「いいね！」 2
44

正直わかりませんが、この議論に関連していると思います。

「いいね！」 2