OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。😗

なので、WebページやWebサービスの利用であれば個人・商用問わずに無料で利用できる「emojisymbols」の絵文字フォントで代替してみました。

emojisymbolsはwoff形式のWEBフォントで用意されているので、ダウンロードしてサーバーに置いて使います。

まずemojisymbolsfontのダウンロードページ下部の「Download font」ボタンをクリックしてフォントを任意の場所に保存します。

ダウンロードしたzipファイルを解凍したEmojiSymbolsFont-masterフォルダ 📂 内のfontフォルダ 📂 の中にEmojiSymbols-Regular.woffファイル 📄 があるので、このファイルをWEBサーバーにアップロードしておきます。

エンベッドで記述する場合にはheadタグ内に以下のように記述します。

※2~5行目のコメントアウトの部分はEmoji Symbols Fontのコピーライトです。CSSファイルの利用箇所近辺への記述が必要とのこと。

その他注意事項等はemojisymbolsの「ご利用にあたって」のページをご確認ください。

<style>
/*
Emoji Symbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
font-family: "EmojiSymbols";
src: url('font/EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
}
.emoji {
font-family: "EmojiSymbols";
line-height: 1;
}
</style>

そして、htmlの絵文字を表示したい箇所に以下のように記述します。

<span class="emoji">絵文字コード</span>

すると↓のように表示されます。
🐻

絵文字コードについてはemojisymbolsの絵文字一覧ページで確認できます。

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む

CSSだけで実装できる! スクロールした時に画像以外のコンテンツを挟んで背景画像を切り替える方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む