TPP」が発売されますね。僕はもう予約しました。復讐の連鎖から生まれるストーリー。FOBが楽しみすぎて吐きそうです。課金要素があるという噂だけど、その辺が気になるなぁ。今回も検索ボックスなんですよ。楽天GOLD(無料)と契約している必要があります。それではやってみましょう。ラジオボタンを使用した実装サンプルまずは一つ目のサンプル、ラジオボタンを使用した実装サンプルをご覧ください。この機能を実装します。以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。margin-bottom:20px;}</style>HTMLソースがこちら。店舗IDや店舗URLなどはご自身の店舗に合わせて変更をしてください。true;}以上が読み込ませるjsとなっています。すると先ほど見ていただいたラジオボタンを使用した実装サンプルと同じものが実装できたかと思います。長くなりますがそれぞれのコードについて解説してゆきます。accept-charset="euc-jp">こちらで記載されている「name=”hogehoge”」はjsの各行の指定と連動しています。hogehogeは任意で変更可能ですが、合わせてjsのソースも変更する必要があります。hogehogecheck(this);”」ここにも「hogehoge」が使用されています。js内の指示をこのフォーム内で実行しますというような内容になっています。楽天の検索フォームは文字コード「euc-js」でしか実行されません。for="radio_00">指定なし</label>ラジオボタンを作る要素です。「name=”groupe01′′」この部分が6~9行目に共通して出てきています。6~9行目が一つのグループであるという指定になっています。ラベルに指定されている「for=”radio_00′′」ですが、これは前記されている「input」の「id=”radio_00′′」と連動していることに注目してください。することでラベルでインクルードされているテキストをクリックした際にもラジオボタンが反応するようになっています。続いてjs内の記述について。document.hogehoge.radio_00.checked;これは「hogehoge」のフォーム内の「radio_00」がチェックされている状態を「radio_00」と定義する記述になっています。同様に16~18行もそれぞれのラジオボタンがチェックされた状態を定義しています。この定義をすることで、後の28行目以降が意味を成してきます。}これは先ほど定義された状態にどういった動作をするかを指定しています。28行目だけを見てみると、先ほど定義した「radio_01」が「true」である場合を意味します。」という内容を送信するようになっています。各行だけを見ると非常にシンプルな作りとなっていますので、jsに自信のない方でも各店舗に合わせて自由にカスタマイズが可能かと思います。画像を使用した実装サンプルをご覧ください。先ほどのラジオボタンに画像をプラスした形になります。以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。margin-bottom:20px;}</style>HTMLソースがこちら。true;}以上が読み込ませるjsとなっています。基本的な部分に大きな変化はありません、ラベル内のテキストを画像に置き換えた形になっています。チェックボックスを使用した実装サンプルでは引き続き三つ目のサンプル、チェックボックスを使用した実装サンプルをご覧ください。こちらはチェックボックスになっていますので複数選択が可能な仕様になっています。以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。margin-bottom:20px;}</style>HTMLソースがこちら。true;}以上が読み込ませるjsとなっています。こちらも基本的な部分に大きな変更はありません。上記ラジオボタンやチェックボックスと連動したフリーワードボックスの実装サンプル最後に四つ目のサンプル、今までにご紹介したラジオボタンやチェックボックスと連動したフリーワードボックスの実装サンプルをご覧ください。jsに手を加えることで今までの選択式の検索方式にユーザー自身がフリーワードで検索できる仕様が実現できます。以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。margin-bottom:20px;}</style>HTMLソースがこちら。true;}以上が読み込ませるjsとなっています。基本的な部分に変更はありません、フリーワード用の定義をjsに追加した形になっています。こんな形が実現できる、自由に選べる検索フォームのデザインではでは最後に、今までご紹介したテクニックを応用して実現できる用例を一つご紹介します。最初にお見せしたこの形の検索ボックスを実装するサンプルコードになっています。要素が多いので各コードが非常に長くなっていますが許してたもれ。true;}最後にいかがでしたでしょうか。店舗で取り扱っている商品に詳しいユーザーなら、ユーザー自身で検索して目的の商品にたどり着くことはできるかもしれません。ないユーザーにとってはどうでしょうか?こちらから検索のヒントになるような選択式のフォームを用意することで、よりユーザーの求める商品にたどり着きやすくすることができる、かもしれません。ご自身の店舗に合わせた便利な検索フォームにチャレンジしてみてください。拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。メタルギアソリッド楽しみ!!!コピペ可能なサンプルたくさん!楽天検索ボックスのデザイン・カスタマイズ方法。こちらの記事もどうぞショップ運営でお悩みの方へ。Ltdネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。ショップ運営のお悩み、ご相談ください。ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。お気軽にご相談くださいませ。CONTACT48時間以内に返信しますまたは、お電話でも承ります。MEぜぇれさん外部デザイナーTwitter:@zeelesan兵庫在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。Posts2016.04.18ECたったの1行!ヤフーでもお買物カゴを外部化!複数のカゴボタンを設置する方法。2016.04.13EC楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。2016.02.04EC独自カートで差別化!Yahoo!ストアのカート周りをCSSでデザインする方法。2016.01.14ECデフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。Tweetコピペ可能なサンプルたくさん!楽天検索ボックスのデザイン・カスタマイズ方法。コピペでOK!楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。Linkこの記事に関連する記事ECサイトを華やかに!楽天で使えるjQueryプラグイン5選。コピペ可能なサンプルたくさん!楽天検索ボックスのデザイン・カスタマイズ方法。簡単ディテールアップ!CSSで楽天カテゴリページをデザインする方法。楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。聞けない、楽天検索ボックスの設置・カスタマイズ方法。制作コスト削減!楽天で使える無料テンプレートやイラスト・写真素材12選。新着記事を配信していますFacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。楽天RMSのカスタマイズで使えるclass名の一覧。EC注目のキッズファッション!楽天の参考デザインまとめ、子供服サイト10選。ECたったの1行!ヤフーでもお買物カゴを外部化!複数のカゴボタンを設置する方法。ECレディース最強説!楽天の参考デザインまとめ、女性ファッションの素敵サイト16選。EC楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。EC海外販売の良事例!楽天グローバルマーケット参考ページ14選。EC独自カートで差別化!Yahoo!ストアのカート周りをCSSでデザインする方法。ECデザイン目線でSOY振り返り。2015年楽天ショップトレンドまとめ。ECデフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。Link人気の記事ランキングこの漢字はひらく?サイトの表記ゆれを防ぐ、知っておきたい文章マナー。クレジット・リンク不要/商用可/アプリOK!アイコンフリー素材まとめ【2015年4月版】いま復習しておきたい、301リダイレクトの設定あれこれ。コピペでOK!楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。個性的な404デザインまとめ!日本国内・海外のエラーページ48選。意外と忘れがち!よく使うGoogleの検索コマンド・オプション一覧。制作コスト削減!楽天で使える無料テンプレートやイラスト・写真素材12選。ロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。[1/2]楽天トップページを簡単デザイン!コンテンツ部分のテンプレートを作ってみました。楽天RMSのカスタマイズで使えるclass名の一覧。WordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。注目のキッズファッション!楽天の参考デザインまとめ、子供服サイト10選。ロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。読まれてる?簡単無料で使えるヒートマップツール5個まとめ。簡単導入でコンバージョン増加!自社メディア向け無料プラグイン・サービス4個。この漢字はひらく?サイトの表記ゆれを防ぐ、知っておきたい文章マナー。記事をSNSに投稿するTweetbillionplan.comに関するツイートCONTACTネット通販とウェブ制作の会社。Ltdネット通販とウェブ制作の会社。MAPContactショップ制作の無料お見積り、そのほかウェブ制作などご相談ください。LtdPAGETOP。