楽天スマホ用トップページに使用しているフローティングヘッダーを変更したい

Question

前回、商品ページ共通説明文を利用し、フローティングヘッダー内にハンバーガーメニューを設置しましたが、トップページのハンバーガーメニューがしっかり反応しないので、トップページも同様の物にしたいと思っています。

ただ、この部分は残したままにしたいです。
		
			
				メンズ
				レディース
				生活用品・雑貨
				ギフト・誕生日

Answer

ECマスターズの田中です。

トップページのハンバーガーメニューを確認したところ、
メニューを出した後、内容のスクロールが
うまくいかないということですね。

まずは、ハンバーガーメニューの仕組みは変えずに、
メニューの中身だけを
商品ページ共通説明文と同じ内容に、
変更をお試しいただきますようお願いします。
その上で、問題などございましたら、
私にて動作を確認させていただきます。

トップページをそのまま変更されますと
お客様からの見た目にも影響し、もとに戻せなくなるおそれもございますので、
コピーしたページにて作業を行っていただき、
私にて確認が必要な際は、そのページのURLをお知らせいただきますようお願いします。

Answer

新たにコピーページにて作成しました。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp2.html
ドロワーメニュー内を削除し、スマホ商品ページ共通説明文の記述を持ってきました。
また、新たにも追記しました。

元のページはこちらになります。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp2.html
元々PCで表示した際、メニューアイコンをクリックしても何も表示されません。（スマホでは表示されます）

https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp2.html
こちらの方はスマホ表示でもメニューアイコンの反応がありません。

Answer

失礼しました。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp.html
こちらが元の状態になります。

Answer

ECマスターズの塚本です。

いただいたご質問ですが担当より週明けにご連絡させていただきます。
お待たせいたしますが今しばらくお待ちいただければと思います。

お急ぎの場合は再度ご連絡くださいませ。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

お試しいただき、ありがとうございます。
私にて２つのページ、および元の構造を分析いたしました。

まずは一度、index_sp2.htmlの内容を一旦破棄の上、
index_sp.htmlの内容に戻していただきますよう
お願いします。

その際、お客様に見えるindex_sp.htmlの内容を
変更しないよう、ご注意ください。
あくまでも、index_sp2.htmlにて作業をお願いします。

ドロワーメニューの内容の中で、
 から  の間に
内容を書ける仕組みになっておりますので、
これを１つだけ残していただき、
その中身を、iframe、およびそれをスクロールさせるdivタグに
差し替えていただきますようお願いします。

つまり、〜の内容が下記のようになります。

= この下の行から ====================

  
    
      
      
    
  

= この上の行まで ====================

ご記載いただけましたら、それに加えて、
メニュー内容をスクロールするための
タグをご記載ください。
タグの内容を、既存のスタイルシートにまとめていただいても結構です。

= この下の行から ====================

iframe#side_menu{
width:100%;
height: 100vh;
}

.side_menu_scroll{
overflow:scroll;
}

= この上の行まで ====================

以上、完了しましたら、
保存・アップロードしていただき、
表示をご確認いただきますようお願いいたします。

Answer

あありがとうございます。
表示できましたが、スクロールが効かない状況です。

Answer

ECマスターズの田中です。

index_sp2.htmlを確認したところ、
タグの内容が適用されておりませんでした。
もし、記載されていない場合は、ご記載いただきますようお願いします。
記載されている場合は、どちらにご記載いただいたお知らせ願います。

Answer

https://www.rakuten.ne.jp/gold/yamaguchi-seni/sp/css/style.css
137行目から記載しております。

Answer

ECマスターズの田中です。

https://www.rakuten.ne.jp/gold/yamaguchi-seni/sp/css/style.css
上記URLを直接ブラウザで開いていただくと、
iframe#side_menuの記述がないことが
おわかりいただけると思います。

GOLD内のキャッシュの仕組みで、
新しいstyle.cssの反映が遅れていることが原因です。

https://www.rakuten.ne.jp/gold/yamaguchi-seni/sp/css/style.css?1
上記のように、URL末尾に
任意のパラメータを追加していただくことで、
実際には、iframe#side_menuの記述がされていることが
おわかりいただけます。

つきましては、
実際の反映をお待ちいただくか、
HTML内でstyle.cssのURLを修正していただく、
style.cssに、内容に影響しない文字（半角スペース１つなど）を追加して再度アップロードしていただく、
などの方法をお試しいただきますようお願いいたします。

Answer

無事確認できました。
メニューボタンの位置をカートボタンと入れ替えて、表示させたいのですが、
どのようにすればいいでしょうか。
また、入れ替えた後、カートボタンの右となりに虫眼鏡アイコンを表示し検索できるようにしたいです。
アイコン画像はスマホ用共通説明文でも利用している物を引用したいとお思います。

Answer

ECマスターズの田中です。

お客様の見た目に影響がでないよう、
以下、改めてindex_sp2.htmlにて
修正・表示確認をお願いします。

> メニューボタンの位置をカートボタンと入れ替えて、表示させたいのですが、
> どのようにすればいいでしょうか。

ドロワーメニューの位置が右から左に代わりますので、
タグのclass名に含まれる「right」を「left」にご変更ください。

次に、各ボタンを定義している
タグとタグの位置の
入替えをお願いします。

最後に、タグに対して、

display: block;
float: right;
width: 30px;

以上３つのスタイルシートを適用していただきますよう
お願いします。
タグにわかりやすいclass名を割り振り、
それに対してスタイルシートを適用していただくことを
オススメします。

> 入れ替えた後、カートボタンの右となりに虫眼鏡アイコンを表示し検索できるようにしたいです。
> アイコン画像はスマホ用共通説明文でも利用している物を引用したいとお思います。

先程作成していただいたタグを
直下に複製して、
画像のURLとリンク先のURLを、
スマホ用共通説明文の虫眼鏡アイコンのものと同じにしていただければ結構です。

アダルトさんにて実際に変更を行っていただき、
不明な点がございましたらご返信ください。

Answer

>>次に、各ボタンを定義している
タグとタグの位置の
入替えをお願いします。

これは、下のように単純に位置を入れ替えていいのでしょうか。

Answer

ECマスターズの田中です。

> これは、下のように単純に位置を入れ替えていいのでしょうか。

はい、入替えていただいて結構です。
入替えた後、スタイルシートで位置を整えていただく形になります。

Answer

https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp2.html
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sp/css/style2.css
で仮アップロードしました。

>>先程作成していただいたタグを
直下に複製して、
画像のURLとリンク先のURLを、
スマホ用共通説明文の虫眼鏡アイコンのものと同じにしていただければ結構です。

検索アイコンが右にならずにカートアイコンの左側に来てしまいます。
また、各アイコンの表示位置を余白に対して中央に揃えたいのですが、上手くいきません。

Answer

ECマスターズの田中です。

> 検索アイコンが右にならずにカートアイコンの左側に来てしまいます。

失礼しました、
との位置を
入れ替えていただきますようお願いします。

> 各アイコンの表示位置を余白に対して中央に揃えたいのですが、上手くいきません。

縦方向を揃える、ということでしょうか。
その場合、floatを利用したレイアウトですと、
縦方向が考慮されていないため、工夫が必要となります。

CSS Flexboxをご利用いただくと、
ヘッダー部分のレイアウトが
シンプルな記述で済みますので、オススメです。

新しい概念になりますので、覚える量は多いですが、
その分、自由なレイアウトが可能となります。
まずは、下記の使い方をご一読ください。
https://webdesign-trends.net/entry/8148

実際にレイアウトを行ったサンプルが
https://www.nxworld.net/tips/flexbox-examples.html
にてご覧いただけますが、

1. 要素を両端に寄せる
の下にある、左・中央・右に要素をレイアウトする方法が
今回ご活用いただけるかと思います。

左のchild-boxの中にメニューボタンを配置し、
中央のchild-listをulからdivに変えてロゴを配置し、
右のchild-boxの中に虫眼鏡・カートボタンを配置していただく、
という形になります。

縦方向の中央揃えも、
display: flex;
を指定した要素に
align-items: center;
を加えていただくだけで結構です。

Answer

すみません。出張の為、返信が遅くなってしまいました。

＞実際にレイアウトを行ったサンプルが
＞https://www.nxworld.net/tips/flexbox-examples.html
＞にてご覧いただけますが、

7. 要素を上下左右中央に配置
こちらを参考にすればいいでしょうか?

Answer

ECマスターズの田中です。

1. 要素を両端に寄せる
の下にある、

また、デモ下部にあるように一部を中央に配置しつつ、特定の要素をそれぞれ左右に配置させるという動きも容易に実装できます。
例えば、下記のようなHTMLがあったとします。

という記述の下で紹介されている方法が
今回ご活用いただけるかと思います。

まずは、中央のchild-listをulからdivに変えて


  
  
  


上記の形にしていただいた上で、
左のchild-boxの中にメニューボタンを配置し、
中央のchild-listの中ににロゴを配置し、
右のchild-boxの中に虫眼鏡・カートボタンを配置していただく、
という形になります。

縦方向の中央揃えも、.parent に対するスタイルシート規則に
align-items: center;
を加えていただくだけで結構です。

Answer

https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp2.html
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sp/css/style2.css
で再度、仮アップロードしました。

カートアイコンと検索アイコンが端によりません。

Answer

ECマスターズの田中です。

index_sp2.html の状況を確認させていただきましたところ、
従来の中央揃え方法の名残りが残っておりました。
（.child-listに対して％による固定幅を指定）
これを、Flexboxに合わせた指定方法にご変更願います。

.child-list に対する width の指定を削除し、
そのかわりに
flex-grow: 1;
を指定していただき、
.child-box に対する width と margin-right の指定を削除し、
そのかわりに
flex-basis: 75px;
を指定していただきますようお願いします。

そうすることで、ヘッダー部分に、
左右のボタン（メニュー・買い物かご・検索ボタン）を
配置するためのスペースを、左右端に同じ幅で割り振り、
残りの幅をロゴ用に割り当てて、
画面中央にロゴを配置することができます。

続いて、左右のボタンに対して、横幅をご指定ください。
#menuBtn, .cart, .megane に対して
width: 36px; をご指定いただければ結構です。

次に、右側のボタンを横一列に配置します。
.child-box のうち、右側のみに対して、
（.child-box:last-child と指定する、別途classを割り振る、など）
display: flex; justify-content: space-around;
をご指定ください。

右側のchild-boxの横幅の中で、
左右均等に割り当てられます。

最後に、ロゴ画像に対して、
width もしくは height をご指定ください。
max-height: 36px;
としていただければ、他のボタンに高さを合わせつつ、
横幅を自動調整して表示させることができます。

以上、すべてご指定いただくことで、
整った見た目で表示されるはずです。
実際に適用しても整わない（ボタンの位置がズレるなど）、
適用させる方法がわからない、など、
不明な点がございましたらお知らせください。

Answer

ありがとうございました。無事全てキレイに表示させることが出来ました。

楽天 スマホ用トップページに使用しているフローティングヘッダーを変更したい

楽天スマホ用トップページに使用しているフローティングヘッダーを変更したい