Blogger:CSSスプライトでテキストリンクアイコンを読み込む

前の関連記事：Blogger:テキストリンクにアイコンをつける

複数画像を1枚に結合したものを読み込んでページ読み込み速度を改善させるテクニックです。2つのテキストリンクアイコンを結合して使ってみます。

CSSスプライト用結合画像作成ツールを使って複数画像の結合とCSSルールを得る

CSSスプライトについては4/4 「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All Aboutの解説がわかりやすいです。

テキストリンクアイコンで使う画像はとです。

ファイル名をそれぞれ「画像1」「画像2」とします。

これらを1回の呼び出しで表示できるように画像を結合します。

結合にはCSSスプライト用画像作成ツールCSS Sprite Generator | Project Fondueを使います。

まずは画像をzipファイルにまとめます。

エクスプローラーでまとめる画像ファイルを選択して右クリック→送る→圧縮(zip形式）フォルダー、でzipファイルにまとめます。

ここでは「画像1.zip」ファイルができました。

このzipファイルをCSS Sprite Generator | Project Fondueへアップロードします。


その下に続くオプションの設定をします。


「重複画像を無視する」とは重複を無視するということです。

普通はアップロード前に選択していると思うので「重複画像を無視する」のままでよいでしょう。

縦方向に連結するか横方向に連結するかの判断が重要

スプライト画像設定はデフォルトではこうなっています。

画像の連結方向の設定がこの画像結合の設定の肝です。

CSSスプライトを配置する方法を考えて縦方向か横方向かを設定しないといけません。

背景をRepeatさせるときは連結方向をRepeat方向と異なる方向に変更しないといけないでしょう。

今回のテキストリンクアイコンでは<a>タグ内の右端に配置するのがポイントですので水平方向の画像配置が重要です。

ということで水平方向つまり、横方向と逆の縦方向に結合します。

オフセットは連結させる画像間の空白です。

ヘルプをみますと文字列の間にいれる画像では1行の高さが大きくなっても、もう一つの画像が顔をださないように垂直オフセットはある程度はあったほうがよいようです。


結果を見やすいように「CSS設定」は全て消しておきます。

設定が終わったら「スプライト画像とCSSを作成」ボタンをクリックします。

すると画像を指定する「CSSルール」が表示されます。


それぞれの画像のbackground-positionを教えてくれます。これを記録しておきます。

ファイル名の日本語部分は無視されて、単に「1」「2」となっていますね。

画像は「スプライト画像をダウンロード」からダウンロードします。

こんな縦長のpngファイルができました。見やすいようにわざと背景色をつけています。

CSSスプライトでテキストリンクアイコンを表示させる

.entry-content a[href ^="http"] {
   padding-right: 18px;
   background: url(外部リンクアイコンアドレス) no-repeat right center;
}
.entry-content a[href ^="http://p--q.blogspot."] {
   padding-right: 18px;
   background: url(内部リンクアイコンアドレス) no-repeat right center;
}
.entry-content a[href $=".jpg"] {
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".JPG"] {
   padding-right: 0px;
   background: none;
}

Blogger:テキストリンクにアイコンをつけるでやったようにテキストリンクアイコンのCSSはこのようになっています。

今回「外部リンクアイコン」が「画像1｣、「内部リンクアイコン」が「画像2」です。

backgroundプロパティはまとめて以下のように設定されます。

background:color値 image値 repeat値 attachment値 position値;

color値、attachment値はデフォルトではそれぞれtrasparent（透明）、scroll(スクロールとともに背景画像も移動）ですので今回は省略しています。

CSSスプライトで設定を変えないといけないのはpotision値です。

position値は二つの値があり1個目がタグ内の左からの位置、2個目がタグ内の上から位置、を表します。

今はright centerになっています。これはテキストリンクアイコンをタグ内の左右方向は右端、上下方向は中央、に配置するという設定です。

上下方向は1行分しか表示されないのでCSSスプライト画像を上下させて外部リンクアイコンと内部リンクアイコンをそれぞれ見えさせます。

先ほどツールで表示された「CSSルール」によると画像1、画像2のbackground-positionはぞれぞれ「0 0」「0 -66px」になっています。

これは画像１(外部リンクアイコン）は上下方向0px、画像2(内部リンクアイコン）は上下方向-66pxに設定すればよいということです。

ということで「center」をそれぞれ書き換えて以下のようになります。

.entry-content a[href ^="http"] {
   padding-right: 18px;
   background: url(スプライト画像のURL) no-repeat right 0;
}
.entry-content a[href ^="http://p--q.blogspot."] {
   padding-right: 18px;
   background: url(スプライト画像のURL) no-repeat right -66px;
}
.entry-content a[href $=".jpg"] {
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".JPG"] {
   padding-right: 0px;
   background: none;
}

「スプライト画像のURL」は投稿画面で「画像を挿入」を行い、HTMLモードにするとスプライト画像ファイルの画像ファイル名のURLがわかります。

http://1.bp.blogspot.com/-rAAliblflUQ/略/画像ファイル名

こんな感じのものです。

CSSスプライトは理解してしまうとそう難しくはないですが、理解するまでのハードルは高いですね。

これでブログの表示速度はどれくらい速くなるんでしょうかね。

（2016.12.3追加。Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その5でHTTPSへのリダイレクトをするようになったためにテキストリンクのアイコンの表示をHTTPSへも対応するようにCSSを変更しました。jpg以外にgifやPNGもアイコンを付けないように設定しています。

.entry-content a[href ^="http"] {  /* httpで始まるリンクにアイコンを付ける。httpsも含まれる。*/
   padding-right: 18px;
   background: url(スプライト画像のURL) no-repeat right 0;
}
.entry-content a[href *="://p--q.blogspot."] {  /* ://p--q.blogspot.を含むリンクに異なるアイコンを付ける。*/
   padding-right: 18px;
   background: url(スプライト画像のURL) no-repeat right -66px;
}
.entry-content a[href $=".jpg"] {  /* jpgで終わるリンクにはアイコンを付けない。*/
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".JPG"] {  /* JPGで終わるリンクにはアイコンを付けない。*/
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".gif"] {  /* gifで終わるリンクにはアイコンを付けない。*/
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".PNG"] {  /* PNGで終わるリンクにはアイコンを付けない。*/
   padding-right: 0px;
   background: none;
}

小文字と大文字は区別しなくてもよいのかもしれませんが、念のためjpgだけ両方設定しています。）

参考にしたサイト

4/4 「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All About
CSSスプライトの仕組みがわかりやすく説明されています。

ロールオーバーリンク５ ～CSSテクニック～
実践的なCSSスプライトの解説です。

CSS Sprite Generator | Project Fondue
CSSスプライトに使えるように画像を結合するツールです。

スタイルシート講座 - 超初心者のためのホームページ作成講座
background設定に関する解説。

CSSセレクタにワイルドカードや正規表現を使いたいとき | 西沢直木のIT講座
CSS属性セレクタでの「*」「＾」「$」の使い方。