スマホフローティング部分の質問

Question

お世話になっております。

スマホの売上が芳しくなく、
フローティングヘッダーの設置を検討しています。
ヘッダー表示項目も、これから検討中です。

過去フォーラムを拝見させていただき、
ある程度まではできたのですが、下記うまくいかず、質問させていただきました。

・フローティングヘッダー2段目、tableで記載している文字が中央寄せにならない。
・検索窓が、フローティングヘッダーの上を過ぎていく。
・メニューを表示させる方法が分からない。
　　http://item.rakuten.co.jp/●●●/●●●/　の、三本横線をタップしたときのイメージです。
・PCサイトにジャンプするための書き方、の、"・・・"が分からない。
　　http://item.rakuten.co.jp/●●●/●●●/　の、"PC"アイコンをタップしたときのイメージです。


カテゴリページのスマホ部分に貼り付けたコードは↓です。

=============================





ｶﾃｺﾞﾘ一覧
商品一覧
決済・配送
買い物かご
















 
 
 
 
 
 
 
 



=============================

上記、不足、不備などありましたら
申し訳ございませんがご連絡ください。

どうぞ、よろしくお願いいたします。

Accepted Answer

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; }

Answer

ECマスターズの田中です。


＞・フローティングヘッダー2段目、tableで記載している文字が中央寄せにならない。

楽天が読み込んでいるCSSファイルにて

table, th, td {
    text-align: left;
}

という規則が設定されているため、
タグのalign属性を上書きして上記規則が適用されております。

さらに上書きして中央寄せにする規則が必要となりますので、
「common.css」内に

.spFixedBanner td {
	text-align: center;
}

を追記してください。


＞・検索窓が、フローティングヘッダーの上を過ぎていく。

「common.css」に含まれる、検索窓の書式を定めた
「.spFixedBanner_search」に対する規則にて、

display: absolute;
position: absolute;

という属性が指定されておりますので、他の要素と同様に、

display: block;
position: fixed;

にご変更ください。


＞・メニューを表示させる方法が分からない。

表示させる方法の前に、ヘッダーの一段目についてですが、
最後に記載された「」が
横幅100%に設定されているため、他の要素の上に被さる形になり、
結果として、メニューボタン、検索ボタン、ロゴがタップできなくなっております。

「common.css」内の「.spFixedBanner_right」に対する規則にて、

width: 100%;

を

width: 90px;

のように、３つのボタンがおさまる程度の横幅にご変更ください。

次に、メニューを表示させる方法ですが、
タグのリンク先として、本来のメニューボタンをクリックさせる
JavaScriptを指定することで実現することができます。
（リンク先がJavaScriptのため、タグも禁止タグのチェックから外す必要があります）

メニューを表示させるためのボタンのタグを、

と

で囲んでください。


＞・PCサイトにジャンプするための書き方、の、"・・・"が分からない。

URLの末尾に「?force-site=pc」を加えてください。
（例）http://www.rakuten.co.jp/"店舗"/?force-site=ipn

Answer

ご回答ありがとうございます。


＞・フローティングヘッダー2段目、tableで記載している文字が中央寄せにならない。
⇒できました。
　ありがとうございます。


＞・検索窓が、フローティングヘッダーの上を過ぎていく。
⇒説明不足で申し訳ございません。
　検索枠は固定ではなく、スクロールすると消えるようにしたいと考えています。

　http://item.rakuten.co.jp/●●●/●●●/　
　のサイトは、スクロールすると検索枠も一緒にスクロールします。

　そのスクロールしたときに、検索枠が、店舗名や商品一覧といったヘッダー部分の上を通っていくため、
　ほかの商品写真と同様、ヘッダー部分の下を通るようにしたいのです。


＞・メニューを表示させる方法が分からない。
⇒
　と
　
　でimgを囲むと、
　　　　"a" の開始タグがありません。
　のメッセージが表示され、登録できませんでした。

　
　の部分を囲むやり方であっていますでしょうか？


＞・PCサイトにジャンプするための書き方、の、"・・・"が分からない。　
⇒こちらも説明不足で申し訳ございません。

　http://item.rakuten.co.jp/●●●/●●●/　
　のサイトは、"PC"アイコンをタップすると、そのページのPC版が表示されます。
　カテゴリページは複数あり、また、商品ページも複数あります。
　今表示しているスマホサイトのPC版を表示させるには、どう記述すればよいのでしょうか。



お忙しいところ申し訳ございませんが、
よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞・検索窓が、フローティングヘッダーの上を過ぎていく。
検索窓が、各ヘッダー用パーツの下を通るようにしたいということですね。
スタイルシートの「z-index」が、要素の重なりを指定する属性となっておりますので、
「common.css」内の「.spFixedBanner_search」に対する規則にて、

z-index: 998;

など、他要素よりも低い値に設定してください。
なお、「display: absolute;」は指定として誤っておりますので、
「display: block;」に修正をお願いします。


＞・メニューを表示させる方法が分からない。
失礼いたしました。
開始タグを禁止タグチェックの対象からはずした為、
通常の終了タグの数が１つ多いと判断されております。
に ="" を加えて、 とご記載ください。


＞・PCサイトにジャンプするための書き方、の、"・・・"が分からない。
現在のページのPC版を表示するということですね。
メニューと同様、JavaScriptをリンク先にする対応が必要となります。


と

をご利用ください。

Answer

お忙しいところご回答いただきありがとうございます。

＞・検索窓が、フローティングヘッダーの上を過ぎていく。
⇒できました。
　ありがとうございます。


＞・メニューを表示させる方法が分からない。
⇒エラーなく登録できました。


＞・PCサイトにジャンプするための書き方、の、"・・・"が分からない。
⇒できました。
　ありがとうございます。


追加で質問させてください。


1)
登録をした後、一部分しかタップが有効になっていませんでした。
PCサイトへのジャンプと、楽天トップページへのジャンプ、
そして検索枠の3つしか、リンクが生きていませんでした。

横線4本のメニュー、虫眼鏡の商品一覧、店舗名タイトル、
カテゴリ一覧の横並び4つ、
のリンクが生きていませんでした。

どのようにすればリンクが生きるようになりますでしょうか。


2)
スマートフォン用商品ページ "商品ページ　共通パーツ設定"に登録すると商品説明文など全てが中央ぞろえになっていました。
以前ご回答いただいた
.spFixedBanner td {
 text-align: center;
 }

の部分を削除しても商品ページは中央寄せになってしまいました。
そして、店舗名横の虫眼鏡アイコンや、楽天マークアイコンも中央寄せになっていました。

どのようにすれば、カテゴリページと同様、左寄せ、中央寄せ、右寄せがうまくいきますでしょうか。


下記、htmlに貼り付けてコードです。
すみませんが、よろしくお願いいたします。

-------------------------------------





ｶﾃｺﾞﾘ一覧
商品一覧
決済・配送
買い物かご

Answer

ご回答ありがとうございます。

カテゴリページ、商品ページともに表示、動かすことができました。

ご対応いただき大変ありがとうございました。

スマホ フローティング部分の質問

スマホフローティング部分の質問