HugoでTwemojiを使う

絵文字❤️

絵文字のフォントは、OSとそのバージョンによって異なります。
Windows11ではなんか3Dっぽくなっていますし、Apple製品はもっと3Dでマテリアルがキモいです。
Androidもなんというか、ドコモ端末が最悪で、そのほかも少し微妙だなって印象です。

そんななかTwitterで使われている絵文字。あれはフラットなベクターって感じがして、好きです。
🤓 <- この絵文字もよく見るでしょ。あとこれ 🤔

じつはこれ、オープンソースで誰でも使えちゃいます。なのでサイトに導入してやろう!!
って記事です。

作業はコピペで終わる簡単なお仕事です。
まず layouts/partials というディレクトリを作成します。
その中に head と footer というディレクトリを作成。それぞれ中に custom.html を作成。

こんな感じになればOK。
まず head 内のhtmlファイルに次を追記。

1

<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

そしたら footer 内のhtmlファイルに次を追記。

1
2
3


<script>
    twemoji.parse(document.body)
</script>

次にサイズとか諸々用のCSSを、 assets/scss/custom.scss に追記。

1
2
3
4
5
6


img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

はい、これだけで終わってしまう作業なんですね。
どの端末から見ても見た目一緒です。素晴らしい👏👏🥳🥳

👋じゃぁね👋