BLOGブログ
PCとスマホで表示する画像を変える方法あれこれ
レスポンシブサイトを制作する際、PCとスマホで違う画像を表示したいときってありますよね。いろいろ方法はありますが、簡単にできる方法をいくつか紹介します。
その1:メディアクエリーだけでやる方法
<img class="toggle-pc" src="pc.jpg">
<img class="toggle-sp" src="sp.jpg">
.toggle-pc { display: block; }
.toggle-sp { display: none; }
@media only screen and (max-width: 640px) {
.toggle-pc { display: none; }
.toggle-sp { display: block; }
}
PC用、スマホ用の両方を併記しておいて、画面サイズにあわせて一方だけを表示にします。一番簡単な方法ですが、一旦両方の画像を読み込んでいるのでちょっとスマートじゃないような。
その2:wp_is_mobile()関数を使う方法
WordPressの場合はそれ用の条件分岐タグが用意さています。
<?php if ( wp_is_mobile() ) : ?>
<img src="sp.jpg">
<?php else: ?>
<img src="pc.jpg">
<?php endif; ?>
ただし、デフォルトではwp_is_mobile()
はタブレットをモバイル端末として扱います。タブレットにはPC用のデータを表示したい場合が多いですよね。そんなときは関数を追加して対応します。
function is_mobile() {
$useragents = array(
// 対象にするユーザーエージェントを記載
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
<?php if ( is_mobile() ) : ?>
<img src="sp.jpg">
<?php else: ?>
<img src="pc.jpg">
<?php endif; ?>
ユーザーエージェントのメンテナンスがめんどくさい?
その3:jQueryを使って画像を入れ替える方法
最後はjQueryを使って条件に応じて表示する画像を入れ替える方法です。
まずは、画像ファイル名前の末尾にPC用は”_pc”、スマホ用は”_sp”を追加します(画像両方同じディレクトリに保存してください)。次に、入れ替える画像にclass="toggleImg"
を追記します。
<img class="toggleImg" src="smaple_pc.jpg">
最後に次のコードを追加すればOKです。
$(function () {
var width = $(window).width();
if( width < 640 ){
$(".toggleImg").each(function(){
$(this).attr("src", $(this).attr("src").replace("_pc","_sp"));
})
}
});