【楽天】スマホ版ヘッダーデザインについて

Question

ヘッダーデザインについて
https://ec-tsushin.com/rms_original_header2/
こちらの記事や、
https://ec-tsushin.com/rms_original_header/
こちらの記事を参考にしてｃｓｓを書いたのですが

https://item.rakuten.co.jp/pyokotto/20181024-3/
どうやっても途中で切れてしまうのですが
何故でしょうか？
どうやったらちゃんと表示できるようになりますか？

Answer

ECマスターズの田中です。

いただいたページの手順と照らし合わせてみたところ、
pyonさんの商品ページ共通説明文には、
スタイルシート用のタグとタグしか
記載されていないようです。

改めて、
https://ec-tsushin.com/rms_original_header2/
にて紹介されている、

で始まるソースを共通説明文に挿入していただいた上で、
表示をご確認いただきますようお願いします。

Answer

スタイルシートは、
https://www.rakuten.ne.jp/gold/pyokotto/banner.css
こちらにまとめています☆数字を触ったら変化があるので、ちゃんと反応しているとは思うのですが・・・
確認お願いします(;´Д｀)



足りないのは、↑これですかね＞＜
足してきます☆
（最初 https://ec-tsushin.com/rms_original_header/ こっちを参照したので、抜けてました＞＜）

Answer

これを足したら、
もっとぐちゃぐちゃになりました+.(*´pωq`)ﾟ+.ｗｗ
https://item.rakuten.co.jp/pyokotto/20181024-3/

よろしくお願いします(´;ω;｀)

Answer

ECマスターズの田中です。

> 
> 
> 足りないのは、↑これですかね＞＜

それだけではなく、
タグの直後に入れる必要のある



が不足しておりますので、追記をお願いします。

Answer

スマホ版共通説明文がヘッダーまで上がってきてぐちゃぐちゃになっていたのですが

を消したら治りました！

Answer

やってみたら、

を入れると、共通説明部分に変な空白が出来るだけなので、消しました＞＜###HR######IMG0dd7c885e17888cf3b312e9f0d12455d5.pngIMG0######BR###

Answer

すみません、見つけました！
RMSのアイフレームのハイトが
200pxに指定されていたので
500pxのアイフレーム内容がバツ切りになっていただけでした(´;ω;｀)ｗ

お騒がせいたしました+.(*´pωq`)ﾟ+.

Answer

ECマスターズの田中です。

無事ご設定いただけて何よりです。

高さ自動調整のためのabsoluteBox・headerWrapを
利用しない形でご設置いただいておりますことと、
スライドバナー設置用にもiframeをご利用いただいており、
環境の違いによる見た目への影響を受けやすい構造になっておりますので、

幅の広い、もしくは狭いスマートフォン、
またiPhoneでご確認いただいている場合はAndroidなど、
できる限り様々な端末にて、快適にお買い物ができるかどうか
ご確認いただきますようお願いします。

Answer

エクスペディアでヘッダーは問題無く表示されているとの事でした☆

ちなみに、田中さん的には、

/* ----------------------------------------------------------------
　AのCSS
---------------------------------------------------------------- */

#itemImageSlider{
     margin-top: 538px; /* ①商品ページのコンテンツを下にズラす */
     }
 
.ctgTtl{
     margin-top: 538px; /* ②カテゴリーページのコンテンツを下にズラす */
     }
 
.sample{
     position: absolute; /* ③sampleクラスのdivボックスやiframeパーツをページ全体から相対位置指定 */
     top: 148px; /* ④店舗独自ヘッダーの画面トップからの距離を指定 */
     left: 0;
     width: 100%; /* iframeの場合横幅をwidthで指定すれば不要 */
     }
 
.itemtitle,.ctgTtl1,#campaignText,#itemFestival{
     display: none; /* ⑤通常商品ページと定期購入ページの店名、商品変倍表示、楽天スーパーDEALの表示を非表示に */
     }

と、

/* ----------------------------------------------------------------
　BのCSS
---------------------------------------------------------------- */

@charset "utf-8";
/* ver 1.02 */
  
#headerContents {
  width: 1024px;
  height: 1003px; /* 1.【パーツの高さ数値】にiframeもしくは画像の横幅が1024px時の高さを入力（※単位はpx） */
}
   
#itemImageSlider, .ctgTtl , .imageFlick {
  margin-top: calc(1003 / 1024 * 100% + 40px); /* 2.【パーツの高さ数値】にiframeもしくは画像の横幅が1024px時の高さを入力（※pxなど単位はつけないこと） */
  position: relative;
}
 
