たまには有用な記事を書きたいものです。
絵文字を使いたい☘
私は絵文字が好きであります。世代によってはダサいとか「構文」とか言われてしまう時代ですが、絵文字/Emojiという発明は偉大です💖
Unicodeに含まれるようになって以降は、文字コードの中で扱えるようになった。そういう意味で「漢字と何が違うの? 同じじゃね?」と思っている。特に象形文字なんて元が絵文字みたいなものですし。日常の文章でも「要 ◯◯」とか「於 ◇◇」とかいう表現は、用法的に似ているように思う。とにかく情報量が増えるので、積極的に使って別にいいじゃん!って思っている🤗
だがしかし、表示の差異は如何ともしがたい。私の主な利用環境であるWindows 10では、絵文字の入力・表示がとても貧弱です。調べたところによると、Unicode 9.0までの絵文字しか対応していない様子です(現在はUnicode 15.0だそうです)こういう環境だと、📱スマートフォン(iOS/Android)で下書きした文章を、🖥PC(Win10)で見たり書いたりすると表示が全然変わってくる。分裂したり表示されなかったりする。困った。
ということで、Webフォントで対応することにしました。GoogleのNoto Color Emojiを利用しています。
自分で設定するのは初めてだった。Webフォントを読み込ませるのに消極的だったので…。でも絵文字の方が大事です。
調べたときに、当該内容の検索結果がはかばかしくなかったので、「はてなブログ」向けの内容として書いておきます。
設定⚙ Noto Color Emojiを読み込ませる
1️⃣デザインの編集画面で、「ヘッダ」→「ブログタイトル下」のところに次の文字列を入力します。
これはつまり、HTML側にWebフォントを読みにいく命令を置くものと解釈している。"stylesheet"の値をこういうときも使うんだ…いまはこういう表記なんだ、へー…という、隔世の感を抱えながら。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Color+Emoji">
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"を先頭にもってくるのかな、と思ってはじめ試したんですが、なんか数字や欧文の表示がおかしくなった。現状はこの指定で絵文字が綺麗に見えます。満足🥰