ebay輸出のブログ / File exchangeの使い方 / Affinger4カスタマイズ / Amazonプライムビデオ

海外行ったことないけどebay輸出

ebay モバイルフレンドリーチェッカーでテンプレートをチェックしてみた

投稿日:2016年11月19日
このページは に更新されました。

check-cat

check-cat

ebayのItem descriptionの所に Mobile-friendly checker なるものが登場してますね。※アカウントによって存在の有無が異なるようです。ストア契約の違いかな、分からん。

Mobile-friendly checkerの出現条件は分かりませんが、せっかくなので当サイトのテンプレートがモバイルフレンドリー対応してるのか確認してみました。

当サイトのebayテンプレートはモバイルフレンドリー対応しているか

【チェッカーはここにあるよ!】
mobileffriendly-checker

ebay テンプレート一覧で公開してるHTMLをebayでチェックしてみました。

結論から言うと、すべての公開テンプレートで画像サイズ指定のエラーが出ます。

images-fix-error

[ fix it for me ] ボタンが出てきますが、押したところでコード内容に修正がかかるわけではなく、存在の意味は分からず。

申し訳ありません。再び試したらソースに修正がかかるようになりました。

Fix it for me を押して、隣の仮想スマホ画面が変化したら、そのままSAVEボタン押したらオッケーです。

fix-formo-2

たぶん気のせいじゃないと思うのですが、最初はソース修正かからなかったので内部で修正されたのかな?分からん。みんな使いやすくなりました。

エラーの意味

モバイルで横スクロールの必要がないように修正せよ!っていう事です。

現在のコードは

です。

画像に対して、横幅を100%表示として指定してる意味

修正しろと出てくるのは、

です。 widthの頭に"max-"が付いてます。

現在のwidth:100% だとブラウザによって挙動がおかしくなるかもですが、特に問題はない考えです。ただ、エラーは出ない方がいいですね。

プラットホーム利用なので、エラーが出る場合はebay SEO効果についてに影響が出る可能性を考慮します。Let's fix it! って言われてるので、fixしていく。

letsfix

HTML/CSS ソースを修正する方法

もし現時点でテンプレートを使用して頂いている方は、大変お手数ですが、ソースの中から以下の記述を検索して一部修正をお願い致します。

@media only screen and (~~

と書いてある行より"下"から、次の記述を探す。

上記の内容に対して、"max-"を付け足します。

@media only screen and ~~ と書いてある所から下が、モバイル表示に対しての制御なので、すべての"width:100%"にmax-を付けるのではなく、@media onlyの下に書かれてる width:100%にだけ、max-を付け足すようお願いします。

念のためそれぞれのテンプレートごとに修正箇所を書きますね。

ベーステンプレート Ver.2

「@media only screen and (max-width:400px) { 」より下に書いてあるwidth:100%に対して、max-を付け足します。

 

ベーステンプレート 第3弾 (3カラムタイプ)

「@media only screen and (max-width: 980px) { 」より下に書いてあるwidth:100%に対して、max-を付け足します。

 

ベーステンプレート 第4弾 (アコーディオンタイプ)

第4弾のアコーディオンテンプレートについては、@media onlyの下にwidth: 100%指定してる所がないので、56行目に対してmax-を付け足します。

と書いている所のwidth:100%;を max-width:100%;へ

今気づいたけど、box-shadowのカラーコードもrgb指定に変更した方がいいですね。ブラウザによっては影が表示されないかも。

これから使用する方は

サイト内のテンプレートはすべて修正してます(クリスマステンプレートは未修正)

モバイルフレンドリーチェッカーでエラーが出る事はないでしょう。

fixed-images

これにて一件落着なりー

コピペで使えるebayテンプレート集はこちらから


すべて無料で使えるテンプレートです。

ebayモバイルフレンドリーチェックにも対応済み!笑

  • この記事を書いた人
  • 最新記事

yotta(よった)

海外ECサイト ebay(イーベイ)で販売者やってます(in2018) 自分がつまづいて困った「ebayの設定方法」解説を中心に、海外への発送手段を比較したりしつつな趣味のブログです。

follow us in feedly

関連の最新情報などは Twitterで発信することが多いです。拡散やフォロー よかったらぜひー! ✨⚽🐕🍻

-ebay テンプレート, ebay輸出

Copyright© 海外行ったことないけどebay輸出 , 2018 All Rights Reserved.