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

5分!スマホからの見た目 オリジナルebayテンプレートの改造

      2016/06/23

Smartphone

当サイト海外行ったことないけどebay輸出オリジナルebayテンプレートを改造するコーナー2回目

今回は、スマホから商品情報を見たときの見た目をあなた好みに変更します。通常はスマホからItem descriptionを見たら商品情報だけが表示される仕様です。コレに決まった文字を加えることで、商品情報以外のことも表示することができるようになります。

決まった文字を付け足すだけなので、5分以内で終わるでしょう。

現在のスマホからの表示と、これから目指す表示

これはスマホからItem descriptionを開いて見た時の表示内容です。(若干異なります)bvb-temp-smart

ノーマル状態では「商品情報 部分」に書いた内容だけがそのままスマホで表示されます。bvb-temp-s-2

今回の変更は、商品情報に加えてInternational buyersを表示させたり Payment / Shipping 情報をスマホで表示する方法です。

参考1:商品説明 + International buyers
smart

参考2:商品情報 + Payment / Shippingpayandship

こんな感じの「見た目」にお好みで変化させる設定です。ではやっていきます。

スマホでの見た目をあなた好みにする方法

今回はスタイルシートというウェブサイトのデザインを担当する部分に、文字を付け足します。

変更場所はテンプレート全体を見て、上から44行目 /* MEDIA QUERIES */ って書いてある部分です。

細かい説明はのちほど行いますが、上記コード一覧の中の3行目「 section, h1 { 」と書いてある行を変更します。以下のコードをコピペしてご変更ください。

変更できましたでしょうか。

この状態では、ノーマル状態との見た目に変更はありません。

最初との違いは、「 .shiharai, .hasso, .torihiki, .watashi, .tyuui 」これらが入ったことです。それぞれの文字はテンプレートの内容と紐づいています。

moji-himoduku

はい、あとは簡単! 例えば 商品情報にプラスして「International buyers」も表示させたいって方は、「 .tyuui, 」を削除してください。 ↓削除後のコード↓

 

削除すると、スマホからItem descriptionを開いた時に、このような表示になります。smart

簡単ですね。表示させたい内容を削除するっていうちょっと混乱しそうな所ですが、とりあえず表示させたい言葉を消してください。どう言ったらいいの?笑

表示したくない言葉を残す!こっちか!?

そんな感じです。

動作の意味

これはスタイルシートのメディアクエリという仕組みを使っています。詳しい説明は検索された方が分かりやすいと思いますが、このテンプレートにおいては、iPhone 6 plusの縦画面より小さいスマートフォンで見た場合に、すべて上記した表示となります。

見る人の画面サイズによって表示内容を変化させる方法です。

まとめ

1.テンプレートの上から46行目を以下のコードに変更する

2.変更したら、紐づいてるそれぞれの情報で、個別に表示させたい言葉のドットからコンマまで消す。

以上。簡単でしょ。

正確な記述について

Googleがモバイルフレンドリーを2016年の5月ぐらいに強化したって話があります。よりモバイル向けに特化している方が検索で優遇されるって話です。

モバイルファーストで考えると、このテンプレートの記述では弱いかなと思います。Googleに自分の商品がインデックスされる部分を考えたら、もっとソース内容も意識しなければならないかもしれません。一番いいのは、内容を理解したら後はプロに作ってもらうのが良いですね。

番外編

もし商品に書いてあるタイトルも表示させたい!って方がいたら、「, h1 」を削除してください。スマホで見ても商品タイトルが表示されます。


 

テンプレートのテーマカラーは黄色です。そして今回の参考例はカラーが変更された状態です。

ebayテンプレートの色変更する方法はこちら

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

 - ebay 輸出