スマホヘッダーの設置方法

Question

https://item.rakuten.co.jp/rcmdin/hh-hp4-s/

こちらのサイトのように商品ページ上部にオリジナルのヘッダーをおきたいです。

やりたいこととしては
上から
①ショップロゴ
②2カラムの画像を並べる
③5カラム（参照サイトと同じように）カテゴリーを載せる

宜しくお願いします。

Accepted Answer

ECマスターズの田辺です。

実際に状況を確認させていただく必要がございますので、
テストページを作っていただきそちらのURLを
教えていただいてもよろしいでしょうか。

テストページは、

１：
商品ページをコピーする

２：
コピーページの商品管理番号を変更する
（例：〇〇_test）

３：
共通説明文に記述したタグを
コピーしたページのスマートフォン用商品説明文に入れていただく

４：
「サーチ非表示にする」にチェックを入れる

の手順で作っていただければと思います。


フォーラム上でページを公開をしたくない場合には、
リクエストフォームからURLをお送りいただけますと幸いです。

Answer

ECマスターズの田辺です。

いただいたサイトのように商品ページ上部に
オリジナルヘッダーを置きたい場合には、

表示させたいデザインページを作る
↓
iframeでページを読み込む
↓
JavaScriptで商品ページ上部にもっていく

という方法がございますのでご案内させていただきます。

１：
置きたいデザインのHTMLファイルを作成し、
 GOLDサーバー内に設置する。

　※HTMLでCSSファイルを読み込んで
　　①ショップロゴ
　　②2カラム
　　③5カラム
　　を作成する。

２：
下記内容をメモ帳に貼り付けて
ファイル名の末尾を「.js」にして、
外部JSファイルとして保存し、
楽天GOLDにアップロードしてください。

= この下の行から ====================
jQuery(function($){
$('#itemImageSlider').before($('.iframeBefore'));
});
= この上の行まで ====================

最後に、下記内容を
スマートフォン用の商品ページ共通説明文に挿入していただくことで、
商品画像の上にインラインフレームを挿入することができます。

= この下の行から ====================



= この上の行まで ====================
※外部JSファイルのURL、１：で作成したページのURL、
　表示横幅（高さ）は、実際のURL・半角数字に置き換えてご利用ください。


１：に関して、
①ショップロゴ
②2カラム
③5カラム
をつくるソースの内容は前回のフォーラムでいただいた
https://forum.ec-masters.net/post_view.php?id=6207
上記の内容を参考に作成していただき、
ご不明点がございましたら再度ご質問いただけますと幸いです。

Answer

ありがとうございます。
早速やってみたのですが、
なぜか左よりになってしまいました。。
※実装した状態で相談したいのですが、売上が落ちそうなので今はコメントアウトしてます。

なぜ左よりで
リンク先のトップページもレイアウトが崩れてしまいました。

画像を添付しましたのでご確認ください。###HR######IMG0ca72d2155e0400cca293631a3546e577.jpegIMG0######BR###

Answer

https://item.rakuten.co.jp/dreamhats/b17111/

ありがとうございます。
こちらで作成いたしましたので、ご確認ください。

Answer

ECマスターズの田辺です。

テストページの作成ありがとうございます。
確認させていただいたところ、




という表記になっておりました。

iframeは
中身の大きさに合わせて表示はされませんので、
表示させたい大きさに
widthとheightを指定していただく必要がございます。

dhさんにご用意いただいたヘッダーに対しては
width="100%" height="220"できれいに表示されましたので、
設定をお試しくださいませ。

Answer

ありがとうございます。
綺麗にできましたが
各リンク先を押すと巨大ページになります。
原因を教えていただけると幸いです。

https://item.rakuten.co.jp/dreamhats/b17111/

Answer

ECマスターズの田辺です。

確認させていただいたところ
現状はiframeで指定した大きさの中で
ページが開いている状況ですが、
巨大ページというのはそちらのことでしょうか。

iframeの中のみでのリンクなってしまっている状況につきましては、
GOLDの中にある hedder_bunner.html の

と
の中に


を入れていただき
GOLDに上書きしてアップロードしていただくことで解決します。

もし、そちらで改善しない内容でしたら、
巨大ページについて詳しく状況を教えていただいてもよろしいでしょうか。

Answer

ありがとうございます。
無事実装できました。

Answer

スマホヘッダーについて再度質問です。
以前作ったものをデザイン変更してみたいのですが
バナーなどを配置するときは
Widthはどのように設定すればうまくいきますか？

スマホサイズのWidthを教えてもらえると助かります。

Answer

ECマスターズの田中です。

スマートフォンは、画面のピクセル数の分だけ
画像を綺麗に表示することができます。
http://sounansa.net/archives/2428
上記、主な機種の横幅のピクセル数（ｘの右側）を確認すると、
日本でよく使われているiPhone7・8の横幅は750ピクセル、
他機種は720〜1440ピクセルが主となっております。

また、同URLの通り、機種によって横幅のピクセル数が異なるため、
１つの機種に合わせると、他の機種で見た時にはみ出たり、不足したりしますので、
機種の幅に合わせて、バナーの幅が変化するようご設定いただくことをオススメします。

つまり、バナー用の画像ファイルを、
画面の横幅750〜1000ピクセル程度で収まる程度にご用意いただき、
（バナーを横2列に並べる場合は１つ350〜500px程度）
実際にHTML内で横幅を指定される際は、
width="100%" や width="50%" のように、
割合でご指定いただくことをオススメいたします。

詳しい解説を、下記デザインレシピ「2：スマートフォンの大きさ」にて
行っておりますので、ぜひご一読ください。
https://club.ec-masters.net/index.php?design_page12