• 楽天
  • Yahoo!

【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法

【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法

こんにちは!小学生の時、産卵期のカラスに頭をつつかれて、額から血を流したオガリア中村です。マタニティブルーな野生の動物には、近寄っちゃいけませんね、ホント。。

さて、前回の記事では楽天GOLDでスマートフォンページを作成する際必ず使うべき「viewport」についてお話させて頂きましたが。

今日は、楽天GOLDで作成したスマートフォンページに、「検索窓」を設置する方法についてご案内します。

検索窓設置前に必ず「文字コード」確認を!

文字コードとは?

文字や記号をコンピュータで扱うために、文字や記号一つ一つに割り当てられた固有の数字のこと。(IT用語辞典)

と言われてもよく分からないですが、HTMLの冒頭でよく見かける
 ・<meta charset="utf-8">
この箇所が、文字コードを指定する記述となります。

一般的にはutf-8が使用されていますが、楽天さんの場合はEUC-JPを使用しており、左記文字コードと異なる文字コードにてHTMLページを作成した場合、検索窓へ入力した文字が文字化けする可能性があります。

文字コードが異なる為に文字化けする楽天スマホ検索窓

HTMLのMETA情報が下記になっているか、一度ご確認ください。

<meta charset="EUC-JP">

手順

それでは早速、検索窓を設置していきましょう!

  1. 次の画面からCSSをコピーしてきましょう。
  2. コピーしたCSSを、手元のHTMLファイル内<head>~</head>タグの中へ貼り付けます。
  3. 次の画面からHTMLをコピーします。
  4. コピーしたHTMLを、検索窓を表示させたい位置に貼り付けます。

 
以上で検索窓の設置完了です!

ネットショップに検索窓は必須ですが、いざ自分で設置するとなると結構ややこしいですよね。ご参考になれば幸いです!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

1 件のコメント

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。