スマートフォンのお知らせ、ＰＣ表示切替につきまして。

Question

大変お世話になります。

ＧＯＬＤにHTMLファイルをおきまして、
ヘッダー表示を行っております。

画像の添付をさせていただきましたが、
3点程ご質問となります。

1点目・2点目→ボタン作成
3点目→隙間の削除

大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

いただいた画像から判断すると、
店舗ロゴ・お知らせボタン・PC表示ボタンが
横一列に並んだ状態をご希望ということでしょうか。
その状態にするための方法をご案内いたしますので、
間違っておりましたらご返信ください。

＞１点目・２点目

ヘッダー用HTMLの余白部分が上に被さって見えなくなっている状態ですので、
ヘッダー用HTMLを表示するタグの横幅を
狭くする（画像の横幅分丁度にする、など）必要があります。

外部CSSファイル内、.spHeaderに対する規則に含まれる、
width属性の値を 100% から 180px にご変更ください。

さらに、隠しているボタン類を再表示させる必要があります。

外部CSSファイル内に含まれている、
body #ipnsh-header, body #rstTopSearch { visibility: hidden; }
から「body #ipnsh-header,」を削除して、
body #rstTopSearch { visibility: hidden; }
にご変更ください。

それでも、端末によっては幅が足りず、
お知らせボタンが店舗ロゴの下に来る場合があります。
その場合は、右上のバナーを非表示にするような処理が必要です。

下記の一行を、外部CSSファイル内に加えてください。
body #ipnsh-header div.topbtn li:nth-child(5){ display: none; }

＞３点目

検索窓から上のパーツを見えないようにしているところを、
検索窓だけ、高さもなくなるように隠していただき、
バナーに必要な余白を調整する形になります。

外部CSSファイル内にある
body #rstTopSearch { visibility: hidden; }
を、
body #rstTopSearch { display: none; }
にご変更いただき、
下記一行を加えてください。
body #ipnsh-header { margin-bottom: 10px; }
（「10」の数字を変えて、余白の調整を行ってください）

Answer

大変お世話になります。

ご連絡大変ありがとうございます。
上記内容にてページの更新をさせていただきます。

ありがとうございます。

Answer

大変お世話になります。

本日解決済みとさせていただきましたが、
表示が思うように表示がされないため、
2点程お問い合わせとなります。


■1点目

ご連絡をいただきましたように、
下記ように外部CSSファイルの変更を行いましたが、
添付画像のように、
それ以上ヘッダーが上にいかない状況になります。

.spHeader{
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 999;
 width: 100%;
 height: 51px;
 }
body #ipnsh-header, body #rstTopSearch { display: none; }
body #ipnsh-header { margin-bottom: 1px; }



2点目

ヘッダーの背景に商品画像の表示がされてしまいますので、
表示がされない方法はございますでしょうか。


※ＧＯＬＤのおいておりますＨＴＭＬファイルですが、
メールにてご連絡をさせていただきます。

大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

＞1点目
ソースを確認したところ、
最初にcellspacing="0"を設定したの中に
さらにタグが設置されており、
かつcellspacing="0"が設定されていないために
空白ができております。

内側のタグにもcellspacing="0"をご設定いただくか、
不要であれば、内側のタグを削除して、１つのタグにまとめてください。

＞2点目
ページ全体に背景色を指定すると、
HTMLが表示されている部分を全て背景色で覆うことができます。
たとえば、

のようにご指定ください。

Answer

大変お世話になります。

ご連絡大変ありがとうございます。
タグは一つ削除ができましたが、
を入れますと、
ホームページビルダーがエラーを起こします。

どこに入れればよろしいでしょうか。
基本的な部分で申し訳ございません。

HTMLファイルはメールにてご連絡をさせていただきました。

どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

書式は間違っていないため、
ホームページビルダーのエラー内容から判断する必要がありますので、
内容をお知らせいただけますでしょうか。

推測できる対処法は、下記の２つです。

１．bgcolor属性で背景を指定する。


２．background→background-color に変更する。

Answer

大変お世話になります。

また、度々申し訳ございません。
を入れることがでまして、
背景色の指定ができました。

ありがとうございます。

また、ヘッダーの表示位置につきましては、
上手にできない状況となります。

ご連絡をいただきましたように、
2ヶ所へcellspacing="0"を入れてましたが、
上へいかないようです。

また、CSSファイルは下記となります。

.spHeader{
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 999;
 width: 100%;
 height: 20px;
 }
body #ipnsh-header, body #rstTopSearch { display: none; }
body #ipnsh-header { margin-bottom: 1px; }


※最後の行の数字を調整してみましたが、
変わらないようです。

数字を小さくする程上へ表示がされるかと思いますが、
よろしいでしょうか。

※HTMLファイルはメールにてご連絡をさせていただきました。

大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

ヘッダーを本来のボタンと重ならない位置に移動させたいということであれば、
「ヘッダーを上に移動する」ではなく、
「ページの内容を下にずらす」処理が必要となります。

そのため、CSSファイルの
body #ipnsh-header { margin-bottom: 1px; }
で、〜（本来のヘッダーのうち、一番上のボタンが並ぶ1行）の
下に余白を作り、ページの内容を下にずらそうとしているのですが、

上記規則のすぐ上にある
body #ipnsh-header, body #rstTopSearch { display: none; }
で、〜を非表示にしているため、
作った余白も非表示にされてしまっております。

メニュー・カテゴリ等のボタンが並ぶ1行の上に余白を作る、
という方法でご対応をお願いします。

具体的には、CSSファイルに、下記の指定を加えてください。
#topFuncShopPopup { margin-top: 100px; }

※「100」の数値を増減して、位置を調整してください。
※「body #ipnsh-header { margin-bottom: 1px; }」の一行は不要なので、削除していただいて結構です。

Answer

いつも大変ありがとうございます。

表示ができるようになりました。
大変ありがとうございます。

また、細かいところで申し訳ございませんが、
3点程ご質問がございます。

※画像の添付をさせていただきました。

■1点目

同じ機種でも表示のされかたが異なり、
また、機種が異なりますと、
ほぼ表示がされない状況になります。

こちらは同じにすることは可能になりますでしょうか。


■2点目

楽天からのお知らせボタンを付けたいので、
分からない状況になります。
※ＰＣサイトのＵＲＬを試しましたが、
異なるようです。

■3点目

Ｃサイト表示切替の機能を付けたいのですが、
こちらもわからない状況になります。


大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

＞■1点目
＞隙間の大きさが異なる状況になります。

iPhone6+とiPhone5では、ブラウザの横幅が異なります。
具体的な数値は、下記ページをご参照ください。
http://qiita.com/tomohisaota/items/f8857d01f328e34fb551
（Androidが加わると更に複雑になりますが、基本的に横幅320ピクセル以上です）

横幅が異なると、ヘッダー用のHTMLファイルの仕様により、
看板の高さに伴ってHTMLの高さが変わり、
結果として隙間の大きさが前後します。

HTMLファイルを実際に、ウィンドウを狭めてご覧いただき、
狭め方によってどのていど高さが異なるのか、
どの属性を固定・可変にすれば希望の見た目になるか、
ご確認をお願いいたします。

＞右側がアンドロイドでの表示状況で、
＞小さくてほぼ見えない状況になります。

CSSの内容を改めて確認したところ、
.spHeaderのheightが20pxに設定されておりました。

iOSデバイス（iPhone、iPadなど）の場合、
タグの高さ設定にかかわらず
内容を全て表示する仕様になっているため、
ヘッダーの内容が全部表示されるのですが、

Androidの場合はheightの設定が適用され、
結果として先頭20ピクセル分しか表示されておりません。
ヘッダー用の余白と同じ高さをご指定ください。

＞■2点目

この動作には、JavaScriptによる操作が必要なのですが、
タグの中（rakuten.ne.jp/gold内のページ）から、
ドメインの異なる商品ページ（rakuten.co.jp内のページ）は、
セキュリティ上の問題から、JavaScriptで操作することができないため、
ヘッダー用HTMLの中で、お知らせボタンの動作を再現することはできません。

ヘッダーの内容を、ではなく、
JavaScriptを利用して商品ページ内に直接書き込む、といった、
構造を変える対策が必要となります。

＞■3点目

現在のページのURL＋「?force-site=pc」を、リンク先に設定することで可能です。
手動ではできないので、JavaScriptを利用します。

たとえば、
PCサイト切り替えボタンのリンクを設定するタグに、

Answer

いつも大変ありがとうございます。

大変申し訳ございません。

PCサイト表示切り替え方法ですが、
理解ができていない状況になります。

具体的にですが
ID属性の設定の仕方が分からない状況になります。

Answer

ECマスターズの田中です。

＞ID属性の設定の仕方が分からない状況になります。

いただいたhtmlにあります通り、

の状態で問題ありません。

＞~はURLを入れればよろしいのでしょうか。
＞また、その場合はどのURLとなりますでしょうか。

特に記載していただく必要はありません。
href属性は、記載していただいたタグに書かれたスクリプトにより、
ページ読み込み時に自動的に上書きされます。
実際にページにタグで読み込んでいただき、動作をご確認いただけますでしょうか。

Answer

いつも大変ありがとうございます。

再度確認をしましたところ、
問題ございませんでした。

大変ありがとうございます。

また、最後にもう一つご質問がございます。
画像の添付をさせていただきましたが、
僅かですがヘッダーの下に隙間がある状態となっております。

隙間が無いようにすることは可能になりますでしょうか。

※HTMLファイルは昨日のメールと同じものになります。

大変お手数になりますが、
どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

＞隙間が無いようにすることは可能になりますでしょうか。

可能です。
隙間を作っている原因は２つあります。

１つ目ですが、
タグが１行の中でベースラインに揃えられていることが原因です。
詳しい説明は、下記URLの記事をご参照ください。
http://chihochu.jp/52660998/
解決するには、記事の通り、下記スタイルシートを適用させてください。
（後述のリセットCSSに加えていただいても結構です）

img{ vertical-align: bottom; }


２つ目ですが、
タグの内部に、１ピクセルの余白が設定されておりますので、
スタイルシートで詰めることができます。

ですが、このような数ピクセルの見た目の差は、
ブラウザの違いによっても発生する可能性があります。

今後の個別対応の手間を省くため、
リセットCSSの導入をお勧めいたします。

リセットCSSとは、
各ブラウザでの細かい見た目の違いを統一させる
スタイルシートの規則をまとめたファイルです。

いくつか種類がありますが、
たとえば「HTML5 Doctor Reset Stylesheet」というリセットCSSが
下記URLよりダウンロードできます。
https://code.google.com/archive/p/html5resetcss/downloads

最新版をダウンロードしていただき、
楽天GOLDにアップロードしていただいた上で、
〜タグ内に

という形式のタグで読み込ませてご利用ください。

Answer

大変お世話になります。

希望通りに表示ができるようになりました。
大変ありがとうございました。