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

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

      2016/11/22

Mobile

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

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

スポンサーリンク

Mobile-friendly checkerでのエラーとは

3error

ebayのモバイルフレンドリーチェッカーでは、エラーの種類が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の言うモバイルフレンドリーとは?

モバイルフレンドリーとは、スマホを使ってるバイヤーに対して、あなたの出品商品が適切な表示で案内できてるか?ということです。

適切な表示ならば、モバイルフレンドリーでOK♪となります。ebayアプリに限らず、スマホのブラウザから見た時も含めての話。

この「適切な表示」というのが人間が見る”見た目”だけではないのが、少し面倒なのです。

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

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

アクティブコンテンツは、Javascriptなどの動的な技術が施されているテンプレートに対してのルールです。「アクティブコンテンツを使わない」は大前提で、さらにモバイルフレンドリー対応を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)の指定とは、仮想デスクトップ画面の制御として、テンプレートに特定の記述を行う事。上手く言えない。

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

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

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

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

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

これを加える事で、CSSのメディアクエリが活きてくる。

 

2.メディアクエリを使う

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

自身のテンプレートに

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

もしくは

<link media=”screen and ~~”

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

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

プロに依頼しましょう。

3.画像のスタイルを指定する

Descriptionに画像を掲載する方は、モバイル端末において画像が画面からはみ出るような表示になると、横スクロールできないために画像が見切れてしまいます。

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

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

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


 

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

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

nothing

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

出品ページにシンプルな商品説明をテキストで書くのみ。その際は、VewportだけHTMLのところへコピペしたらOKです。恐らくモバイルチェックでOKとなります。

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

ただ、テキストを太字にしたり、色を変更したりする場合は、それは=テンプレートを使ってる事と中身でたいした違いはありません。

見た目も大切だけど、中身はもっと大切です。

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


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

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

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

 - ebay 輸出