ショップサーブの旧テンプレートが、
![](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-3.jpg)
すぎて、新しいレスポンシブ・テンプレートが絶品に思えてきます。
まあ、普通なんですけど落差がでかすぎて、「なんて良いテンプレートなんだろう。」って思ってしまいますね。
さて、今回はスマホサイトをカスタマイズしたので、その情報をシェアしたいと思います。
最適なショップロゴの大きさ
ショップロゴといえば、こんな感じで横長長方形にするのが定番になっています。
![ロゴ](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-3.png)
でも、これスマホで見ると「なんか表示がある。」程度にしか感じないくらい小さい。
見えない。
もっとデカくできないか?
ということで、高さをつけた画像を放り込んでみました。
![](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-4.png)
高さけっこう行けるじゃん。
で、まだ上下に余白があるので、もっと高さをつけてみよう。
![ヘッダーロゴ](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-5.png)
欲張ったけど、やはり上下にスペースがあるので、不格好なレイアウトになってしまいました。
よって、ショップロゴの最適解は「330px × 120px」
カスタマイズ1:検索窓を非表示にするCSS
数万点を扱うようなお店だと、ユーザーは目的の商品をショップ内で検索することも多いでしょう。
でも、当店の商品は数千点。
解析からも検索はほとんど使われていないので、スマホの上部にある検索窓は邪魔。
無駄でしかないので消すことにしました。
![](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-6.png)
まずは、レスポンシブ・テンプレートを「上級者用」に変更。
その後CSSを一行加えるだけ。
検索エリアのタグは「searchboxwrap」。
これを非表示にします。
![](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-7.png)
display:none;
を追加して更新。
簡単ですね。
ちなみに、同じく非表示ににする「visibility:hidden」というCSS」もありますが、これだと検索窓は消えるけど、その場所のスペースはそのまま(塗りつぶしただけ)になってしまいます。
ちなみに「ヘッダとSEOの設定」の箇所で、「商品検索ボックス」チェックを外せば簡単に消せることを後で知りました。(笑)
![検索窓を消す](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-10-1024x442.png)
カスタマイズ2:グローバルナビの内容を変更
グローバルナビとは「全ページに共通するリンク」のこと。
ショップサーブではこれ↓
![グローバルナビ非表示](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-8.png)
「ご利用案内」や「サイトマップ」など誰が見るんでしょうか。
お客様の声がここにある必要もない。
お問い合わせは、ハンバーガーメニュー内に収めれば良い。
グローバルナビはもはや無用の長物化かしてるといっても過言ではない。
かと言って非表示にすると、パソコンページを見たときに、しまりのないデザインになってしまいます。
![グローバルナビがあるときとないとき。](https://www.netshop7.com/blog2/wp-content/uploads/2021/11/image-10-1024x404.jpg)
なので、中身を変えてしまおう。