検索窓を分かりやすい場所に設置したい
はじめまして。
デザイン設定で分からないことがあり、質問させて頂きます。
現在、TOPページには大きな検索窓と、ショップの特徴を載せたいと思っております。そこで質問が何点かございます。
・初期デザインの検索窓はとても小さく、
この検索窓をトップページのスライドショーより上側に
Amazonトップページの検索窓くらい大きく設置したいのですがどうしたら
よろしいのでしょうか。
・商品詳細ページに新品商品だけではなく中古品の販売をを加えたいのですが、
どうしたらよろしいでしょうか。(具体的に中古品の価格、選択肢、商品説明等を加えたいです。)
・TOPページの商品画像を削除し、全てショップの特徴を記載したいのですが
どうしたらよいでしょうか?
質問が多くなってしまい申し訳ございません。
お返事お待ちしております。
以下に回答及び操作方法を案内します。
■検索窓を大きくする
2種類の方法がありますので、いずれかの方法を行ってください。
・要素をフリーパーツで作成する
※こちらの方法は、デザインを変更しても検索窓が大きいままです。
フリーエリアパーツ管理(デザイン設定>詳細レイアウト他)の新規作成ボタンから
“フリー”のパーツを作成します。
(パーツ名は任意)
HTMLモードの切り替え、以下の要素を貼り付けて保存します。
<style>
#online_contents .tag_item_search .tag_icon_search_key {
height: 23px;
padding: 19px 13px;
font-size: 16px;
}
.tag_item_search .tag_icon_search, .tag_item_search .tag_icon_search_detail, .tag_item_search .tag_icon_list, .tag_item_search .tag_icon_catalog {
height: 40px;
}
</style>
作成したパーツを「ヘッダー」内に配置します。
(商品一覧以外のページでヘッダーに「商品一覧と同じ」にチェックが入っていない場合は、
上記のクローンパーツを作成し、ヘッダー内に追加して下さい)
以上で、検索窓が大きくなりますので、ショップページにて確認して下さい。
・スタイルシート(design.css)に要素を追加する
※こちらの方法は、デザインを変更する度に追加する必要がございます。
design.css編集画面(デザイン設定>適用中のスタイルシートカスタマイズ>design.css編集ボタン)へ
以下の要素を追加して保存します。
#online_contents .tag_item_search .tag_icon_search_key {
height: 23px;
padding: 19px 13px;
font-size: 16px;
}
.tag_item_search .tag_icon_search, .tag_item_search .tag_icon_search_detail, .tag_item_search .tag_icon_list, .tag_item_search .tag_icon_catalog {
height: 40px;
}
※追加する場所は、design.css内であればどこでもかまいません。(但し、「.○○{}」内には追加しないでください)
以上で、検索窓が大きくなりますので、ショップページにて確認して下さい。
■中古品の販売を加える
ご質問内にある「新品商品」内に加えるということでよろしいでしょうか?
その場合は、商品の種類を追加する(中古品という種類を追加する)ことで対応できます。
以下の手順で設定して下さい。
商品データの登録(変更)画面にて、
「種類」項目の“種類あり”を選択すると、
販売価格の下に種類の登録欄が表示されるので、
「種類追加」から新品商品と中古商品を種類としてし各価格を登録し保存すれば完了です。
以上で新品・中古が選択しとして表示され、カートボタンも別となります。
商品説明文については同じ入力欄となるので、
新品・中古の説明がわかりやすく区別できるよう記載して下さい。
(フォントの色や太字、アンダーライン、テーブルなどをご利用ください)
■TOPページにショップの特徴を記載する
インデックスページ(TOPページ)作成機能がございます。
こちらを使っていただくことで、ご希望のページを作成することが可能かと思われます。
(通常は、商品一覧ページをTOPページとみなしているため、商品画像が並んでおります)
作成方法は以下の手順で行ってください。
フリーエリアパーツ管理(デザイン設定>詳細レイアウト他)より、
新規フリーページ作成を押し、インデックスページを作成します。
作成後、「新規作成」ボタンから様々なパーツ(絞込みリスト/カテゴリから探すなど)を作成・配置して、
お好みのレイアウト表示をすれば完成です。
Re: 検索窓を分かりやすい場所に設置したい
早急のご連絡ありがとうございます。
先ほど紹介して頂いた方法ですと、右上の検索窓は移動せずに
枠が大きくなるだけになりました。
商品の右上の検索窓を消して、フッターとスライドショーの間にけんさく窓をどでかく埋める方法を教えて頂きたいです。
説明不足で申し訳ございません。
よろしくお願い致します。
「フッターとスライドショーの間に」は「“ヘッダー”とスライドショーの間に」として回答します。
編集方法は、以下の手順で行います。
1.ヘッダーメニューの検索窓を非表示にする
2.検索窓のパーツを作成し配置する
3.検索窓の長さの調節をする
各操作方法の説明です。
1.ヘッダーメニューの検索窓を非表示にする
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
フリーエリアパーツ管理(デザイン設定>詳細レイアウト他)にある、
「ヘッダーメニュー」パーツの編集ボタンを押します。
「ヘッダーメニュー画面」が表示されますので、「検索フォーム:」のチェックをはずし保存します。
以上でショップページ右上の検索窓が非表示となります。
2.検索窓のパーツを作成し配置する
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
フリーエリアパーツ管理(デザイン設定>詳細レイアウト他)の新規作成から、
フリーのパーツを作成します。
(パーツ名は任意)
HTMLモードへ切り替え、{search_form}と入力して保存します。
作成したパーツをご希望の場所(ヘッダーとスライドショーの間)に配置します。
以上で検索窓の設置は完了です。
3.検索窓の長さの調節をする
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
「おたすけマイショップ No.1065」で案内した要素を編集することで、検索フォームの長さを調節します。
「おたすけマイショップ No.1065」で案内した要素全てを以下の様に書き換えます。
(こちらの要素では、検索窓の幅を400pxにしてます)
<!-- ここから -->
<style>
.tag_item_search {
width: 500px; <!-- 【編集点1】 -->
}
#online_contents .tag_item_search .tag_icon_search_key {
height: 23px;
padding: 19px 13px;
font-size: 16px;
}
.tag_item_search .tag_icon_search, .tag_item_search .tag_icon_search_detail, .tag_item_search .tag_icon_list, .tag_item_search .tag_icon_catalog {
height: 40px;
width: 400px; <!-- 【編集点2】 -->
}
</style>
<!-- ここまで -->
【編集点1】には検索詳細アイコンやカタログ・リストアイコンを含めた幅を入力します。
(こちらの数値は、検索窓の幅+100px程度をお勧めします)
【編集点2】検索窓の幅です。
上記調整が完了したら、<!-- 【編集点1】 -->及び<!-- 【編集点2】 -->は削除して下さい。
以上でご希望の表示になるかと思われます。
先程の投稿について、補足説明をします。
“検索窓のパーツ”と“「おたすけマイショップ No.1065」で案内した要素のパーツ”は、
別のパーツで個別に作成し各自配置して下さい。
また、“「おたすけマイショップ No.1065」で案内した要素のパーツ”は、
ヘッダー部分に配置することをお勧めします。
Re: 検索窓を分かりやすい場所に設置したい
わかりやすい説明でだいたいわかったきました。
素早いご連絡ありがとうございます。
またもや問題が生じました。。
検索窓を大きく変更したら、検索窓の中に文字が表示されなく
なりました。
できれば、検索窓の横にある謎のアイコンも削除したいです。
変更できないでしょうか?
よろしくお願い致します。
Re: 検索窓を分かりやすい場所に設置したい
追記ですが、横幅を400pxくらい大きくしたいです。
失礼致します。
「おたすけマイショップ No.1065及び1067」で案内した要素の数字を変更したことで、
検索窓の中にある文字が消えてしまっているかと思われます。
再度、案内した数字に戻していただき、設定をし直してください。
また、検索窓の横にあるアイコンは、商品一覧画面の表示切り替え用のボタンです。
(カタログの様に表示or商品説明文付きのリスト表示)
この二つのアイコンを非表示にする方法としては、
「おたすけマイショップ No.1065及び1067」で案内した要素に以下を追加するのみです。
.tag_item_search .tag_icon_list ,.tag_item_search .tag_icon_catalog {
display: none;
}
横幅を400pxにしたいとのことですので、
以下に上記アイコン非表示の要素も含めた内容を記載します。
作成したパーツ内の要素をこの内容に全て書き換えてください。
<!-- ここから -->
<style>
.tag_item_search {
width: 450px;
}
#online_contents .tag_item_search .tag_icon_search_key {
height: 23px;
padding: 19px 13px;
font-size: 16px;
width: 400px;
}
.tag_item_search .tag_icon_search, .tag_item_search .tag_icon_search_detail, .tag_item_search .tag_icon_list, .tag_item_search .tag_icon_catalog {
height: 40px;
}
.tag_item_search .tag_icon_list ,.tag_item_search .tag_icon_catalog {
display: none;
}
</style>
<!-- ここまで -->
Re: 検索窓を分かりやすい場所に設置したい
サポートは大変有り難かたいのですが
何も変わりませんでした。
改善策は他にありますか・?
「何も変わりませんでした。」とのことですが、
確認したところ変更は適用されていました。
(確認したページは、商品一覧ページです)
一度ブラウザの更新(Ctrl+F5キー)をしてご確認ください。
それでも適用されていない場合は、
再度変更イメージを具体的にお伝えください。
尚、以前質問いただいた、「ヘッダーメニューの検索窓」がまだオフになってませんでした。
オフにする方法は、以前案内した「おたすけマイショップNo.1067」を参考にして下さい。