#itemImageSlider, #sCLContainer, #sCSLContainer, .ctgTtl , .imageFlick {
  z-index: 1000;
  position: relative;
}
 
   
@media screen and (max-width: 1023px) {
  #headerWrap {
    position: relative;
    width: 100%;
    padding-bottom: calc(1003 / 1024 * 100%); /* 3.【パーツの高さ数値】にiframeもしくは画像の横幅が1024px時の高さを入力（※pxなど単位はつけないこと） */
  }
   
#headerContents {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
   
#absoluteBox {
  position: absolute; 
  top: 148px; /* 4.店舗独自ヘッダーの画面トップからの距離を指定 */
  left: 0;
  width: 100%;
  z-index: 0;
}
   
.itemtitle,.ctgTtl1,#campaignText,#itemFestival {
  display: none; /* 5.通常商品ページと定期購入ページの店名、商品変倍表示、楽天スーパーDEALの表示を非表示に */
}

では、どちらが不具合おきにくそうでオススメですか？？？
Aの方が修正時わかりやすくて私は好きなのですが・・・。

Answer

ECマスターズの田中です。

Xperiaで問題なくご確認いただけたということですね、
何よりです。

個人的には、端末の幅に合わせて高さを自動調整できる
BのCSSを利用したいところなのですが、
今後、内容を修正していく上で、手間とミス防止の観点から、
Aをオススメさせていただきます。

AのCSSをご利用いただく場合も、
修正を行った結果、特定の機種だけでページが乱れてしまうことのないよう、
十分にチェックを行いながら修正していただきますようお願いします。

Answer

田中さん☆ありがとうございます☆
その後、やっぱ田中さんオススメのBのcssにすることにしました☆

そして本日、アンドロイドの方から、上部切れてるとご連絡頂きました（　；∀；）
早急に何とかしたいのですが、大丈夫でしょうか(´；ω；｀)すみません

ついでに下の買い物かごの崩れも何とかできれば嬉しいです(´；ω；｀)###HR######IMG0907ff7db5132ad6b285f90ce9924d86b.jpegIMG0######BR###

Answer

ECマスターズの田中です。

ヘッダーの途切れ、および買い物かごの崩れに関して、
原因を確認の上改めてご連絡いたしますので、
お急ぎのところではございますが
今しばらくお待ちいただきますようお願いいたします。

Answer

ありがとうございます！よろしくお願いします(＞人＜;)☆

Answer

ECマスターズの田中です。

大変お待たせいたしました。

スライドバナーが見切れているのは、
スライドバナー用の高さが正しく設定されておらず、
システムで割り振られた高さがバナーに対して低すぎることが原因です。

このスライドバナーは、画面横幅に合わせて
高さも一緒に伸縮する仕組みになっておりますので、
画面横幅との割合で高さをご指定いただくことで
端末によって見切れたり、余白が多くなったりすることを防ぐことができます。

具体的な方法ですが、
https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/header.html
に記載されているタグとタグの間に

/* スライドバナーの高さ */
iframe[src*="/ecstation/toolbox/slider"] { height: 60vw; }

を追記していただきますようお願いします。

買い物かごが崩れているのは、
本来のボタンのサイズより縮めすぎたおかげで、
ボタン内の文字が改行されてしまったことが原因です。

まずは、右側の余白をなくし、横幅いっぱい使い切ることで
なるべく改行されないようにしていただければと思います。

具体的な方法ですが、
https://www.rakuten.ne.jp/gold/pyokotto/banner.css
の「購入ボタン横追従LINE」に含まれております、

width: calc( 40% - 35px );
を
width: calc( 50vw - 56px );
に、

２箇所含まれている
width: calc( 20% - 20px );
を
width: 52px;
に、

以上計３箇所を修正していただきますようお願いします。

> その後、やっぱ田中さんオススメのBのcssにすることにしました☆

ありがとうございます。
ですが、Bのcssは、以前ご案内差し上げた

で始まるソースの形式で共通説明文にご記載いただかないと
動作しない仕組みになっております。

Aのcssに戻していただくか、
Bのcssが動作するよう、
共通説明文のiframeのidをheaderContentsに変更し、
absoluteBox・headerWrapのdivタグで囲んでいただくか、
どちらかのご対応をお願いいたします。

Answer

ありがとうございます☆
明日、また追従と合わせて表示いけてるか聞いてみます♪

私の携帯からは、気になっていた追従の隙間が消えました∩^ω^∩
FBにて、以前隙間を直そうの会があったので、
シェアしておきますヽ(´ω｀*)人(*´ω｀)ﾉ

 ←共通説明部分を上に
 ←わかんないｗ
←ヘッダーに隙間？？？

みたいな感じなのかなーと解釈したのですが、
やはりBのcssを使う場合、これは入れないといけないでしょうか？
（ヘッダーに隙間開けてアイフレームを入れるcssでは無く、共通説明文に書いて上げる方法？？？？）

