はてなブログで絵文字を見られるようにした😀 - イノたまごラボ・あのぶるの「こんなの作ったよ！」

2019-11-15 追記

Windows7のサポート終了も間近になってもう置き換え処理自体消してもいいんじゃないかなとは思ったのですが、ブログのテーマをいじったついでに見て見ぬふりをしていたvertical-alignを調整しました。設定はまぁテーマとの相談でお好みだと思うんですが、大概は(理屈的にも)text-bottomがマッチするんじゃないかなぁって思っています。
Windows10へのアップグレードも無事済ませました。

1本記事上げた勢いで書こう書こうと思っていたもう1本。スマホからの閲覧であれば特に何もせずとも絵文字が見られるのですが、Windows(7)マシンからだとうまく見えない*1ことが多いので、Twemojiを導入してみました。

そういえば持ってるくせに碌に確認してなかったですがMacの場合はどうだったんでしょう……ちゃんと見えてたのだろうか。

直したところ

ライブラリをロード

設定→詳細設定→検索エンジン最適化の「headに要素を追加」

<script src="//twemoji.maxcdn.com/2/twemoji.min.js?11.0"></script>

を追加

絵文字の変換処理

デザイン→🔧(カスタマイズ)→フッタ

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

を追加

スタイル調整

デザイン→🔧(カスタマイズ)→デザインCSS

img.emoji {
  height: 1.2em !important;
  margin: 1px;
  vertical-align: text-bottom; /* ※2019-11-15 追記 */
}

を追加。サイドバーとかでheight指定が上書きされたりとかするので、!important指定が地味に大事だった。 heightはお好みですが、文字サイズ基準の相対指定がおすすめです。

見え具合

タイトルに書くとこんな感じ😀

個人的には悪くないかなーって思ってます👍

*1:10ならうまく見えるのかもしれない。無料アップグレード期間にうっかりし損ねたのでいい加減OS買わなきゃ…