*

ヤフーショッピングの画像やHTML編集方法

公開日: : 最終更新日:2016/11/17 CSSやHTML、CGI, ヤフーショッピング・作成講座

ヤフーストアHTML
構築頑張ろう

HTML自動変換
スマホ作成
サイドナビ画像化
フリーツール
リンクボタン画像化


ヤフーショッピングは、ショッピングモールなので、と言うと語弊がありますが、画像やHTMLの扱いになにかと制限があります。でも、基本的な考え方を理解すれば、後は慣れるだけです。

まず、画像について理解をしてください。

画像は2種類です。

(1)商品画像
(2)その他の画像(バナーやアイコンなど)

これらの2種類は、それぞれ別のフォルダに保存されます。

ヤフーストア画像フォルダ

(1)商品画像は商品カテゴリ毎にフォルダが自動的に作られてそこに保存されます。
(2)その他の画像は、「追加画像」というフォルダに保存します。

例えば、トップページに画像を貼り付ける場合は2ステップです。

(1)画像を「パールフォルダ」に登録(アップロード)してURLを取得(コピー)
(2)ページ編集画面でURLを貼り付け

「ページ編集」や「画像管理」のセクションを行ったり来たりしないといけないので、頻繁に使う画像は、メモ帳やメールなどにURLを記録しておくと良いです。

ちなみに、トップページを編集して画像をはりつける場合は、次のようなタグを書きます。

<img src=”http://shopping.c.yimg.jp/lib/ストアアカウント/画像ファイル名.拡張子”>

実際には、次のようになります。

<img src=”http://shopping.c.yimg.jp/lib/mymyshop/tensho.jpg”>

画像の大きさを指定する場合は、大きさを指定する命令を挿入します。

<img src=”http://shopping.c.yimg.jp/lib/mymyshop/tensho.jpg” width=”150″ height=”150″>

(150×150の場合)

ただし、元の画像が長方形なのに、ここで正方形を指定してしまった場合、画像の比率が崩れて、変な見え方になってしまいます。できれば、画像を登録する前に、希望の大きさに加工した上で登録するのがやりやすいです。

次にHTML。

HTML4が基本ですかね。CSSやJava Scriptも使えないことはないみたいですが、HTMLのタグ同様サポート外。「自己責任で使え」というスタンスです。ま、モール内なので普通にHTMLタグを使えば良いでしょう。

使えるタグは以下の通り。

重要タグ

たくさんありますが、重要タグは赤い丸、その次に使えると便利なのが青丸、それ意外は知らなくてもこまりません。極端な話赤い丸の8つのタグさえ理解できれば、それなりのページが作れます。

さて、レイアウトもCSSではなくTABLEでいけるので、慣れている人には楽ですね。

例えば、バナーを3つ横に並べる場合。

<table>
<tr>
<td>バナー1のURL</td><td>バナー2のURL</td><td>バナー3のURL</td>
</tr>
</table>

このようになる↓

バナー1 バナー2 バナー3

↑ブログの仕様上ボーダーが入ってしまっていますが、<table border=”0″>とすれば線は消えます。また、左右にめいいっぱいボタンを広げて配置する場合は、<table width=”100%”>とします。それぞれの画像を真ん中に配置したい場合は、<td align=”center”>~</td>とします。各枠内のスペースを調整する場合は、<table padding=”数字”>とします。

後は、枠の比率を変えたい場合は、全体を100%として、<td width=”20%”>+<td width=”20%”>+<td width=”60%”>としたり、<table width=”500″>としておいて、TDを200+200+100などとすることも可能です。

TABLEが使えればレイアウトはほぼいけそうです。

※関連
ヤフーショッピング作成講座
ヤフーショッピングHTML入門
yahoo! shoppingのトップページはどうやって作るのですか?
ヤフーストア・トップページ用のテンプレートを作ってみた
フリースペースや商品説明はホームページビルダーで効率的に作る。


Adsense

関連記事

no image

ヤフーショッピングのページ作りに使える無料ソフト

これ↓ http://asomin.net/htmleditor/ ホームページビルダー

記事を読む

トップページ

トップページの編集手順について考え中

ヤフーショッピングにかぎらず、トップページはお店の顔ですから「それなり」に作りこんでおきたいところ。

記事を読む

体験談

ヤフーショッピングに出店してみた体験談。その結果は・・・

ありがちな、興味を引くタイトルですよね~。 もちろん、出店してみたのでアルにその体験談です

記事を読む

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

絵画像

yahooショッピング商品説明絵に入れたい

同じ検索ワードが日本と中国から!そんなこともあるんですね~ さて、この検索ワードですがユーザー

記事を読む

テクニック

やられてしまった・・・実店舗雑貨店のずる賢い販売テクニック

「たまにはリアルの「モノ」を見なければ」と思って駅ナカの雑貨店でウロウロしていました。ちょうど赤のボ

記事を読む

ホームページビルダーでは作らない

ホームページ・ビルダー20クラシックでネットショップは作りません。補助に使います。

「ネットショップを始めよう!じゃ、ホームページ・ビルダーだ。」 で買ってしまった方もいると思い

記事を読む

ヤフーショッピング自社サイトに埋め込む

自社サイトにヤフーショッピングを埋め込む方法

いくつか考えられるものを。 1つ目は、自社サイト内に商品ページが既にあって、そのページにヤフー

記事を読む

CPI

レンタルサーバーの時代はもう終わった

レンタルサーバーを借りてネットショップを作ったりホームページを作ったりしたい人が、2004年に100

記事を読む

レスポンシブWEBデザイン

レスポンシブ・デザインへの移行に際し学んだこと(その1)

自分のサイトをスマホで見た時の残念感・・・なんとかしたい。でもやる気ない・・・そんなこんなで数年が経

記事を読む

Adsense

Adsense

ニッポンの社訓はすごい
ニッポンの社訓はすごい!から8社

30分の時間つぶしのために、いつものコンビニの雑誌コーナー。さっと見渡

クレカ必須
ネットショップ運営者にクレジットカードは必須である2つの理由

現金主義の人も多いですが、ネットショップをやるとなれば、そのポリシ

消費者直送を嫌がるメーカー・消費者直送をすべきメーカー

個人宅への直送を嫌がるメーカーが口をそろえて言うのが「トラブルが嫌

勘違い
かっこいいと思っていたデザインは実は最悪だった

サイト開設時から使っていたブログ(今放置)のレイアウト・デザインですが

おてがる通販
おてがる通販を使いたいが評判やWindows10で使えるのか気になる

「おてがる通販」とは、なつかしいひびきですね。「おてがる通販」はネ

→もっと見る

PAGE TOP ↑