ONDrecords【WEBまわりの事をやっております】WEBデザイン・通販システム・予約システムなどが出来ます!

レスポンシブデザインの画像について

レスポンシブデザインで、やっかいなのが画像サイズの設定ではないでしょうか?
JQueryを使って振り分けるのが、現状一番スマートな気がしております。

ワードプレスのアイキャッチ画像を、「デバイスの幅」で、読み込む画像を変更します。

  1. ヘッダーでjQueryを読み込ませる
  2. jQueryに画像を振り分けるコードを描く
  3. php(ワードプレステンプレート)に、jQueryに振り分けさせるためのコードを描く
jQueryコードは下記になります。

var srcwindow=screen.width;
$("noscript[data-large][data-small]").each(function(){
//スクリーンの画像が480pxより大きかったら大きい画像で
//小さかったら小さい画像のパスを取得
src=(srcwindow > 480)?
$(this).data("large"):$(this).data("small");
$("<img src='"+src+"'
alt='"+$(this).data("alt")+"' />").insertAfter($(this));
});
php用のコード

<?php if(has_post_thumbnail()):
/*ますアイキャッチ画像の画像URLのみ取得する*/
$foto_piccoro = wp_get_attachment_image_src
( get_post_thumbnail_id(), 'medium' );
list($piccoro) = $foto_piccoro;
$foto_grande = wp_get_attachment_image_src
( get_post_thumbnail_id(), 'large' );
list($grande) = $foto_grande;?>
<noscript data-large="<?php echo $grande; ?>"
data-small="<?php echo $piccoro; ?>">
<img src="<?php echo $piccoro; ?>" alt="任意">
</noscript>
<?php endif; ?>

Copyright © 2013 ONDrecords. All rights reserved.