特殊文字を表示する備忘録

irasuto今まであまり意識していませんでしたが、パソコン入力がスマホ寄り?になってきて、絵文字も沢山表示できるようになってきました。

簡単な絵文字であれば、画像を使う事無く、webサイトを飾ることが出来るので、便利ではないでしょうか?
私は何も深く考えず(すみません( ;∀;))使っていましたが、この記事を書くにあたり調べてみると、やはり未だ対応していなくて表示出来ない絵文字もあるようです。
特にマニアックな絵文字はリスクが高いそうですが(と言われても、線引きはどこ?って話ですが…)このサイトで配布しているskinは、チェックしているつもりですが…。
表示されなかった場合は、コメント欄等でお知らせ頂けると嬉しいです<m(_ _)m>

スポンサーリンク

コードの備忘録

私のサイトでは、「絵」を文字として扱う「絵文字アイコン」は、今のところ、

1. Font Awesome
2. その他のEmoji

の2種を使っています。

1.Font Awesomeの設定方法

下記サイトより、使いたいアイコンを選んで、コード入力を行う。

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

0906_1

「バスタブ」をクリック。

0906_2

このUnicodeと書いてある(ピンクの□)コードを入れます。

.entry h2 {
padding-left:20px;
}
.entry h2:before{
font-family: FontAwesome;
content: "\f2cd";
font-size:2rem;
position: absolute;
top: -10px;
left: -15px;
}

ポイントは、font-familyでFontAwesomeを指定することと、コードは、バックスラッシュ(スラッシュの反転文字(;^_^Aみたいなやつ)を忘れずに表記する事。

これで、サイトにはこんな風に表示されます(例)

0906_3

2.その他のEmojiの設定方法

その他のEmojiは、一覧としてなかなか見つからないのですが、Wikiを貼っておきます。

0906_5

表が大きいので、探すのも大変ですが、根気よく探してみて下さい。バックスラッシュの後ろに、ピンクの〇で囲ってあるコードを入れます(+を含まない。)この場合は、font-familyを指定しなければ、bodyのfontコードが適用されます。特殊なフォントをfont-familyにしていなければ、特に指定し直す必要もないと思います。

.entry h2{
padding-left:20px;
}
.entry h2:before{
content: "\1F34A";
font-size:2rem;
position: absolute;
top: -10px;
left: -15px;
}

0906_6

こんな感じになります。

コードを入力して、全てのブラウザで表示されるか?
という不安がある方は、こんなサイトもあります。
公開前にチェックされても良いと思います。

Try for free now! Cross browser test your website immediately in all web browsers - Internet Explorer, Edge, Chrome, Safari, Firefox, and Opera.

↑のサイトで確認できます。

0906_7

ブラウザを選択して、表示確認をしたいページのアドレスを入力して使います。

もし、これを使って文字化けしちゃったら…?

私なら、Gimp等で画像化して貼り付けちゃいます。
時間があれば、また記事を書きたいと思います。
記事を書くモチベーションが上がります。是非、応援のクリックをお願い致します<m(__)m>↓

励みになります
ランキングに参加しました。
「ダウンロードしたよ。」の
応援クリック頂けると嬉しいです(#^^#)
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村


スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする