楽天市場　スマホでのお気に入りボタン２カ所の表示タグについて

Question

お世話になります。デザインレシピで、スマホのお気に入りボタンを目立たせる＆固定バナーにお気に入りボタンを追加　の２つをアップしましたがいずれも表示されません。１点の商品のみのスマホ商品説明分に入れておりますので(https://item.rakuten.co.jp/当店/i007276/)、どこに間違いがあるのか確認と修正のアドバイスを頂けますでしょうか？
添付ファイルあと１つありますが、２通に分けて添付して宜しいでしょうか？
どうぞよろしくお願い致します。
出来ればマラソン前に入れたいので可能な範囲でお早めにお願いします。

Answer

ファイルを１つ追加します

Answer

度々ですみません。さらに同じページにスライダーバナーを張りましたが、上部に表示できません。希望はイベント告知君の下ですが、、GOLDにアップしたファイルを送りま………（省略）………
ログインして全文を読む

Answer

ECマスターズの田中です。

恐れ入りますが、当フォーラムに添付していただけるのは
画像ファイルだけとなっており、
今回添付していただいたファイルは私にて確認することができないため、
現在の「i007276」の商品ページの内容を確認させていただいております。

> どこに間違いがあるのか確認と修正のアドバイスを頂けますでしょうか？

共通説明文内、の直下にある、
「sumahookiniiri.js」のURLの前、および「sumahookiniiri.css」のURLの前後にある
囲み文字が、半角の「"」ではない文字で書かれておりました。
（手入力された場合、ソフトによって自動変換されたおそれがあります）

結果として、「sumahookiniiri.js」および「sumahookiniiri.css」のURLが
正しく認識されず、読み込めない状態となっておりますので、
上記三箇所を、正しい半角ダブルクォーテーションである
"
に修正していただきますようお願いします。

また、の３行下にある
「sumaho-okiniiri-smallbotan.css」のURLに誤りがございます。
具体的には、間の「/gold/ショップURL」が抜けております。
正しいURLに修正していただきますようお願いします。

> 同じページにスライダーバナーを張りましたが、上部に表示できません。希望はイベント告知君の下ですが、、

上部に移動させる命令を、新たにJavaScriptでご記載いただく必要がございます。

「sumahoslidebana.js」の２行目と３行目の間に、
$('#itemImageSlider').before($('#shopCommonText iframe[src*=slider_]'));
を追記していただきますようお願いします。

Answer

お世話になります
ご指摘頂きましたように修正をしたのですが、、

１、　　は表示されましたがなぜか２個あります

２、　　は相変わらず初期の白いバーのままです

３、「sumahoslidebana.js」の２行目と３行目の間に追記しましたが変化がありません

お手数ですが、再度どうぞよろしくお願い致します

Answer

ECマスターズの田中です。

> １、　　は表示されましたがなぜか２個あります

部分のタグが、
スマートフォン用商品説明文と、スマートフォン用の商品ページ共通説明文で
合計２回読み込まれていることが原因ですので、
どちらかの削除をお願いします。

> ２、　　は相変わらず初期の白いバーのままです

の直前の行にある
class="inframeBefore　の後の文字が " ではない、
scrolling="no" の後に余計な " がある、

「sumahookiniiri.css」のURLの前後が未だに " ではない、

といった、複数の原因が入り組んでおります。
それぞれ、改めて修正をお願いします。

> ３、「sumahoslidebana.js」の２行目と３行目の間に追記しましたが変化がありません

確認したところ、
「sumahoslidebana.js」には追記がされておりませんでした。

「sumahomarafukubslidebana.js」には追記されていることを確認しましたが、
こちらもURLの直後が " ではないため、
URLが正しく認識されず、読み込まれておりませんので、
修正をお願いいたします。

修正の際は、手入力せずに
"
をコピー＆貼り付けして修正していただきますようお願いします。

クロネコさんは、Macをご利用されているでしょうか。
その場合、クォーテーションを勝手に変換する
「スマート引用符とスマートダッシュを使用」の設定を
オフにしていただくことをオススメします。
http://d.hatena.ne.jp/torazuka/20140724/smart

Answer

お世話になります。遅くまでありがとうございます。
タグや　css、js　にも詳しくないため理解が遅く申し訳ありません。


「sumahoslidebana.js」ですね。今回新たに作成した物でなかったので、わからなくなっておりました。確か、イベント告知君か、検索フロートバナーを付ける時にGOLDに上げた物だったと思いますが、こちらに追記するのですね。


「sumahomarafukubslidebana.js」と勘違いして、こちらに追記しましたが、追記はこちらにも同じようにしたままで良かったですか？
「こちらもURLの直後が " ではないため、」とありますが、これは商品説明分の中の記述で宜しかったですね？


お察しの通りマック利用です。
手入力はせずに、間違っていると指摘されていない「" 」をコピペしておりましたが、それでもやはり半角ではないと言う事は、マックが原因でしょうか？
さらに、デザインレシピご案内の記述のタグ自体が半角ではないようでしたので、（わかりやすいようにでしょうか？）コピペした後に半角に書き直したりしたので、正確に入力出来ていなかったかもしれません。。（これもマックだからコピペがうまくいかないだけでしょうか？)
「　"　」が半角か全角かは　見た目では簡単に判断がつかないのですが、田中様はどのようにして誤りを簡単に判断されているのか、もし、私にも出来る事なら教えて頂ければ今後また誤りだらけにならないかな、、と思い大変助かるのですが、お願い出来ますか？

Answer

ECマスターズの田中です。

> 「sumahomarafukubslidebana.js」と勘違いして、こちらに追記しましたが、追記はこちらにも同じようにしたままで良かったですか？

はい、そちらへの追記でも結構です。

> 「こちらもURLの直後が " ではないため、」とありますが、これは商品説明分の中の記述で宜しかったですね？

すでに商品説明文の記述が変わっているようで不明なのですが、
現在の共通説明文の記述で、特に問題はございません。

> 手入力はせずに、間違っていると指摘されていない「" 」をコピペしておりましたが、それでもやはり半角ではないと言う事は、マックが原因でしょうか？

通常、貼り付けていただければ、Macでも問題なく半角になるはずです。
現在のソースは問題なくなっておりますので、
既に修正方法をおわかりいただいているかと思います。

>  デザインレシピご案内の記述のタグ自体が半角ではないようでしたので、（わかりやすいようにでしょうか？）

わかりやすいように、太字にしたり文字色を変えたりしておりますが、
基本的に半角で、そのまま貼り付けてご利用いただける状態にしております。
もし、問題のあるソースなどございましたら、
お手数ですが返信にて該当のページをお知らせいただきますようお願いします。

> 「　"　」が半角か全角かは　見た目では簡単に判断がつかないのですが、田中様はどのようにして誤りを簡単に判断されているのか、もし、私にも出来る事なら教えて頂ければ今後また誤りだらけにならないかな、、と思い大変助かるのですが、お願い出来ますか？

Macでは " や ” や “ などの見分けがつきにくい字体がほとんどで、
私も " の形を一生懸命覚えて対応している状態で、見逃すケースも多々ございます。

https://liveweave.com/
たとえば、書いたHTMLの見た目をすぐ表示してくれる、
上記「Liveweave」には、HTMLの文法間違いを簡易的に指摘する機能もございますので、
左上に貼り付けていただき、文字の背景色が変わる部分があるかどうかで
ご確認いただくという方法もございます。

その際、修正すべき点と文字背景色が変わる部分は必ずしも一致しませんので、
どう修正するかはクロネコさんにてご判断ください。

Answer

お世話になります。
ご指摘頂いた点を修正したら、昨夜無事希望通りに出来ました。
ありがとうございました。

デザインレシピはそのままコピペで使えたのですね。
当店情報を追記するため、メールにコピペしたら、文字の形態が半角ではない気がしたのでメール上で自分で手書き修正したのですが、メールを使った事が問題でテキストエディタでその作業をすれば問題なかったのでしょうか、、？
もしかしたら、当然のことを知らずに作業していたのかも、、と思い、、
普段は、色々なリンクやバナーのタグの張り替えにいつも立ち上がっているメールを使う事が多く、それでも問題なく出来ていたので、、
今後の注意点があれば教えて頂けますか？


スマホの共通説明文ですが、その後、バナー貼り付け君で４つのクーポンを貼ろうとしましたら字数制限があり３つのみしか貼れませんでした。
そのため、お気に入りのボタンはやめることとして、お気に入りバーのみとして、バナー貼り付け君でのマラソン用のクーポンバナーは３つで良しとしましたが、、
今後バナーの大きさを変えたら４つのクーポンも入れたい、また他の部分にもスライドバーを入れたいなどでてくる事もあるかとも思いますが、
スマホの場合、共通説明文以外にどこかで追記出来る場所はありますか？それとも共通説明文の文字数制限内でやりくりするしかありませんでしょうか？その場合、文字数を少なく押えるために工夫出来る点などございますか？

さらに色々疑問が出て来て、お手数ですがどうぞよろしくお願い致します。

Answer

ECマスターズの田中です。

編集に使うソフトというよりは、
先に申し上げた「スマート引用符とスマートダッシュを使用」の設定を
オフになっているかどうかが大事だと思いますので、
特に必要がなければオフにしていただきますようお願いします。
http://d.hatena.ne.jp/torazuka/20140724/smart
オフにした上で同じ問題が再発した場合は、
改めてお知らせいただければと思います。

> 共通説明文の文字数制限内でやりくりするしかありませんでしょうか？

はい、共通説明文内でやりくりしていただく必要がございます。

> 文字数を少なく押えるために工夫出来る点などございますか？

外部CSSファイル、および外部JSファイルは、
複数のファイルの内容を１つにまとめていただいても
特に問題はございませんので、
（※CSSファイルとJSファイルを１つにまとめることはできませんのでご注意ください）

同じ期間だけ使う分だけ、ファイルをまとめていただき、
埋め込み用のタグを削減していただければ良いと思います。

１点、心に留めていただきたいのですが、
本来の楽天の仕様に沿わないバナーをたくさん挿入されますと、
お客様の観ている画面にバナーが出過ぎて混乱を招く可能性もございますので、
入れすぎにならないようご注意ください。

Answer

「スマート引用符とスマートダッシュを使用」の設定も今後のために設定致しました。色々とわかりわかりやすくご説明頂き、ありがとうございました！………（省略）………
ログインして全文を読む

楽天市場 スマホでのお気に入りボタン２カ所の表示タグについて

楽天市場　スマホでのお気に入りボタン２カ所の表示タグについて