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の絵文字一覧ページで確認できます。

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

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

プラグインに頼らないでワードプレスを移転する。ドメイン変更対応

最近はサイト内にワードプレスが設置されている、またはサイト自体がワードプレスでできている、ということが多くなってきました。 それに伴って、当然のことながらサイトを設置しているサーバーの移転にはワードプレスの移転も含まれる…続きを読む

Open Street MapはGoogle Mapの代替案となりえるのか

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。 このこ…続きを読む

ホームページに3DCGコンテンツを埋め込んでブラウザでグリグリ動かす1

3D

3DCGコンテンツの埋め込み方法としては、 1、sketchfabという3DCGデータ投稿・共有サービスを利用してサクッと埋め込む方法 Sketchfab – Your 3D content on web, …続きを読む

ユーザビリティ向上のためにサイトの表示スピードを改善する

highway

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。 軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず…続きを読む

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

typography

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