レスポンシブデザインでデバイスごとに画像を切替たい！ | Webクリエイターな備忘録

なんだか、昨年末から今年にかけて何かとありまして、更新が滞っていました(;’∀’)

今年に入ってから「いろいろ」とやっているのですが、アウトプット追いついてませんでした(;’∀’)ので、こちらの作業も自分の備忘録として掲載しときます。

レスポンシブデザイン-画像を置き換えたい-

レスポンシブデザインでサイト制作をしていて、画面サイズが小さい時だけ画像を大きき表示したい時がありませんか？

基本Bootstrapでサイト制作しているので、画像にimg-responsiveのクラスを当てているのですが、どうもそれだと小さくてしっくりしない。
画像の切り替え（置き換え）方法は色々な方法がありますが、今回私がしたい事は、

• HTML部分に不要な記述を増やしたくない。
• PCとスマホで見せる見せない（display:none;）などで再現したくない。
• 簡単な方法がよい
• PCとスマホで、単純に画像を切り替えた。

です。

ベストな方法発見！

どうにかならないかと色々と調べていると、今回の悩みを解決してくれるサイトを発見しました。

参考サイトの方法は、ひじょうに簡単で、HTML部分も変更することなく、WordpressなどのCMSでもプラグインなどを使用することなくできちゃいます。すごい！！

javascriptで下記を追記し、PC用とスマホ用の画僧を用意するだけ！

//デバイスの横幅で画像を切り替える
$(function(){
var wid = $(window).width();
if( wid < 1199 ){ $('.img').each(function(){ $(this).attr("src",$(this).attr("src").replace('_pc', '_sp')); }); } });

上記は、画面幅が1199pxより大きいか小さいかで、画像を入れ替えています。上の「1199」の数字を変更すれば好きな画面幅で画像切替できますよ。

注意点は、画僧の名前の付け方のみに注意すれば大丈夫。PC用は[「_pc」と付け、スマホ用は「_sp」を付けた名前にするだけです。

簡単に思っている事が実現でき非常に助かりました。

参考サイト

【レスポンシブサイト】デバイスの横幅で画像を切り替える方法