Yahoo!ショッピングのストアページ作成｜HTML原因エラーと解決方法
Yahoo!ショッピングのストアページを作成する際にエラーが発生して困ってしまうことがあるのではないでしょうか。
今回はYahoo!ショッピングのストアページ作成時のエラーのうちHTMLの記述が原因となっているもののエラー内容とその解決方法をご紹介します。
タグ文字列変換の警告
「使用禁止されているHTMLタグを文字列(<>) に、&を文字列(&)に変換しました。」という警告メッセージが出る。
【原因】
- 入力できないHTMLタグが含まれていて、システムがテキストに変換している
ストアクリエイターPro、ストアエディタには、HTMLを入力できない場所や使用できないHTMLタグがあります。
そのような場合に自動でテキストに変換されるので上記のエラーが表示されます。
主な原因は以下の3つです。
- HTMLが利用できない項目にHTMLタグが入力されている
- HTMLが利用できる項目だが、利用できないHTMLタグが入力されている
- 「スマートフォン用情報」の欄にパソコンでしか利用できないHTMLタグが使われている
【解決方法】
- HTMLを記述できない場所からHTMLを取り除く
- ストアクリエイターPro、ストアエディタで利用できないHTMLタグを取り除く
- PC版、スマートフォン版それぞれの専用タグを別の場所で使用していないか確認する
Yahoo!ショッピング内で使用できるタグの一覧は、こちらです。
また、PC版専用、スマホ版専用、共通版それぞれについて主に使用するものをまとめている記事があるのでそちらもぜひ参考にしてください。
コメントアウトの文字化け
HTMLとして記述したコメントアウトが文字化けしてしまう。
【原因】
- コメントアウトが途中で改行されている
ストアクリエイターProでは、使用可能なタグ以外のHTMLタグを自動でテキスト文字として表示されるシステムになっています。
【解決方法】
- コメントアウトの途中で改行を入れない
本番のみ画像が表示されない
ストアエディタのプレビューでは画像が表示されているのに、本番環境では画像が表示されていない。
【原因】
- imgタグを利用できる項目で画像を表示させているものの、imgタグの表記に誤りがある
表記ミスのパターンは以下の4つが考えられます。
- imgとsrcの間で改行していて半角スペースが入っていない。
- imgとsrcの間のスペースが全角になっている。
- imgとsrcの間にスペースが入っていない。
- 表示されない画像のimgタグが記述されている前後で「”（半角のダブルクォーテーション）」が抜けている。
【解決方法】
imgタグの正しい書き方
<img src=“画像のURL”>
- imgとsrcの間に半角スペースが入っているか確認する
- imgとsrcの間の全角スペースを取り除く
- imgタグ周辺の「”」を確認する
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
ダブルクォーテーションによる記述ミスを防ぐには、コードの編集ソフトを利用するという方法もあります。
編集ソフトではダブルクォーテーション間の文字は別の色で表示されるのでダブルクォーテーション内の文字なのか否かを一目で確認できます。
プレビューのリンクが動作しない
HTMLが使用可能なフィールドで存在するはずのページをリンク先として指定したが、プレビューでリンク先を確認すると「指定したドキュメントは存在しない」というエラーが表示される。
【原因】
- 相対パスでリンクを記述するとプレビュー画面ではリンク先を確認できない
（例：<a href=“ページID.html”>）
【解決方法】
プレビュー画面でも確認するには以下のどちらかで記述してください。
- 相対パスで記述する場合
<a href=“/ストアアカウント名/ページID.html”> - 絶対パスで記述する場合
<a href=“https://〜”>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
1のようにストアアカウント名を追加すると相対パスでもプレビュー画面で確認できます。
また、「https://」で始まる絶対パスで記述するとプレビュー画面でもリンクを確認できます。
絶対パスは「ページ編集」のプレビューページの画面上部（オレンジ色の帯の下）で確認できます。
まとめ
今回は、Yahoo!ショッピングのストア作成時に発生するエラーの内容とその解決方法をご紹介しました。
ストア作成時にエラーが発生してしまったら、こちらの記事を参考にしてください。
やっぱりHTMLって難しい・・・
HTMLを勉強している時間はなかなかない・・・
というストア様はぜひ一度B-Spaceをお試しください！
B-SpaceではHTML作成に便利なサービスを数多く提供しています。
B-Spaceをご活用いただければ、より簡単に繁盛店のにぎわいを簡単に作れます！
初めてB-Spaceをご利用されるストア様は最初の1カ月の料金が無料になる特典実施中です！
お申込みはこちら！
引き続き、ストアオーナー様の疑問にお答えできるような情報を提供していきますので、B-Spaceのサービスもよろしくお願いいたします。
