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

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

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

スポンサーリンク

コードの備忘録

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

1. Font Awesome
2. その他のEmoji

の2種を使っています。

1.Font Awesomeの設定方法

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

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へ
にほんブログ村


スポンサーリンク

シェアする

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

フォローする