画像置換…HTML文書内にテキストを残したまま、表示は画像にするというテクニックです。
テキストは入れたいがデザイン上の装飾を優先させたいという場合に非常に有効ですが、「HTML上の文書を表示させない」という手法はグレーゾーンであり、Google先生のご機嫌でいつスパム扱いとなるか分からないというリスクは拭えません。
それでもデザインとキーワードを両立できる画像置換の魅力は捨てがたいものです。
というわけで、本日はちょっと面倒だったレスポンシブサイトでの画像置換です。
まずは、現在一般的に広まっている三種類の画像置換の方法について見ていきたいと思います。
その１.text-indent:-9999px;を使用した画像置換
ファークメソッドと呼ばれる手法で、-9999px分のインデントで文字を見せないようにします。
.img_replace {
width: 200px;
height: 100px;
background: url("back.jpg") 0 0 no-repeat;
/*ここからファークメソッド*/
text-indent: -9999px;
text-align: left;/*左に文字を飛ばすので、左寄せに*/
overflow: hidden;/*リンク時のアウトラインを出さない*/
}
○メリット ：簡単に実装できる（text-indentだけでも機能する）
×デメリット：-9999pxの領域を確保するため、パフォーマンスを悪化させる(旧iPadでは実際に表示もされていたそうです)
その２.text-indent:100%;white-space:nowrap;overflow:hidden;を使用した画像置換
スコットケラムメソッドと呼ばれる手法で、ファークメソッドのパフォーマンスを改善させたものです。
.img_replace {
width: 200px;
height: 100px;
background: url("back.jpg") 0 0 no-repeat;
/*ここからスコットケラムメソッド*/
text-indent: 100%;
white-space: nowrap;/*改行を禁止*/
overflow: hidden;/*はみ出たテキストを隠す*/
}
○メリット ：ファークメソッドのパフォーマンス悪化を防げる
×デメリット：ファークメソッドに比べて記述が長くなる（とは言え、ファークメソッドの場合でもoverflowを指定すると、そこまで変わりませんが）
その３.height:0;padding:~;overflow:hidden;を使用した画像置換
リーヒ―・ラングリッジと呼ばれる手法で、古くからあるものです（と最近知りました）。
.img_replace {
width: 200px;
height: 0;
padding-top: 100px;
background: url("back.jpg") 0 0 no-repeat;
/*リーヒー・ラングリッジ*/
overflow: hidden;/*はみ出たテキストを隠す*/
}
○メリット ：上記２点と違い、テキストを改行できる（cssオフに対応しやすい）
×デメリット：上記２店に比べて記述が長くなり、heightとpaddingを使用するのでデザイン上の自由が制約されやすい
その他にも色々手法はありますが、代表的なものを上げてみました。
それぞれメリットとデメリットがありますが、基本的には確保した領域の背景画像を表示するという手法であることは変わらないため、要素が可変となるレスポンシブやリキッドへの対応はしづらいというのが現状です。
画像置換大好きな僕としては（笑）、いっそレスポンシブ対応の画像置換スクリプトを書いてしまおうということで、今回はスタートいたします（探したけど見つからなかっただけなのですが…）
今回の案件はPC⇔スマホ切り替えのみのシンプルなレスポンシブなので、ブレイクポイントである480px未満の場合は画像置換している要素のwidthを100％にし、その比率に合わせてheightを設定するというjQueryを書きたいと思います。
まず先に用意しているcssです。
.img_replace {
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
h1 {
width: 200px;
height: 100px;
background: url("logo.jpg") 0 0 no-repeat;
}
@media screen and (max-width: 479px) {
/* 479px以下用（スマートフォン用）の記述 */
.spw100 {
margin-right: 0;
margin-left: 0;
width: 100%;
background-size: contain;
}
}
今回はスコットケラムメソッドを使用しました。
これらのclassを画像置換したい要素に当てて、jQueryを書きます。
HTMLはこちら。
<h1 class="img_replace spw100">ロゴ</h1>
jQueryはこちら。
$(function(){
var w = $(window).width();
if (w < 480) {
$(window).load(function () {
$('.spw100').each(function () {
var img_rep_w = $(this).css("background-image");
img_rep_w = img_rep_w.substring(4, img_rep_w.length - 1);
var img = new Image();
img.src = img_rep_w.match(/images\/[0-9a-z]+.+[^"]/i);
$(this).css({
height: w / img.width * img.height
});
});
});
}
});
ウィンドウサイズが480px未満の場合、クラス”spw100″が適用されている要素全てに対してbackground-imageのアドレスを取得し、そのオリジナルサイズを調べて現在のウィンドウサイズとの比率を求め、高さを指定するという動作をしています。
ただし今回の記述では、同じドメイン内でHTMLファイルと同階層のimagesフォルダの中しか参照しておりませんので、そのままコピペする際はお気をつけください。
$(window).loadで、画像の読み込み完了後に命令をしています。このタイミングでないと、jQueryがオリジナルの画像URLを取得できないからです。
実際の運用では、ウィンドウリサイズ時の記述が必要となりますが、まずは簡単にレスポンシブ画像置換の完成です。
コメント