makeshopのカスタムについて

Question

ECマスターズご担当者様

お世話になっております。
makeshopのカスタムについて質問です。

URL 

https://www.orlo-matsuge.com/smartphone/detail.html?id=000000000005

※スマートフォンでご確認下さい。

添付画像のように
商品の比較表を掲載しているのですが
現在は画像で載せている為、リンクが設定できません。

商品名を青のテキストリンクにして
各商品にリンクさせたいのですが
一番効率的な方法を教えて頂きたいです。

以上ご確認宜しくお願い致します。
ご回答宜しくお願い致します。###HR######IMG0bbccb63b5371d028df06ef198b4799d3.jpegIMG0###

Accepted Answer

ECマスターズの伊藤です。

＞リンクの挿入などはどのようにすれば良いのでしょうか？
＞HTML Imagemap Generator内ですれば良いのでしょうか？
HTML Imagemap Generator内では編集ができませんので、表示させたい箇所に貼り付けたのち、リンクの修正をしていただきますようお願いいたします。

HTML Imagemap Generatorの詳細な使い方は、下記の通りとなります。

１）リンクを貼りたい画像を「ここに画像をドラッグしてください」の箇所にドラックドロップ

２）右上にある「矩形を描く」「丸を描く」「多角形を描く」のいずれかで、リンクを張りたい範囲を選択

３）必要な範囲すべて選択し終えたら、HTMLの右に表示されている「RAW」をクリック

４）全て選択されるので、コピー

５）（４）でコピーしたタグを、表示させたいページの表示させたい箇所にペースト

６）href="#"の箇所をリンク先のURLに修正
例）楽天のトップページにリンクする場合
＝＝＝＝＝

  

＝＝＝＝＝＝

７）すべて修正していただきましたら、アップロードしてリンクにずれが無いかなど、ご確認ください。

Answer

ECマスターズの田中です。

画像の上に文字を載せようとする場合、
スタイルシートを駆使する必要が出てまいりますので、
画像内の好きな場所にリンクをつけることができる
イメージマップをご利用いただく方法が一番効率的かと存じます。
https://www.tagindex.com/html5/embed/area.html

下記Webツールを利用して、コードを直接書くことなく
イメージマップを作成することができます。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/

なお、最初のURLにございます通り、
イメージマップでは座標を利用して領域を指定するため、
スマートフォン用ページのように画像の幅が変化すると、その分ズレが発生してしまいます。
ズレないようにするには、「jQuery RWD Image Maps」というjQueryプラグインをご利用ください。

イメージマップをレスポンシブウェブデザインで使う方法
https://qiita.com/YAmi/items/b27ae62f390e72112e9e

Answer

ECマスターズ　田中様

ご回答ありがとうございます。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/

上記を試してみましたが
リンクの挿入などはどのようにすれば良いのでしょうか？
HTML Imagemap Generator内ですれば良いのでしょうか？

以上ご確認宜しくお願い致します。
ご回答宜しくお願い致します。

Answer

ECマスターズ 伊藤様

ご回答ありがとうございます。
無事に使えそうです。

ありがとうございます。

Answer

ECマスターズ ご担当者様

上記のツールを使用してリンクを設定したのですが
スマホサイトに実装するとリンクがずれてしまいます。

下記がソースです。
イメージは青文字の箇所にそれぞれのリンク先にリンクするようにしたいのですが
どうすれば良いでしょうか？




  
  
  
  
  
  
  
  


以上ご確認宜しくお願い致します。
ご回答宜しくお願い致します。###HR######IMG0424b32ada99ef46956d9288b1a2af2f5.jpegIMG0######BR###

Answer

ECマスターズの田中です。

> 上記のツールを使用してリンクを設定したのですが
> スマホサイトに実装するとリンクがずれてしまいます。

ずれを防ぐために、最初の返信にてご案内差し上げた
「jQuery RWD Image Maps」というjQueryプラグインを
ご利用いただきますようお願いします。

イメージマップをレスポンシブウェブデザインで使う方法
https://qiita.com/YAmi/items/b27ae62f390e72112e9e

ページの共通部分にて、下記のタグを
jQuery読込用タグよりも後にご記載いただくことで
ご利用いただくことができます。

= この下の行から ====================


$(function(){
    $('img[usemap]').rwdImageMaps();
});

= この上の行まで ====================

Answer

