楽天スマホサイト下部の固定メニュー設置方法について

Question

いつもお世話になっております。

06月15日（15:05）に「楽天スマホサイトの下部に追従型固定メニュー設置する方法について」というタイトルで質問させて頂いた小高と申します。その節は丁寧に教えてくださり誠にありがとうございました。

教えていただいた、外部cssファイルとメニューバナー表示用のhtmlファイルを作り、
下記htmlソースをスマートフォン用共通説明文に記載しました。



しかし「スマートフォン用共通説明文設定　確認」ページにて、作成したメニューバナーのプレビューが、「登録する」ボタンに重なってしまいボタンが押せず設定ができませんでした。

どうのようにすれば登録ができるでしょうか？メニューバナー表示用htmlソースも記載しましたので、
問題点を教えて頂けると幸いです。

どうぞ宜しくお願いいたします。
小高


≪メニューバナー表示用のhtml≫
-------------------------------------





無題ドキュメント



	
ul
{
list-style: none;
display: flex;
text-align: center;
padding:0; 
margin:0;
border: 1px solid #fff;
}
li{
width: 40%;
height: 30px;
line-height: 30px;
margin-right: 2px;
border: 1px solid rgba(0,0,0,0.3);
background:linear-gradient(#DF0101, #FF4000);
opacity:1;
box-shadow: 2px 2px 4px gray;
}
li a{
text-decoration: none;
color:rgba(0,0,0,0.9);
font-family:sans-serif;
font-weight: bold;
｝

	


NEW ITEMS
TOPS
ONE PIECE 


恋人岬
Desigual
SALE

Accepted Answer

ECマスターズの田辺です。

プレビュー画面にて「登録する」ボタンに重なってしま場合は、
キーボード操作で「登録する」ボタンを押してください。

プレビュー画面の好きな場所をクリックしていただいた後、
日本語変換がオフになった状態で
キーボードのTabキーを押していただくと、
画面がどんどん下に移動して、クリックできる場所が枠で囲われながら
どんどん移動していくと思います。

Tabキーを長押しすることで早く移動でき、
移動しすぎてしまった場合はShift＋Tabキーで１つ前に戻ることができます。

この枠を目的の場所に当てることを「フォーカスを当てる」と言うのですが、
「登録する」ボタンにフォーカスが当たったところで
キーボードのEnterキーを押していただくと、
マウスで左クリックした時と同じ扱いになりますので、
この方法で「登録する」ボタンを押していただきますようお願いします。

また、記述に２点気になることがございました。
１つはCSSファイルを読み込むためのにあるURLが
httpになっておりましたのでhttpsに修正をお願いいたします。

誤）http://www.rakuten.ne.jp/gold/fashion-village/css/ecm_katego_menu_bar.css
正）https://www.rakuten.ne.jp/gold/fashion-village/css/ecm_katego_menu_bar.css

もう１点はCSSファイルの中に
z-index（ボックスの重なり順序）の指定がありませんので、
常にメニューが全面に表示されるように
z-index: 3;
を加えてみてください。

Answer

ECマスターズの田辺様

いつもお世話になっております。
フォーカスを当てて登録する方法、勉強になりました！
登録できるようになりました。

また、httpsとz-index:3；の修正箇所のご指摘もありがとうございました。
毎回ご丁寧に回答してくださり、ありがとうございます。

今後も宜しくお願いいたします。
小高