スマートフォンのヘッダーにつきまして。

Question

大変お世話になります。

どのページを見てもヘッダー（検索窓とメニューなどの表示）をさせたいのですが、
分からない状況になります。

具体的には画像の添付をさせていただきました感じになります。

お手数になりますが、
どうぞよろしくお願いたします。

Answer

大変お世話になります。

度々申し訳ございません。
先程のお問い合わせで連絡漏れがございましたので、
再度ご連絡をさせていただきました。

先程お問い合わせをさせていただきました、
件名：スマートフォンのヘッダーにつきまして

のご連絡になりますが、
編集はまるごとスマホを利用しております。

どうぞよろしくお願い致します。

Answer

ECマスターズの田中です。

今回ご案内する方法は、
楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

最初に、ヘッダーとして表示させるためのHTMLファイルを、
楽天GOLD内に設置してください。

次に、下記の内容でCSSファイルを作成し、
楽天GOLD内に設置してください。
===== この下の行から ============
.spHeader{
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: HTMLの内容の高さpx;
}
===== この上の行まで ============
※HTMLの内容の高さは、実際の数値にご変更ください。

最後に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
画面上にヘッダー用HTMLの内容を固定させることができます。
===== この下の行から ============


===== この上の行まで ============
※CSSファイルのURL、ヘッダー用ページのURLは、実際のURLにご変更ください。

Answer

大変お世話になります。

ご連絡大変ありがとうございます。

ご連絡をいただきました内容にて、
更新を行いましたが表示がされないため再度ご連絡をさせていただきました。

楽天GOLD内に設置しましたファイルは下記となります。

.spHeader{
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 999;
 width: 100%;
 height: 50px;
 }


ご連絡をいただいておりますように、
スマートフォン用共通説明文に、
ＨＴＭＬタグを貼り付けを行いましたが、
【許可されないHTMLタグ "iframe" が入力されています】と、
エラー表示が出てしまいます。

また、まるごとスマホを使用していますので、
直接ブロックかと思い、
ＨＴＭＬタグを貼り付けを行いましたが、
表示がされないようです。


※ＨＴＭＬタグ↓


 


誤っている箇所が分からない状況になります。

大変お手数になりますが、
どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

大変失礼いたしました、
タグに対して、禁止タグチェックを回避するための「 ="" 」の記述が不足しておりましたので、


↓


このように、「 ="" 」を２箇所追加していただけますでしょうか。

最初にご案内さし上げた内容も修正させていただきましたので、ご了承のほどお願いいたします。

Answer

大変お世話になります。

ご連絡大変ありがとうございます。
再度更新を行いましたが表示がされない状況になります。

また、再度ご確認となりますが、
下記のＨＴＭＬタグは、
まるごとスマホの直接ブロックではなく、
スマートフォン用共通説明文でよろしいでしょうか。

※今度はスマートフォン用共通説明文へ入れた場合、
エラー表示は出ない状況になります。

ＨＴＭＬタグは下記になります。


 



また誤りの可能性がる箇所はＨＴＭＬファイル（楽天GOLD内の設置方法）になりますでしょうか。

※ＨＴＭＬファイルはメールにてご連絡をさせていただきました。


大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

「2016-07-01.css」ファイルの内容が、
スタイルシートではなく、HTMLになっております。
以前いただきました、下記内容に置き換えていただけますでしょうか。

===== この下の行から ================
.spHeader{
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 50px;
}
===== この上の行まで ================

Answer

大変お世話になります。

表示がされるようになりました。
大変ありがとうございます。

また、2点ほどご質問となります。


■1点目
ＨＴＭＬファイルに、
トップページのリンク先を入れましたが、
エラーを起こしてしまいます。

通常のトップページのリンク先と、
異なるのでしょうか。

■2点目
画像の添付をさせていただきましたが、
左右と上に隙間があいてしまいます。

隙間が無いよにすることは可能になりますでしょうか。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

＞■1点目
リンク先は特に異なりませんが、
リンクを移動させるフレームを指定しないと、
タグの内部だけで移動しようとしてしまいますので、

HTMLファイルのタグ内に

を挿入してください。

HTMLファイルにタグがない場合ですが、
ホームページビルダーをご利用中であれば、
新規作成時に既に入っているタグをそのままご利用いただき、
上記タグをとの間に、
今までのページの内容をとの間に挿入してください。

＞■2点目
HTML内での隙間をなくし、画面を横幅いっぱいに広げてください。
具体的な方法ですが、

HTMLファイルのタグに「style="margin:0;"」という属性を追加していただき、
（例： → ）
画像ファイルを埋め込むタグに「width="100%"」という属性を追加してください。
（例： → ）

Answer

大変お世話になります。

リンク先と横幅の隙間につきまして、
完了することができました。

大変ありがとうございます。

ただ、上の隙間につきましては、
変わらない状態となります。

何か方法がございましたら、
お願いできればと思います。

※HTMLファイルですが、
メールにてご連絡をさせていただきました。

また、もう1点ご質問となりますが、
検索窓とその上の情報につきまして、
非表示することはできますでしょうか。
※ヘッダーの高さは現状のままでと考えております。

※該当に箇所につきまして、
画像の添付をさせていただきました。

大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

＞ただ、上の隙間につきましては、
＞変わらない状態となります。

いただいたHTMLソースを確認したところ、
タグに、「cellspacing="0"」という属性をつけると
左と上に出来る微妙な隙間を消すことができましたので、
お試しいただけますでしょうか。

＞検索窓とその上の情報につきまして、
＞非表示することはできますでしょうか。
＞※ヘッダーの高さは現状のままでと考えております。

それでは、外部スタイルシート（今回の場合、2016-07-01.css）の中に
下記の規則を加えていただけますでしょうか。

body #ipnsh-header, body #rstTopSearch { visibility: hidden; }

Answer

大変お世話になります。

すべて表示することができました。
大変ありがとうございます。

Answer

横からすみません。

こちらの方法を用いまるごとスマホで作成している「スマホトップページ」と「スマホカテゴリーページ」にRMSスマホ標準のヘッダーを常に表示さるようにしたのですが、

＞＞※CSSファイルのURL、ヘッダー用ページのURLは、実際のURLにご変更ください。

このURLは何を当てはめたらよいのでしょうか？

Answer

ECマスターズの田中です。

＞＞※CSSファイルのURL、ヘッダー用ページのURLは、実際のURLにご変更ください。
＞このURLは何を当てはめたらよいのでしょうか？

最初に、ヘッダーとして表示させるためのHTMLファイルを作成して、
予め楽天GOLDにアップロードしていただき、
設置したHTMLファイルのURLを「ヘッダー用ページのURL」に当てはめてください。

次に、下記の内容をメモ帳に貼り付けて、
ファイル名の末尾を「.css」にして
外部CSSファイルとして保存していただいた後に
楽天GOLDにアップロードしていただき、
===== この下の行から ============
.spHeader{
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: ヘッダー用ページの内容の高さpx;
}
===== この上の行まで ============
設置していただいた外部CSSファイルのURLを「CSSファイルのURL」に当てはめてください。

Answer

ありがとうございます。

オリジナルのヘッダーではなく（GOLDでないページに通常表示されている）標準のヘッダーを、この場合に付ける事もできるのでしょうか？

Answer

ECマスターズの田中です。

インラインフレームは、ページ単位で内容を読み込む仕組みになっており、
単独のWebページとしては存在しない標準のヘッダーはつけることができませんので、
オリジナルのHTMLファイルを作成していただく必要があります。

Answer

ありがとうございます。
お伺いしたことを踏まえ、取り組んでみます。

お忙しい中、すみませんでした。