Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

概要

2010.01.26 に書いた…

 Google Bloggerで絵文字を使うためのTips …改訂


…という過去記事が…「img」タグを使っている関係で…

かなり古ぼけた印象の記事になってしまいました…

しかしながら… 当サイトの検索クエリでは…

未だ…「Blogger 絵文字」「Blogspot 絵文字」などは…検索上位ワードです…

来訪者の方々には…申し訳ないという気持ちは持ちつつも長年放置してきました…

理由は…記事にするためには…

ツール系などの関連記事も書かなければならないからです

まぁ…要は…無精者ってだけなんですが……さて本題です…

冒頭の過去記事のように…絵文字画像を「img」タグで表示していては…

「HTTPリクエスト」が増えてページ読み込み速度の遅延の大きな要因になります

「img」タグによる「HTTPリクエスト」を減らす解決策は…

画像を一枚にまとめて読み込む「CSS Sprites」という手法です

「CSS Sprites」の画像の準備

大前提として…こちらの過去記事もお読み下さい…

 Tonttu / テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」


先ずは…絵文字画像を自作するのは面倒くさい…という方用に…

当サイトの絵文字「CSS Sprites」画像の中から…

記事用に…気軽にお試し出来るように…記述の長さも勘案して…

顔の表情画像だけ取り出して「CSS Sprites」を構築してみましょう…

当サイトの絵文字「CSS Sprites」画像
（size : 140 x 40）

ダウンロードしたら…

任意の場所にホストして「URL」を取得するか…

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」

 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa


「Base64 (data URI scheme)」の「生データ」に変換して下さい…

画像をbase64エンコードするツール / Syncer  

「CSS Rule」の構築

終了したら…「CSS Sprites」画像の「URL」か「生データ」を…

下記の「CSS Rule」の黃文字部分と入れ替えます…
（見易さ重視で改行をいれています…）

絵文字の「CSS Rule」

#id01,#id02,#id03,#id04,#id05,#id06,#id07,#id08,#id09,#id10,#id11,#id12,#id13,#id14
{background-image:url("「CSS Sprites」画像の「URL」か「生データ」");background-repeat:no-repeat;display:inline-block}
#id01{width:20px;height:20px;background-position:left top}
#id02{width:20px;height:20px;background-position:-20px top}
#id03{width:20px;height:20px;background-position:-40px top}
#id04{width:20px;height:20px;background-position:-60px top}
#id05{width:20px;height:20px;background-position:-80px top}
#id06{width:20px;height:20px;background-position:-100px top}
#id07{width:20px;height:20px;background-position:-120px top}
#id08{width:20px;height:20px;background-position:left bottom}
#id09{width:20px;height:20px;background-position:-20px bottom}
#id10{width:20px;height:20px;background-position:-40px bottom}
#id11{width:20px;height:20px;background-position:-60px bottom}
#id12{width:20px;height:20px;background-position:-80px bottom}
#id13{width:20px;height:20px;background-position:-100px bottom}
#id14{width:20px;height:20px;background-position:-120px bottom}

「テンプレート」「HTMLの編集」から上記「CSS Rule」を書き換えたものを…

CSS 部分に記述し「テンプレートを保存」して準備は完了です

因みに…id「#」表記を…class「.」表記に変更したほうが使い勝手が良いので…

クラス表記に変更した「CSS Rule」も置いておきます…

クラス表記に変更した「CSS Rule」

.id01,.id02,.id03,.id04,.id05,.id06,.id07,.id08,.id09,.id10,.id11,.id12,.id13,.id14
{background-image:url("「CSS Sprites」画像の「URL」か「生データ」");background-repeat:no-repeat;display:inline-block}
.id01{width:20px;height:20px;background-position:left top}
.id02{width:20px;height:20px;background-position:-20px top}
.id03{width:20px;height:20px;background-position:-40px top}
.id04{width:20px;height:20px;background-position:-60px top}
.id05{width:20px;height:20px;background-position:-80px top}
.id06{width:20px;height:20px;background-position:-100px top}
.id07{width:20px;height:20px;background-position:-120px top}
.id08{width:20px;height:20px;background-position:left bottom}
.id09{width:20px;height:20px;background-position:-20px bottom}
.id10{width:20px;height:20px;background-position:-40px bottom}
.id11{width:20px;height:20px;background-position:-60px bottom}
.id12{width:20px;height:20px;background-position:-80px bottom}
.id13{width:20px;height:20px;background-position:-100px bottom}
.id14{width:20px;height:20px;background-position:-120px bottom}

「CSS Sprites」の「HTML」マークアップ

絵文字を個別にマークアップするには…

「span」要素を使ってこのように記述します…

ツールチップを表示するために「title」属性も記述しています…

絵文字の「HTML」マークアップ

<span id="id01" title="笑顔"></span>
<span id="id02" title="微笑み"></span>
<span id="id03" title="大笑い"></span>
<span id="id04" title="わーい"></span>
<span id="id05" title="ニヤリ"></span>
<span id="id06" title="ウインク"></span>
<span id="id07" title="ジロ"></span>
<span id="id08" title="フムフム"></span>
<span id="id09" title="困ったもんだ"></span>
<span id="id10" title="冷や汗"></span>
<span id="id11" title="アゼン"></span>
<span id="id12" title="トホホ"></span>
<span id="id13" title="アチャー"></span>
<span id="id14" title="プンプン"></span>

半角スペースを入れて横一列に並べると…こう表示されます…



ツールチップは別途「jQuery」でカスタマイズしていますので…

通常のツールチップとは違います…導入するには…こちらの過去記事からどうぞ…

 「jQuery」「jQuery UI」第８回「Tooltip」マウスホバーでカーソルに追随して情報を表示


「HTML」マークアップは…画像毎に…

定型文管理ソフトに登録しておくとお便利です…

 Clibor / クリップボード履歴と定型文管理ソフト

おわりに…

さてさて…絵文字を追加したい…もしくは…独自の表情を作りたい…

…って方もいるでしょうから絵文字のパーツも置いておきます…

絵文字の背景　 絵文字の頬　 絵文字の汗（全てサイズは 20 x20）

作成手順は…おおまかに言えば…

1. グラフィックソフトで絵文字の背景画像を読み込む
2. レイヤーとして絵文字の頬や汗を読み込み位置を調整
3. 新しいレイヤーを追加し黒色で顔の表情を描画して位置を調整
4. 平面化して名前をつけて保存

…ってな感じですね…作業は当然ながらズームした状態で行って下さい…

以上です…最後までお読みいただきましてありがとうございます…

Tips Universal Header Sidebar Footer Current-Label : Main