こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回はヘッダー(ページ上部)に検索窓を設置してカスタマイズする方法をご紹介します!

こんなお悩みありませんか?

・ヘッダーに検索窓を設置したい
・検索窓のサイズを調節したり枠線をつけたい
・検索ボタンを画像にしたい

【基本】ヘッダー(ページ上部)に検索窓を設置

「検索窓」の基本的な設置から確認してみましょう。

【独自デザイン(PC)】>【トップページ編集】>【上段メニュー管理】

エディターエリアに下記のタグを追記して表示します。

↓↓このように初期表示されます。
検索窓初期値

※左メニューに設置できる検索タグとは異なるのでご注意ください。

では、早速カスタマイズする方法をみていきましょう!

[難易度 ★☆☆ ]
ヘッダー(ページ上部)の検索窓をカスタマイズする方法!

設定方法

(1)divでタグを囲む!

【独自デザイン(PC)】>【トップページ編集】>【上段メニュー管理】

名前をつけたdivでタグを囲み、検索窓を設置したい位置に追記してください。

(2)CSSを追加!

検索窓と検索ボタンをCSSで調整します!

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

▼検索窓の調整

横幅140px×高さ20pxにサイズを指定してグレーの枠線と薄いグレーの背景色をCSSでつけてみます。

▼検索ボタンを画像にする

検索ボタン ←このようなボタン画像を設置してみます。ダウンロードしてご自由に利用も可能です。

・"画像のURLパス" ←検索ボタン画像のパスを記述します!
・参考記事:「画像やCSSファイルをアップロードしたい

完了!

初期表示の検索窓が・・・
ヘッダー検索窓

CSSが適用されると・・・

↓↓できあがり!
ヘッダー検索窓

ショップをみるで確認してみましょう!

いかがでしたでしょうか。
カスタマイズ例を参考にお好みのデザインで検索窓を設置してみてください。

それではまた!