ホームページ作成/携帯・スマートフォンサイト作成入門

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

携帯電話で閲覧できる「ケータイサイト」作成方法の第3弾です。携帯端末ならではの「絵文字」を表示・入力する方法をご紹介。絵文字を入力するためのツールや入力方法の紹介と、絵文字の装飾方法も解説しています。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

「i絵文字」を使って絵文字を入力する方法

前ページでセットアップしたソフトウェア「i絵文字」を使って、docomo用の絵文字をXHTMLソース内に入力してみましょう。
操作はとても簡単です。 テキストエディタと「i絵文字」の両方を起動した上で、下図のように操作します。

「i絵文字」を使って絵文字を入力する手順
▲「i絵文字」を使って絵文字を入力する手順(2ステップ)
  1. まず、XHTMLソースを編集しているテキストエディタ上で、絵文字を入力したい箇所にカーソルを移動します。
  2. 「i絵文字」ウインドウを表示させ、入力したい絵文字をクリックします。

これだけで、カーソル位置に絵文字が挿入されます。

様々なエディタに絵文字を挿入可能

上図では、例として「メモ帳」に入力していますが、他のテキストエディタへも入力可能です。(入力できないソフトウェアもあります)
表示・入力が公式に確認されているソフトウェアのリストは「i絵文字」のヘルプにあります。(Ver 1.3では、メモ帳、ワードパッド、Microsoft Officeの各ソフトなどが挙げられています。) そのほか、テキストエディタ「EmEditor」上でも、表示・入力ができることを確認しました。

絵文字が入力できない場合

うまく入力できない場合は、一旦テキストエディタのウインドウを前面に表示させ、その直後に「i絵文字」のウインドウを表示させて、絵文字をクリックしてみて下さい。

クリップボード経由での挿入に切り替え
▲「ファイル」→「設定」メニュー

また、入力した絵文字が文字化けしてしまう場合は、右図のように「クリップボード経由で挿入」にチェックを入れてから再度操作してみて下さい。 (テキストエディタ「TeraPad」では、この方法で入力可能でした。)
※この場合、絵文字をクリックするたびにクリップボードの中身が絵文字に置き換わるため、編集中にクリップボードに入れていた内容は上書きされてしまいます。

また、「Unicode形式での挿入」を選択すると、『絵文字そのもの』ではなく『数値文字参照の形式』で「」のように挿入されます。 この方法では、ソース上で絵文字を確認することはできませんが、携帯端末上では絵文字に変換されて表示されます。 どうしてもバイナリコードでの入力(=「SHIFT-JISの形式での挿入」)ができない場合には試してみて下さい。
※ただし、Unicode形式で挿入した場合は、auの携帯電話では表示できません。

ブラウザ上でも絵文字を確認可能

絵文字は「外字」としてWindowsに登録されているため、テキストエディタ上のほか、ブラウザ上でも表示確認ができます。
※ブラウザで表示に使われるフォントの設定によっては、表示できない場合もあります。

Internet ExplorerやFirefoxでもdocomo用絵文字が表示されている例
▲IEやFirefox上でも絵文字の表示確認が可能

ただし、外字登録がされていないPC上で表示させると、下図のように文字化けします。 (絵文字が表示できないソフトウェア上でも下図のように文字化けが起こります。)

絵文字が外字登録されていない環境での表示例
 

複数のPC上で、携帯サイト用XHTMLを表示・編集したい場合は、そのすべての環境で、事前に「i絵文字」をインストールしておきましょう。

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


絵文字「ペンギン」を様々な色やサイズで表示させた例
▲様々な色・サイズで表示させた絵文字の例

「i絵文字」のウインドウを見ると、絵文字には最初から色が付いていることが分かります。 しかし、スタイルシートを使って指定すれば、好きな色に変更することもできます。 また、サイズの変更も可能です。
次のページでは、絵文字の色やサイズを変更する方法をご紹介致します。

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます