質問: スマホ フローティング部分の質問 お世話になっております。スマホの売上が芳しくなく、フローティングヘッダーの設置を検討しています。ヘッダー表示項目も、これから検討中です。過去フォーラムを拝見させていただき、ある程度まではできたのですが、下記うまくいかず、質問させていただきました。・フローティングヘッダー2段目、tableで記載している文字が中央寄せにならない。・検索窓が、フローティングヘッダーの上を過ぎていく。・メニューを表示させる方法が分からない。 http://item.rakuten.co.jp/●●●/●●●/ の、三本横線をタップしたときのイメージです。・pcサイトにジャンプするための書き方、の、"・・・"が分からない。 http://item.rakuten.co.jp/●●●/●●●/ の、"pc"アイコンをタップしたときのイメージです。カテゴリページのスマホ部分に貼り付けたコードは↓です。=============================カテゴリ一覧商品一覧決済・配送買い物かご =============================上記、不足、不備などありましたら申し訳ございませんがご連絡ください。どうぞ、よろしくお願いいたします。
回答: ecマスターズの田中です。>1)>どのようにすればリンクが生きるようになりますでしょうか。確認したところ、前々回の返答と同様に、 および の透明な領域がリンクの上に覆いかぶさり、タップできなくなっておりますので、それぞれを必要最低限のサイズにおさめてください。「common_item.css」内の「.spfixedbanner_left」および「.spfixedbanner_right」に対する規則にて、widthおよびheightの値を、たとえばwidth: 70px;height: 32px;のようにご変更ください。>2)>以前ご回答いただいた>.spfixedbanner td {>text-align: center;>}>の部分を削除しても商品ページは中央寄せになってしまいました。この部分は、カテゴリページではcssにより上書きされていた、各タグの「align="center"」が有効になったことが原因です。どちらも残しておいても、動作に影響はありませんが、今後修正の際に混乱を避けるため、cssの記述を残し、htmlタグから「align="center"」を削除していただくことをオススメいたします。>店舗名横の虫眼鏡アイコンや、楽天マークアイコンも中央寄せになっていました。こちらは、商品ページ用のcssにて、「#shopcommontext img」(つまり、共通説明文内の画像全て)に「block !important」と、前後で必ず改行する指定が入っていることが原因なので、それを上書きする規則を作成してください。「common_item.css」内に、下記の規則を追加してください。body #shopcommontext img{ display: initial !important; }