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

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

3D

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

facerigや3teneで動かせるようにLive2Dでモーションをつける

デモのため真夜中WEBのマスコットキャラクターを制作してみました。 制作の流れは以下のようになります。 ① ペイント系ソフトでキャラクターのイラストを制作して画像エクスポートする。 ② 画像編集ソフトで画像をインポートし…続きを読む

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

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

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

理由は様々ですが、既存のホームページをまるごと他のサーバーに移転したいとのご依頼を承ることがあります。 通常の静的なサイトの移転でドメインが変わらない場合には基本的にサーバーに置いてあるフォルダ・ファイル群を古いサーバー…続きを読む

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

candle-mock-up

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

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

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