絵文字用にNoto Color EmojiをWebフォントとして読み込ませる。はてなブログにおいて。

たまには有用な記事を書きたいものです。

絵文字を使いたい☘

私は絵文字が好きであります。世代によってはダサいとか「構文」とか言われてしまう時代ですが、絵文字/Emojiという発明は偉大です💖

Unicodeに含まれるようになって以降は、文字コードの中で扱えるようになった。そういう意味で「漢字と何が違うの? 同じじゃね?」と思っている。特に象形文字なんて元が絵文字みたいなものですし。日常の文章でも「要 ◯◯」とか「於 ◇◇」とかいう表現は、用法的に似ているように思う。とにかく情報量が増えるので、積極的に使って別にいいじゃん!って思っている🤗

だがしかし、表示の差異は如何ともしがたい。私の主な利用環境であるWindows 10では、絵文字の入力・表示がとても貧弱です。調べたところによると、Unicode 9.0までの絵文字しか対応していない様子です(現在はUnicode 15.0だそうです)こういう環境だと、📱スマートフォンiOS/Android)で下書きした文章を、🖥PC(Win10)で見たり書いたりすると表示が全然変わってくる。分裂したり表示されなかったりする。困った。

ということで、Webフォントで対応することにしました。GoogleNoto Color Emojiを利用しています。

自分で設定するのは初めてだった。Webフォントを読み込ませるのに消極的だったので…。でも絵文字の方が大事です。

調べたときに、当該内容の検索結果がはかばかしくなかったので、はてなブログ」向けの内容として書いておきます。

設定⚙ Noto Color Emojiを読み込ませる

1️⃣デザインの編集画面で、「ヘッダ」→「ブログタイトル下」のところに次の文字列を入力します。

これはつまり、HTML側にWebフォントを読みにいく命令を置くものと解釈している。"stylesheet"の値をこういうときも使うんだ…いまはこういう表記なんだ、へー…という、隔世の感を抱えながら。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Color+Emoji">

デザイン編集画面→ヘッダ→ブログタイトル下|ここにHTML linkタグを入れる

2️⃣「デザインCSS」のところにフォント指定を加えます。

HTML側の命令で読み込ませた"Noto Color Emoji"を、ブログの要素に適用するのが肝要です。

私は現在は次のフォント指定としている。横着なので全要素に適用です。

* {
font-family: -apple-system, "Noto Sans JP", "Noto Color Emoji", "Segoe UI", "BIZ UDGothic", sans-serif;
}

現在のテーマ「Neutral」にデフォルトでセットされている「Noto Sans JP」の指定は消しています。指定を消していたが、指定を復活させました。ブラウザのフォント設定がデフォルト(メイリオ)の状態だと、当該フォントに引っ張られる絵文字が一部あるようだった。妥協妥協。

"Noto Color Emoji"を先頭にもってくるのかな、と思ってはじめ試したんですが、なんか数字や欧文の表示がおかしくなった。現状はこの指定で絵文字が綺麗に見えます。満足🥰