画像URLを置換するにはどうすればよいですか?
- 詳細
- カテゴリ: テンプレート
- 作成日:2016-07-20
imgタグのsrc属性の値を変換することで、PCとスマホで表示させる画像を出しわけることが可能です。
いくつかの方法がございますがパーツを使ってimgタグを出力する場合とscriptのみで出力する場合の2つの方法をご紹介します。
■置換例
・置換前
<img class="logo" src="img/logo.png" />
・置換後
<img class="logo" src="img/sp_logo.png" />
■置換方法
【方法1】パーツを使った置換
拡張タブ内にある、「画像のURL置換」でURLの置換ができます。
「画像のURL置換」のテキストボックスに以下の記述をします。
/img/logo.png:/img/sp_logo.png
パーツにはその他にも開発に役立つオプションをいくつかご用意しております。以下URLを参照してください。 http://developer.genecode.jp/manuals/gcparts/common_option.html
【方法2】スクリプトを使った置換
置換対象となる要素をsrc属性以外(セレクタ)で指定することが可能なため、より高度な要素指定が可能となります。
<gc-script>
var $img = $("img.logo");
var newSrc = "/sp_logo.png";
$img.attr("src",newSrc);
</gc-script>