ebay輸出のブログ / File exchangeの使い方 / 海外ブログ / 海外ネットショップ作り

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

   

check-cat

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

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

スポンサーリンク

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

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

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

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

images-fix-error

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

エラーの意味

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

現在のコードは

です。

画像に対して、横幅を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モバイルフレンドリーチェックにも対応済み!笑

The following two tabs change content below.
海外行ったことないし英語もできないけど海外オークション ebay をエンジョイしてます。ebay 楽しいので、みんな始めたら良いと思ってる。続いてる理由のすべてがこのブログの中にあるよ。

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