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

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

使用中のebayテンプレートをモバイル対応にする3つの方法

投稿日:2016年11月20日 更新日:

Mobile

ebayにモバイルフレンドリーチェッカーが導入されたので、自身のテンプレートがモバイル対応できているかがより分かりやすくなりました。

今回は、使用してる ebay テンプレート がチェッカーでエラーになる方に向けて、その対応方法を紹介します。

スポンサーリンク

Mobile-friendly checkerでのエラーとは

3error

モバイルフレンドリーチェッカーでは、エラーの種類が3つあります。

  1.  Viewport meta tag incorrect or missing エラー
  2.  Image exceeds screen width エラー
  3.  Horizontal scrolling エラー

すべてクリアすると、このように表示されます。

fixed-images

  • Viewport meta tag correctly set
  • No horizontal scrolling

この状態になれば、ebayの言うモバイルフレンドリーに対応できていることになります。

ちなみにモバイルフレンドリーチェッカーはebay出品ページのitem descriptionの所にあるよ!(アカウントによってはないかも?)mobileffriendly-checker

ebayの言うモバイルフレンドリーとは?

自身の出品商品がモバイル専用として適切な表示で案内できている状態であれば、モバイルフレンドリーです。

ebayアプリに限らず、スマホのブラウザから見た時も含めての話で、この「適切な表示」というのが人間が見る"見た目"だけではないのが少し面倒なところ。

アクティブコンテンツとの違い

混合し易いですが、来年から施行されるアクティブコンテンツ禁止ルールとはまた別の話です。

アクティブコンテンツは、Javascriptなどの動的な技術が施されているテンプレートに対してのルール。「アクティブコンテンツを使わない」は大前提で、さらにモバイルフレンドリー対応をebayは求めています。

ebayテンプレートがアクティブコンテンツを使っているか確認する方法はこちら

エラーへの対策方法

Fix

これから紹介する対策方法は、アクティブコンテンツなしでモバイルフレンドリーエラーになる方がどうすればいいかです。

例えば、ebayがチェックサイトとして薦めているi-ways.net に ItemID 入れたら以下の画像のような表示になる方が対象

checkon2下が緑だけど、上が赤い人

下の項目も赤くなっている方は、モバイルの前にActive contentの対策から進めてください。そのままだと来年から出品されなくなりますよ。

では対策について。方法は大きく分けて2つ

  1. 当サイトのテンプレートを使う(Ver.2以降)
  2. 今使ってるテンプレートにモバイル対応するための記述を加える

パターン1:当サイトのebayテンプレートについて

宣伝ですが、当サイトのテンプレートは現在モバイルフレンドリーチェッカーでエラーは出ません(Ver.2以降)。アクティブコンテンツも使ってないので、モバイルフレンドリーなテンプレートと言えると思います。

自ストアのブランド化は必要ない、こだわりのテンプレートがない、という方におススメします。
スマホ対応の無料ebayテンプレート集はこちらから

パターン2:使用中テンプレートにモバイル対応するための記述を加える

自ストアのオリジナルテンプレートを使用中で、そのテンプレートをモバイル対応にしたい方は次の3つの方法をお試しください。

  1.  ビューポートを指定する(知識不要)
  2.  メディアクエリを指定する(知識必要)
  3.  画像のスタイルを指定する(知識必要)

1:ビューポートを指定する ( Viewport meta tag incorrect or missing エラー 対策 )

ビューポート(viewport)の指定とは、仮想デスクトップ画面の制御として、テンプレートに特定の記述を行う事。

スマホでネット見てたら、たまにパソコンで見たような画面そのままを縮小したサイトありませんか?

小っさ、見づらッ!みたいな。

それは、単にビューポートが指定されてなかったり、サイト製作者が意図してその指定をしている場合に、端末ごとに決まったレンダリングルールに沿ってサイトを表示しているからです。

ebayでは決まった値を指定するよう指示されてますので、何も考えずに以下の記述をテンプレートに加えたらOK

書き込む場所は、テンプレートの上の方です。<head>という記述があれば、<head>から</head>の間に入れます。

これでOK

ebayのモバイルフレンドリーチェッカーから修正する方法もあります。

モバイルフレンドリーチェッカーが備わってるアカウントの方であれば、チェッカーから編集することも可能です。

Mobile preview 画面 Fix it for me をクリックfix-formo

左側の仮想スマホ画面の表示が適切に変化してればSAVEを押す。ソースに上で紹介したViewportタグが挿入されてます。fix-formo-2

これを加えた事で更に Image exceeds screen width エラー や Horizontal scrolling エラーが表示された場合は次の項目を追加することで対策可能です。

 

2.メディアクエリを使う(知識必要)

メディアクエリは、バイヤーの画面サイズによって、表示のデザインを指定するというCSSの記述方法の一つです。

Viewportを加えたことで、お使いのテンプレートによってはメディアクエリで適切な制御が必要になってきます。

自身のテンプレートに

@media screen and (max-width: ○○px) {

もしくは

<link media="screen and ~~"

などの記述があれば、それです。なければ指定しなければなりません。

ただし前項で紹介したViewportのように、ただ書けばいいわけではなくて、お使いのテンプレートによって書き方が変わります。書き方については、CSSの知識が必要です。

プロに依頼しましょう。

3.画像のスタイルを指定する(知識必要)

Horizontal scrolling エラーが出ている場合は、商品説明に画像を掲載している場合がほとんどだと思われます。(他にもテーブルタグの幅が大きすぎたりするとエラーになる)

モバイル端末において画面からはみ出るような画像だと、横スクロールできないために見切れが生じます。

画像の見切れを防ぐための記述が以下のCSSです。

テンプレート内に<head>とか書いてあるところがあれば、<head>から</head>の間に上記した記述を差し込みます。

が、メディアクエリと同じでただ書けばいいわけではなくて、これもテンプレートによって対応方法が変わりますのでプロに依頼しましょう。


 

以上の3つをクリアすれば、晴れてモバイルフレンドリーな専用テンプレートが完成となります。

Fix it for meを使って修正できないテンプレートは、HTMLの記述を直接変更する必要があるテンプレートです。プロに依頼するか、別のテンプレートへ変更する方が早いかもしれません。

余談:テンプレートなど何も使わない場合

nothing

何も使わない場合、それも"モバイルフレンドリー"だと思います。

出品ページにシンプルな商品説明をテキストで書くのみ。その際は、VewportだけHTMLのところへコピペしたらOKです。もしくはモバイルフレンドリーチェッカーでfixすればOKです。

自ショップのブランドイメージ化は必要ないという方は、テンプレートを使わないのも手ではないでしょうか。

テンプレートは差別化でおススメします。当サイトの無料テンプレートは次のバナーからどうぞ

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

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

ショップオリジナルとまではいきませんが、よろしければ。

The following two tabs change content below.
海外オークションのebayでセラー(販売者)してます。ebay始めたばかりの初心者や興味ある方に向けて、細かな設定方法やポイントを書いてます。ebayで使える無料のHTMLテンプレートも公開中!

336-mix

336-mix

-ebay輸出

Copyright© 海外行ったことないけどebay輸出 , 2017 AllRights Reserved.