特定の絵文字を大きく表示したい!
独自のカスタム絵文字を登録するときに、イラスト付き絵文字を登録した方もいらっしゃると思うのです。
そして、そんなイラストを大きく表示できたらなぁ、なんて思った方も……。
実際、筆者がそんな感じでした。
そこで、先輩鯖缶の方々に教えていただいて、一部のカスタム絵文字を自鯖のアドレスでブラウザから表示したときに大きく表示できるカスタム方法を導入しました。
前提条件
- カスタム絵文字を大きく表示できるのは、ブラウザで見たときのみ
→各種のアプリで見ても、大きくはなりません。 - カスタム絵文字が大きく表示されるのは、自鯖のアドレスで見たときのみ
→少々ややこしいですが、他鯖から見たときは普通に見えてますよ、ということです。
具体的な方法
- ユーザー設定→管理→サーバー設定→外観を見つけます
- カスタムCSSにコードを打ち込みます
〇〇(任意の絵文字コード)に特定の接頭辞を指定した場合、その接頭辞を持つ絵文字が全て拡大されます。/*カスタム絵文字(大サイズ)ここから*/
.detailed-status .status__content p .emojione[alt*=":〇〇(任意の絵文字コード)"], p .emojione[alt*=":〇〇(任意の絵文字コード)"]
{
width: 128px;
height: 128px;
vertical-align: bottom;
}
/*カスタム絵文字(大サイズ)ここまで*/ - 変更を保存します
こんなときはシリーズ
複数の接頭辞に対応させたい!
/*カスタム絵文字(大サイズ)ここから*/
.detailed-status .status__content p .emojione[alt*=":〇〇"],
p .emojione[alt*=":〇〇"],
.detailed-status .status__content p .emojione[alt*=":◆◆"],
p .emojione[alt*=":◆◆"]
{
width: 128px;
height: 128px;
vertical-align: bottom;
}
/*カスタム絵文字(大サイズ)ここまで*/
接頭辞に反応しない!?
上記の指定方法を使う場合、絵文字のショートコードとしては、接頭辞の後ろに最低1文字は必要です。
指定する接頭辞から1文字減らしてみるなどしましょう。
絵文字の周囲に余白が欲しい!
CSSにて、marginやpaddingを指定します。筆者は試していないので、どちらの方が良いかは分かりません。
/*カスタム絵文字(大サイズ)ここから*/
.detailed-status .status__content p .emojione[alt*=":〇〇(任意の絵文字コード)"],
p .emojione[alt*=":〇〇(任意の絵文字コード)"]
{
width: 128px;
height: 128px;
vertical-align: bottom;
margin: 4px;
}
/*カスタム絵文字(大サイズ)ここまで*/