入れないといけなければ、アイフレームはめ込む方が、やりやすいので、
やはりAのcssに戻してみます☆

それでは、また後日結果報告に参ります☆

Answer

ECマスターズの田中です。

> 明日、また追従と合わせて表示いけてるか聞いてみます♪

表示結果のご報告、お待ちしております。

> FBにて、以前隙間を直そうの会があったので、
> シェアしておきますヽ(´ω｀*)人(*´ω｀)ﾉ

ありがとうございます。
全く同じ構造でボタンを設置されている方の助けになれば幸いです。

> やはりBのcssを使う場合、これは入れないといけないでしょうか？

はい。高さ可変のヘッダーを実現するために、入れる必要がございます。
技術的な話のため詳細は省きますが、
１つのタグは１つのタグと対になっていることは
ぜひご理解いただきますようお願いします。

開始タグのと終了タグので囲んだ部分を、
ひとかたまりの範囲、とするタグです。
http://www.htmq.com/htmlkihon/003.shtml

そのため、


に対して、

が存在しております。
隙間を空けるためではなく、開始タグ２つに対応する終了タグなのです。

開始タグだけ書いたり、終了タグだけ書いたりすると、
2018/11/28 18:51 や 2018/11/28 19:13 でご覧いただいた通り
ページ全体の構造を崩す原因になりますので、
ご注意いただきますようお願いいたします。

Answer

田中さん∩^ω^∩ありがとうございます☆
無事ちゃんと表示されました♪

あ☆そういう事ですね☆すみません、="" 入る事で混乱しておりました(；ﾟДﾟ)
htmlの基礎の基礎ぐらいまでは学校で習って、個人のウェブデザイナーのアシスタント的な事をしていたのである程度はわかります＾＾☆(どこから説明すれば良いのかと説明しにくいかと思うので申告します☆)

でしたら、



ここ全部書いて無い状態だと、大丈夫でしょうか？？

何故ここまで頑なに入れたくないのかと言うと、商品説明文を上にあげてくれなくて良いのです(´;ω;｀)ｗ###HR######IMG01b296d2d53bb97eb0229f996f75a52f2.jpegIMG0######BR###

Answer

あと、ついでばかりで申訳ないのですが・・ｗ

買い物かごと、ご購入手続きへのボタンの高さが
微妙に違うとの事で
こちらを揃えるには、どうすれば良いでしょうか？☆

Answer

ECマスターズの田中です。

全部書いていない状態だと大丈夫、というのが、
Aのcssを利用しても大丈夫か、ということでしたら、大丈夫です。
Aのcssを利用する場合は、



を記載しなくても結構です。

> 買い物かごと、ご購入手続きへのボタンの高さが
> 微妙に違うとの事で
> こちらを揃えるには、どうすれば良いでしょうか？☆

https://www.rakuten.ne.jp/gold/pyokotto/banner.css
に記載された

#floatingCartContainer .cartButton>a {
font-size: 11px !important;
}

によって、ボタンの内容の高さが若干小さくなったことが原因です。
両方で統一するために、
font-size: 11px !important;
の直後に
line-height: 16px;
を追記していただきますようお願いします。

Answer

田中さん∩^ω^∩ありがとうございます☆
バタバタしすぎて遅くなりました(;´Д｀)

いえ、



を書いてなければ、Bを使って大丈夫なのかなーと、、、
急いでいたのでBのcssの内容を、理解しようともしておりませんでしたので、Bのcssに何が書かれているのか全く知りません！(;^ω^)ｗ
ちゃんと理解しようとしてみてから、もう一回質問しますね(;^ω^)！

購入ボタンの調整もありがとうございましたヽ(´ω｀*)人(*´ω｀)ﾉ
これって
div#floatingThirdButton {
や
div#floatingThirdButton 2{
には、
line-height: 16px;
を入れなくっても大丈夫ですか？？

Answer

ECマスターズの田中です。

返答が遅れてしまい、申し訳ありませんでした。

> (HTMLタグ省略)を書いてなければ、Bを使って大丈夫なのかなーと、、、

HTMLタグを書かない場合、
BのCSSを記載しても、ページにほぼ影響しなくなります。
複雑な仕組みのため、解読には時間を割いていただく必要があるかと思いますが、
どうしても、横幅ごとに高さの自動調整を行いたい、という場合は
一度、仕組みの理解をお試しいただければと思います。

> line-height: 16px;
> を入れなくっても大丈夫ですか？？

お気に入り追加・LINEで送る 各ボタンには、
固定値で高さが設定されているため、
line-heightを入れていただく必要はございません。