ECマスターズ　田中様

ご回答ありがとうございます。

>ずれを防ぐために、最初の返信にてご案内差し上げた
>「jQuery RWD Image Maps」というjQueryプラグインを
>ご利用いただきますようお願いします。

>イメージマップをレスポンシブウェブデザインで使う方法
>https://qiita.com/YAmi/items/b27ae62f390e72112e9e


こちらですがダウンロードしてみましたが
使用方法がよくわかりません。

jquery.rwdImageMaps

jquery.rwdImageMaps.min

フォルダ内にある上記のファイルをFTPでmakeshop側にアップロードすればよいのでしょうか？

>ページの共通部分にて、下記のタグを
j>Query読込用タグよりも後にご記載いただくことで
>ご利用いただくことができます。

ソースはこのような形で記載しましたが
上手く作動しません。

修正個所があれば教えて下さい。















$(function(){
    $('img[usemap]').rwdImageMaps();
});


以上ご確認宜しくお願いします。
ご回答宜しくお願い致します。

Answer

ECマスターズの田中です。

> フォルダ内にある上記のファイルをFTPでmakeshop側にアップロードすればよいのでしょうか？

外部サーバから取得して実行する形式のため、
FTPをご利用いただく必要はございません。

いただいたHTMLソースより、先頭の

を削除していただくことで、
問題ない形式になるはずなのですが、

それでも動作しない場合は、
実際の表示を確認させていただく必要がございますので、
ダミーの商品ページなどをご用意の上、実際にご設置いただき、
URLを返信にてお知らせいただけますでしょうか。

Answer

ECマスターズ　田中様

お世話になります。

＞外部サーバから取得して実行する形式のため、
＞FTPをご利用いただく必要はございません。

＞いただいたHTMLソースより、先頭の
＞
＞を削除していただくことで、
＞問題ない形式になるはずなのですが、

＞それでも動作しない場合は、
＞実際の表示を確認させていただく必要がございますので、
＞ダミーの商品ページなどをご用意の上、実際にご設置いただき、
＞URLを返信にてお知らせいただけますでしょうか。


こちら試してみましたが
リンクが作動しないので
ダミー商品を登録してみましたのでご確認宜しくお願い致します。

makeshopログイン

https://www.makeshop.jp/main/login/

ショップID	orlo

パスワード	orlo1985

テスト商品　URL

https://www.orlo-matsuge.com/shopdetail/000000000097

管理画面ログイン後
＞左上のメニューから商品管理
＞すべての商品
＞テスト商品となります。

以上ご確認宜しくお願いします。
ご回答宜しくお願い致します。

Answer

ECマスターズの田中です。

ありがとうございます、
私にて直接、テスト商品を編集させていただきました。

最初に、タグに対して
width="100%" およびheight属性が無い形でサイズ指定が行われていると、
マップ座標の再計算がうまく動作しませんでしたので、
style="width:100%;"
など、スタイルシートでのサイズ指定を行っていただきますようお願いします。

また、実際に操作して気づいたのですが、
マップに含まれる各エリアの座標が、非常に大きい値になっておりました。

たとえば、

と記載されている場合、
画像左上端から、右に4877px、下に3503px移動した先の点、および
画像左上端から、右に8225px、下に3590px移動した先の点、
この２つの点と水平・垂直の線分で囲まれた四角形に対して
「速乾オールマイティーグレード 2ml」へのリンクが張られる、という意味になります。

https://gigaplus.makeshop.jp/orlo/gluehikaku20190322.jpg
上記画像のサイズは700x1648のため、
画像のサイズからはみ出た位置が指定されていることが
おわかりいただけるかと思います。

私にて、実際に「HTML Imagemap Generator」を利用して
https://gigaplus.makeshop.jp/orlo/gluehikaku20190322.jpg
を読み込み、
「速乾オールマイティーグレード 2ml」「速乾オールマイティーグレード 5ml」
以上２つのリンクの座標を変更したところ、
問題なく動作しておりましたので、

なおきちさんにて、テストページの、上記２つのリンクが
問題なく動作することをご確認いただいた上で、
改めて、「HTML Imagemap Generator」をご利用いただきますよう
お願いいたします。

Answer

ECマスターズ　田中様

早速のご回答ありがとうございます。
無事にすべてのリンクが設定できました！

いつも助かっております。
今後とも宜しくお願い致します。