スマホ対応　マップタグについて

Question

お世話になっております。

FTPを使用してPCスマホ共通でマップリンクのついたカタログを掲載しようと実施中です。
しかし、スマホで動作確認するとリンクズレが生じています。
スマホの画像をwidth="100%"にしているからずれてしまっているのだと思いますが
どの様に解決すればいいのでしょうか。

ネットで調べてやってみても上手くできず困っています。
よろしくお願いします。
http://www.takasago-mejya.net/2017dm/1p.html

Answer

ECマスターズの田中です。

＞FTPを使用してPCスマホ共通でマップリンクのついたカタログを掲載しようと実施中です。
＞しかし、スマホで動作確認するとリンクズレが生じています。
＞スマホの画像をwidth="100%"にしているからずれてしまっているのだと思いますが
＞どの様に解決すればいいのでしょうか。

「jQuery RWD Image Maps」という
jQueryプラグインをご利用いただくことで、
画像サイズの変更に合わせて、マップの座標を自動調整できます。
http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/

使い方は一般的なjQueryプラグインと同様ですが、
念のためご説明いたします。

最初に、画像ファイル本来の大きさに合わせて
タグを作成してください。

次に、表示する大きさを、スタイルシートでご設定ください。
たとえば、

といった形でも結構です。

最後に、下記、３つのタグを
ページの任意の場所（タグの直前など）に
ご記載いただければ、設置完了となります。

= この下の行から ====================


 $(function(){ $('img[usemap]').rwdImageMaps(); }); 
= この上の行まで ====================
※先頭２つのタグには外部リンクが含まれますので、
　楽天GOLDなど、外部リンク禁止の場所で使う場合は、
　URLからJSファイルをダウンロードの上、
　自ショップにアップロードしてご利用ください。

Answer

ご返信ありがとうございます。
ご教授いただいた通りやってみましたが、画像が横100％になりません。
なぜでしょうか。
※ちなみに楽天ではなく自社サイトで作成しています。（ショップサーブ）

教えていただいたサイト内に
＞まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。
とありますがこのファイルをFＴＰのどこにアップロードすればよかったのでしょうか。

初歩的なことで申し訳ないです。

Answer

ECマスターズの田中です。

＞ご教授いただいた通りやってみましたが、画像が横100％になりません。
＞なぜでしょうか。

1p.htmlのソースを確認したところ、

= この下の行から ====================





= この上の行まで ====================

このように、タグを囲むだけのタグがございました。
特にページの見た目に影響しませんので、タグ全体の削除をお願いします。

既に挿入されている

上記タグに対して、
width属性とheight属性の削除、およびスタイルシートで横幅の設定を
行っていただきますようお願いします。

＞このファイルをFＴＰのどこにアップロードすればよかったのでしょうか。
同ファイルを外部のサーバから読み込む設定をしておりますので、
FTPでアップロードしていただく必要はございません。

Answer

出来ました！ありがとうございます！！

スマホ対応 マップタグについて

スマホ対応　マップタグについて