制作のご相談はこちら
楽天はEUC-JPで構成されているので検索フォームの文字化けに注意

公開日 : 2018年02月05日

楽天はEUC-JPで構成されているので検索フォームの文字化けに注意

楽天ショップではトップページを楽天GOLDというオリジナルのテンプレートを当て込むことが可能です。
※楽天GOLDは別途申請が必要です。

デフォルトの楽天RMSを使用すると独自の仕様やHTMLタグの制約が色々とあり、デザイン性の低いショップになってしまいます。
あなたが見かけるおしゃれな楽天ショップは、ほぼほぼ楽天GOLDを使っていると思います。

昨年見つけた参考にしたい楽天ショップはこちら↓
2017年10月:楽天市場でWEBデザインの参考にしたいECサイト

GOLD用のHTML作成時に注意点が…

GOLDでHTMLを作成している時に注意点があります。
楽天ショップは文字コードがEUC-JPで構成されているのです。

何の気なくutf-8で作成して、検索フォームで検索をしてみても、検索結果のテキストが文字化けしてしまいます。

文字化け

修正方法

修正方法ですが2通りあります。

1つめは全てEUC-JPで作り変える。
2つめは検索フォームのタグにだけ文字コードEUC-JPを指定する。

検索フォームのタグテンプレート

2つめの方法、検索フォームのタグに文字コードを指定します。
この場合は全体の文字コードはutf-8でも大丈夫です。

こちらのタグを参考にしてください。

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" accept-charset="EUC-JP">
    <input value="6" type="hidden" name="sv">
    <input value="●店舗ID●" type="hidden" name="sid">
    <input value="●店舗URL●" type="hidden" name="su">
    <input value="●店舗名●" type="hidden" name="sn">
    <input value="A" type="hidden" name="f">
    <table>
    <tbody>
        <tr>
            <td><input type="text" name="sitem" placeholder="ショップ内検索"></td>
            <td><input onclick="document.charset='EUC-JP'; document.rakutenSubmit.submit();" type="image" src="●検索ボタン画像URL●"></td>
        </tr>
    </tbody>
    </table>
</form>