こんにちは、佐倉なぎです。
タイトルのとおり、てがろぐに『Twemoji』を導入しました。
私は普段、それほど絵文字を頻繁に使うわけではないのですが、Twitterの絵文字が可愛くて好きで、『🥳』と『🥰』は個人的によく使うのでこちらにも導入してみました。推し語りや嬉しいときによく使う絵文字です。
導入したのはてがろぐのみです。WordPressで動いているこちらのサイトでは、まぁそう使うことがないと思いますので導入していません（使ったとしてもコメントや、今回のような例でのみ）
あの絵文字（Twemoji）ってTwitter独自だったんですね…Twitterがイーロン・マスクに買収されて、絵文字に関する権利問題とかどうなっているのかは気になるところですが、これからも絵文字はあのままであってほしいなぁと思っています。
さて、あの絵文字が好きなので「てがろぐにも欲しい～」と（半分だめもとで）軽く調べてみたところ、当時Twitter社にてTwemojiに携わっていたJustine De Caires氏が2024年3月に最新版Twemojiのリリースを行っていたようです。
ありがたいですね……Blueskyの創業者も、実はTwitterの元CEOの方のようですが、こういうのを見ると青い鳥は現在も生きているんだなと感じさせられます。
Twemojiの導入は、ダウンロードしたファイルをサーバーにアップロードする必要は（基本的に）なく、以下のコードを（てがろぐの場合）スキンのskin-cover.htmlやスキンに付属しているCSSコードに張り付けるだけでOKです。てがろぐを前提に書いていますが、てがろぐ以外でも基本的な手順は同じです。
手順は先ほどのリンク先を参考にしています。
まず、skin-cover.html内の<head>内に下記コードを記載。
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script></body>の直前には下記を記載します。
<script>
twemoji.parse(document.body);
</script>これで一応反映はされるのですが、これだけだとこのようにくそでかサイズになってしまいます（あとてがろぐバグって連投してしまった）
ですので、スキンに付属するstyle.css内、またはHTMLの<style>内に下記コードを記載。
img.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}一応、配布元ではheight: 1em;とwidth: 1em;と記載されているのですが、少し小さかったので1.2emに変更しました。これで絵文字がちょうどいいサイズに縮小されました。
多分TwitterのTwemojiもサイズはこのくらいなんじゃないかな…？ と思います。
ちなみにCSSで使用する『em』とは、フォントサイズを基準に要素のサイズが変動する単位なのだそうです（詳しいわけじゃないのでちゃんと知りたい方は調べてね！） 私は雰囲気でemを使いがち。marginとかpaddingとか、今回のようなちょっとした飾りみたいなものに使うとスマホでもレイアウトが崩れにくい気がします（気がします）
サービスに依存しない形の個人サイトってこういうところ自由ですよね。中には知識が必要なものもあるけど、知識さえあれば基本的になんでも実装できます。他人が作ったものを導入する場合は、著作権等が許す範囲でですが…
HTMLやCSS全部弄る～みたいなことは苦手だけどこういうちょっとしたカスタマイズはとても好きなので、またやりたいなと思ったりします。フォームとかね…プラグインなのですが、あれはなぜかデフォルト状態だと綺麗じゃないので、自分好みに整えたりしてます。楽しい。
送信中です
コメント