スマホ用検索窓デザインについて

Question

お世話になります

先日基本的なスマホ用のインラインフレーム検索窓に付いてご案内頂きましたが
その後、その下にHOME、カテゴリ一覧、ご注文案内などの
リンクボタンを追加したいと思い、ご相談です

色やボタン数など、ある程度選択の余地のあるテンプレートのHTMLが入手出来るようなところがあればお教え頂けないでしょうか？

また、ハンバーガーメニューについても付けられるようなものがあるなら選択肢が増えるのでありがたいです

どうぞよろしくお願い致します

Answer

ECマスターズの田中です。

＞色やボタン数など、ある程度選択の余地のあるテンプレートのHTMLが入手出来るようなところがあればお教え頂けないでしょうか？

たとえばGoogleで「楽天 スマホ ヘッダー テンプレ」で検索していただくと
様々なテンプレートが公開されていることが
おわかりいただけると思いますが、

提携サービスのECステーションにて、
クラブ会員の皆様に特別価格で提供中の

セレクトプレミアム１０
https://www.intecrece.co.jp/ecm/master10.html

に含まれる、

まるごとスマホ
http://www.intecrece.co.jp/ec/smartphone/index.html

をご利用いただきますと、
スマートフォン向けのページを、
HTMLを意識せずに作成していただくことができますので、
ぜひご検討いただければと思います。

＞また、ハンバーガーメニューについても付けられるようなものがあるなら選択肢が増えるのでありがたいです

いわゆるドロワーメニューを指しておられるかと思いますが、
その場合、画面全体を利用する仕組みになるため、
インラインフレームが使えず、
仕組みが複雑になります。

詳しい方法は下記フォーラム質問にて回答しておりますので、
一度ご参照いただきますようお願いします。
https://forum.ec-masters.net/post_view.php?id=4432

Answer

お世話になります。

まずはスマホヘッダーだけを何とかしたいと思いますので、ご案内に基ずき、
Google 検索で探して作ってみました。
が、、現状のシンプルな検索ヘッダーのHTMLと差し替えても全く変わりません。

https://forum.ec-masters.net/post_view.php?id=6158
前回ご案内いただいた上記内容にHTMLだけを差し替えました。

cssは前回のままですが、それでは反応しないのでしょうか?
HTML初心者ですので、間違っている点があればわかりやすくご指摘いただきたいと思いますが、
どうぞよろしくお願いいたします。
ちなみに新しいHTMLファイルはアップロードをすれば確認をしていただけるのでしょうか?

個人の店舗情報が含まれますので、アップした際に公開されるのか、サポートの方だけが見られるのかがわからなかったので、お尋ねいたします。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田辺です。

＞新しいHTMLファイルはアップロードをすれば確認をしていただけるのでしょうか?
＞個人の店舗情報が含まれますので、アップした際に公開されるのか、サポートの方だけが見られるのかがわからなかったので、お尋ねいたします。

フォーラムの事務局からのお知らせにある「リクエストフォーム」から
店舗情報を送っていただけますとフォーラムに公開されることはございません。

もしよろしければ、リクエストフォームから
HTMLを差し替えたページのURLを送っていただけますでしょうか。

状況をご確認させていただきますので、
よろしくお願いいたします。

Answer

ECマスターズの田中です。

リクエストフォームよりご連絡いただき、
ありがとうございました。

ご連絡いただきました、

> 制作した、HOME 
> カテゴリ一覧、やその他のリンクボタン(ヘッダー内の）を
> クリックすると移動したページの下に他のページが２重になって崩れてしまいます

こちらの件は、
リンク先を開く先の指定がされていないため、
クリックした時に、の中でリンク先を開いていることが原因です。

color-rsumahoheader.html の、
との中（の直後など）に



をご記載いただくことで、解決いたします。

なお、rsumahoheader.css 内で指定している
検索窓の高さが低すぎるため、
iOS以外の機種（Android機など）では、検索窓が半分見切れてしまいます。

rsumahoheader.css 内、.spHeader への規則にある
height: 40px;
を、color-rsumahoheader.html の内容が十分に表示される高さに
ご変更いただきますようお願いします。

Answer

ECマスターズの田中です。

リクエストフォームにてご質問いただいた
テストページを作成いただく方法についてご説明いたします。

今回のヘッダーを作成するために挿入されたHTMLタグは、
共通説明文だけでなく、
各商品のスマートフォン用商品説明文に挿入していただいても
問題なく動作いたしますので、

既存の商品ページのコピーでも構いませんので、
サーチ非表示に設定した商品ページをご用意いただき、
その商品のスマートフォン用商品説明文に
タグを挿入していただくことで、
テストページとして作成していただくことができます。