携帯サイトの作り方 No.3 絵文字の入力方法(4ページ目)

絵文字の表示色やサイズを変更する方法

docomoの絵文字は、普通の文字と同じように、色やサイズを変更できます。 背景色を指定すれば、透過もします。 色を指定しなかった場合は、「ｉ絵文字」ウインドウ内に表示されているデフォルトの色(※)で表示されます。
※PC用ブラウザで表示させた場合は、周囲の文字と同色（標準は黒）で表示されます。表示色の確認は、実機やエミュレータで行って下さい。

絵文字をスタイルシートで装飾するソース

絵文字の色を指定したい場合は、以下のように記述します。

１：<span style="color:#0055ff;"></span>

上記ソースでは、ペンギンを青緑色（#0055ff）で表示させています。
背景色を加えたい場合は、以下のように記述します。

２：<span style="color:#008000; background-color:#ccffcc;"></span>

上記ソースでは、ペンギンを緑色（#008000）にして、背景に淡い緑色（#ccffcc）を加えています。
さらにサイズを指定したい場合は、以下のように記述します。

３：<span style="color:#ff0000; background-color:#ffffcc; font-size:x-small;"></span>

上記ソースでは、ペンギンを赤色（#ff0000）にして、背景に淡い黄色（#ffffcc）を加え、表示サイズを小さく（x-small）しています。
これらをまとめて表示させると、以下のように表示されます。

なお、（携帯サイトでの）文字色の指定方法や文字サイズの指定方法に関して詳しくは、記事「携帯サイトの作り方 第1回 作成方法の基礎」をご参照下さい。 （※どんなスタイルシートの書き方でも良いわけではなく、制限があります。）

以上で、docomo用の絵文字を入力する方法の解説は終わりです。
続いて、au用やSoftbank用の絵文字を入力する方法をご紹介いたします。