イノたまごラボ・あのぶる の「こんなの作ったよ!」

イノたまごラボの中の人「あのぶる」がどうでもいいことやよくないことをぶつぶつとつぶやきます。

はてなブログで絵文字を見られるようにした😀

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;
}

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

見え具合

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

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

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