これ可愛いですよね。日本には国産の顔文字たちがありますし、これも結構好きですけど、@WebDesignRecipeさんのWebデザインレシピやTwitterとか、@endoutakaeさんの秋田県webデザイナー【weblog】なんかを見てるとかわいいしなんか欧米風でカッコいいとか思ってしまいますｗ

フェイスマークではなくエモーティコン

ちなみにこれはエモーティコン(emotion + icon のかばん語)と言うそうで、facemarkって言うと国内の言い方になるっぽいです。以下いくつか国内外の顔文字の資料をどうぞ。

顔文字 – Wikipedia

フェイスマーク、横文字のかおもじ

顔文字の起源 (^_^)

顔文字、顔マーク(Facemark) — 欧米製｜MAKIZOU.COM

顔が横になりますよね

見慣れていればスッと頭に入ってくる記号の意味も best canadian online casinos、初めて見る人にはなんだろうとなりますよね。事実最初は日本の顔文字ですら顔だと思われなかったらしいですしｗ

CSS3を使って見やすくしてみた

とりあえず以下で直接デモが見れます。jsFiddle可愛いよjsFiddle

全然大したことはしてないんですが、とりあえずCSS3のtransform:rotateで見やすくしてみました！ちなみにrotateはFirefox3.5～、Google Chrome、Safariあたりで普通に使えます。

基本形:普通に指定する

まずは普通にやってみましょう。

html

Hi.:D

I am webcre8!;D

my job is Web Designer!X)

But still stadying...X(

Let's fight and enjoy together!!=D

css

i{
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform:rotate(90deg);
    display:inline-block;
    font-style:normal;
}

これで縦になってどんな表情かすぐに分かりますね！ちなみに回転軸をテキストの中心に取っているので上下にはみ出します。半角二文字なら普通のフォントであれば問題なしなので、なるべく二文字のXDとかしか使ってません。

応用：クラスを振る

HTML5であればi要素は「他と区別したいテキスト」と定義されています。あんまり使う人がいないイメージなのでこれにi要素を使ってみましたが、それではまずい人はクラスをつけましょう。ついでにちょっと角度をつけ、二通り作ってみました。

css

.facemark-good{
    -moz-transform: rotate(100deg);
    -webkit-transform: rotate(100deg);
    -o-transform: rotate(100deg);
    -ms-transform: rotate(100deg);
    transform:rotate(100deg);
    display:inline-block;
    font-style:normal;
}
.facemark-bad{
    -moz-transform: rotate(80deg);
    -webkit-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform:rotate(80deg);
    display:inline-block;
    font-style:normal;
}

応用：jQueryでやる

一つ一つクラスを振るのが面倒な人はjQueryでつけちゃいましょう！あんまり出来ないので簡単にしか書いてません…。最初はプラグイン作るくらいの勢いだったんですけどｗ

JavaScript(for jQuery)

$("i").addClass("emoticon-good");

一応jsFiddleのデモへのリンクもついでにおいておきます。

jsFiddle emoticon rotate

WordPressでやる

WordPressならショートコードを作ってみましょう。

PHP(for WordPress)

function rotate_icon( $atts, $content = null ) {
	return '' . $content . '';
}
add_shortcode('emoticon', 'rotate_icon');

ちゃんと回転してますか？→;D

まあこれだとわりと書くのめんどくさいのでどうせならエディタからワンボタンで追加できるようにしましょうか★

お手軽WordPress Tips：コンテンツをサクッと表示させるショートコードを作る & 超絶便利プラグインAddQuicktag – かちびと.net

今webcre8は新しいプラグインを導入するのに慎重になっているので使ってませんが、「AddQuicktag」は便利そうなので近いうちに使うつもりです。ショートコードに関してすごく分かりやすい説明なのでぜひ読んでみてください！

力尽きた

本当はテキスト内の予め決めた「;D」等を拾って勝手に挿入してくれるjQueryプラグインなんか出来たらなーとか思ってたんですが、力尽きましたｗ どこかのエロいもの好きが作って欲しいかなとか思ったり思わなかったり…いや使う人いるのか知りませんけどｗ

このくらい綺麗に表示してくれれば嬉しいですね

似合うフォントを探す

こうなりゃもっとツッコんで、どのフォントがよりカワイイか試しましょう。ガタつくのでちょっと斜めは止めて90度にしてます。

ゴシック体は素直

メイリオのエモーティコン

普通ですね！

明朝、セリフ体は意外にアニメぽくてかわいい

ＭＳ Ｐ明朝によるエモーティコン

明朝はなんだかやたらとかわいい。口角の感じがセリフのお陰でいい感じですね★

太字はブサカワ

Impactによるエモーティコン

なんかマンガに出てくる半魚人みたいな感じのタラコ唇でこれはこれでかわいいですね！ｗ

他にもスラブ系のフォントを使うとなんか偉そうになったり、スクリプト系だとやたらと遠近感のある顔になりますｗ オススメはそうですね…Comic Sans MSなんてどうでしょうかｗ イメージが湧くでしょう？★

webフォントを使う

なんなら理想的な表情を生むwebフォントを探しますかｗ(やり過ぎ感漂う)

webフォントって読み込むのに時間かかるじゃないですか。表示されなかったり一瞬普通のフォントで表示されたり。あれがなんか好きじゃなかったり。でもワンポイントで使うのならきっとそれを目にする前にちゃんと変わってくれますｗ

webフォントの使い方は以下の記事で詳しく説明してくれています！

CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

ちょと力尽きたので理想のwebフォントは皆さんで探してみてください;Pﾃﾍﾍﾟﾛ