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

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

モバイルフレンドリーでシンプルな ebay テンプレート を公開します

投稿日:2016年12月6日 更新日:

ebay-template-simply

モバイルフレンドリーに対応したシンプルな無料 ebay テンプレート を公開します。

ソースコードをコピーしてebayのItem descriptionのところに張り付けたら使用可能です。

背景色などのアレンジも簡単にできるよう作りました。

スポンサーリンク

HTMLソースはこちら

すべてコピーし、ebayに貼り付けて使用します。念のためebayテンプレートの使い方も紹介しますね。

ebayでHTMLテンプレートを使用する方法

HTMLテンプレートをebayで使用する方法を紹介します。

1.まずテンプレートをコピーする。

▼ソースコードでマウスオンすると出てくる"Copy"が便利♪copy

2.コピーしたら、ebayのdescription入力するところに張り付けましょう。

▼HTMLと書いてあるタブのところです。※画像参照ebay-description-html

 

3.コピペしたら、あとはStandardタブをクリックすれば、内容編集が可能になります。

ebay-description-standard

ご自身の商品にそって項目を変更されてください。

「Payment や Shipping などの項目は必要ない」という場合は、そのまま編集画面から文字を削除されて大丈夫です。

大切なのは商品のタイトル入力と、Item Descriptionの入力なので、その二つは必ず入力されることをおススメします。当サイトで公開しているコードすべてで同じ事が言えます。

ebay モバイルフレンドリー対応済み!

simply-mobile

モバイルフレンドリーチェッカーでもエラーはでませんので、過去の古いテンプレートを使用されている方にもおススメです。

アレンジポイント

アレンジを加えるいくつかの方法を紹介しますね。

まずは、背景色など色を変更する方法について。

テンプレートの背景カラーを変更する方法

色の変更は、HTML内のカラーコードをコピペ変更することで対応できます。

html-colors

HTML内に #333333 という数字の羅列と、 #eeeeee という羅列が確認できるかと思います。シャープから始まる6ケタの数字や英字の羅列がHTMLのカラーコードです。

色によって決まったコードがありますので、それらをお好きな色のコードへ変更すればテンプレートの色が変わります。

参考例:水色の背景に変更してみる場合

back-mizuiro

例えば上記画像のような水色の背景にする場合は、水色のカラーコードである "#A9F5F2"を HTMLソース 24行目である backgounrd: という部分に指定します。

こんな感じです。うん、これはくそダサいですね。

とりあえず、「 background 」が背景を操作してる部分です。

backgroundのほかにカラーコードが指定してあるのは、「color」と「border」という二ヵ所。

color : と書いてあるのは文字の色。文字の色はebayからでも変更できますね。htmlを直接変更しても、ebayから変更してもたいした違いはありません。

border : と書いてあるのは、Item DescriptionやPaymentなどの見出しの左側にある縦棒の記述です。(あと外枠の線も)

border の縦棒部分
border-left-point

borderの縦棒も色変更できます。例えば 背景を白 、見出しの縦棒を レッド にしてみる。

まず背景を白にする場合は、backgroundに 白のカラーコードである #FFFFFF を指定します。

続いて見出しの縦棒を変更するのは、HTMLソースの9行目 border-left : と書いてある所のコードです。#FF0000 の赤に変更してみます。

赤コードに変更すると次の画像にように見た目が変わります。

border-red

こんな感じで色変更が可能です。他にもカラーコードはたくさんあります。以下のサイトなどで調べる事ができます。

 

この流れで、見出しの縦棒をアンダーラインに変更してみましょう。

見出しの縦棒を変更する方法

border-bottom

縦棒のラインを上の画像のようなアンダーラインに変更するのも簡単です。

見出しのラインはHTMLソース 9行目 border-left : と書いてある所で指定しています。

これをアンダーラインにする場合は「 border-bottom:  」に変更したらOK

こんな感じ。

border-left を border-bottom へ

シュッとしたラインに変化します。同時に指定してある数字も変更する事で、ラインの太さが変わることもお分かりいただけるでしょうか。

いろんな場所の数字もいじってみてください。いろいろ変化します。どうせいじるなら大胆にいじった方が変化が分かりやすいです。

HTMLは けして難しいものではない事が伝わってれば嬉しいです。

基本をマスターしたらプロに作ってもらう際にもスムーズに事が進みますよ!

ということでシンプルでモバイルフレンドリーな ebay テンプレート の紹介でした。ぜひ使ってみてくださいね。

その他の ebay テンプレート も公開中!

ebay-template-b

ebayテンプレート一覧はこちらから

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

336-mix

336-mix

-ebay テンプレート

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