検索窓・検索ボックスの入れ方と変え方（カラーミーショップ）
2019
12
こんにちは。
今回は検索窓をお店に追加したので、
備忘録を兼ねて記事にしました。
2か所改変しているので、
カラーミーショップでネットショップをやっている方は参考になるかもしれません。
このデフォルト状態から
シンプルな検索窓に変えます。
変えるところ１
「全ての商品から」をクリックするとカテゴリが出てきます。
このカテゴリ欄はジャマなので消します。
そんなに商品数無いですからね。
スペース的にもジャマです。
変えるところ2
検索窓の横の「検索」の文字を
虫メガネの絵に変えます。
これはページデザインの問題ですね。
フリー素材もたくさんありますし、
こんな小さい所だけでもオリジナリティが出るのでオススメです。
htmlは無料テンプレートからコピペすればOKです。
ctrl+fで「検索」と入力して探せばすぐにでてきます。
以下は無料テンプレートから検索窓部分をコピペしたものです。
カテゴリ欄の消し方は
htmlの赤文字部分を消すだけです。簡単。
カテゴリの値を参照する部分があるので、
ここを変更するとカテゴリ以外のものも出せそうです。
何が出せるかはよくわかりませんが・・・。
「検索」は文字を表示する設定になっているので、
画像を表示する設定に変えなければいけません。
これはinput type="submit"を"image"に変えていけばOK
htmlのinputについて調べてもらえれば分かるハズです。
具体的には、青文字のように書き換えます。
「src=""」の中身は入れたい画像のurlを入れてください。
画像の登録は「画像ファイルの管理」からできます。
以上、いかがだったでしょうか。
プログラミングなんて言うと難しそうですが、
これくらいなら何とかできそうですよね。
無料テンプレートでも自分でカスタマイズできれば
かなり良くなるので、皆さんも是非htmlとcssの勉強してみてください。
それでは。
今回は検索窓をお店に追加したので、
備忘録を兼ねて記事にしました。
2か所改変しているので、
カラーミーショップでネットショップをやっている方は参考になるかもしれません。
検索窓の変えるところ
このデフォルト状態から
シンプルな検索窓に変えます。
変えるところ１
「全ての商品から」をクリックするとカテゴリが出てきます。
このカテゴリ欄はジャマなので消します。
そんなに商品数無いですからね。
スペース的にもジャマです。
変えるところ2
検索窓の横の「検索」の文字を
虫メガネの絵に変えます。
これはページデザインの問題ですね。
フリー素材もたくさんありますし、
こんな小さい所だけでもオリジナリティが出るのでオススメです。
htmlは無料テンプレートからコピペすればOKです。
ctrl+fで「検索」と入力して探せばすぐにでてきます。
カテゴリ欄の消し方
以下は無料テンプレートから検索窓部分をコピペしたものです。
カテゴリ欄の消し方は
htmlの赤文字部分を消すだけです。簡単。
カテゴリの値を参照する部分があるので、
ここを変更するとカテゴリ以外のものも出せそうです。
何が出せるかはよくわかりませんが・・・。
文字から検索アイコン（画像）への変え方
「検索」は文字を表示する設定になっているので、
画像を表示する設定に変えなければいけません。
これはinput type="submit"を"image"に変えていけばOK
htmlのinputについて調べてもらえれば分かるハズです。
具体的には、青文字のように書き換えます。
「src=""」の中身は入れたい画像のurlを入れてください。
画像の登録は「画像ファイルの管理」からできます。
以上、いかがだったでしょうか。
プログラミングなんて言うと難しそうですが、
これくらいなら何とかできそうですよね。
無料テンプレートでも自分でカスタマイズできれば
かなり良くなるので、皆さんも是非htmlとcssの勉強してみてください。
それでは。