*

ヤフーショッピングの画像や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

関連記事

サイドナビ

yahoo! shopping サイドナビの編集

動画付き解説版できました~ デザイン設定で、「とりあえずお店らしく」と考えた場合、ヘッダー

記事を読む

no image

ショップサーブを予約システムとして転用してみる方法

ショップサーブといえば、物販用のネット販売システムですが、これを予約システムとして使えるのではないか

記事を読む

打ち消し線

メーカー小売希望価格や通常価格に打ち消し線を引く(CSS)

打ち消しと言えば<s>だったのですが、今はCSSで書きます。 この画像のよ

記事を読む

ショッピングカート

「共同購入(CGI)」役目終える

サイト引越しのときのCGIの断捨離中に共同購入のCGI(共同購入システム3 coopbuy3.cgi

記事を読む

エクセルCSV変換

もしもドロップシッピングのCSVファイルの列にあるカテゴリーを小分けにする方法

「そんなこと誰が知りたがっているのか!?」というような内容ですが、意外にいるかも? というわけ

記事を読む

ケントウェブ

WEB MART(KentWeb) を設置してみた

KENT WEBさんを久々に見ると、カートCGIがちょいとバージョンアップしていたので、おもしろそう

記事を読む

EFO

ショッピングカートCGI復活か

10年前は全盛だったショッピングカートCGIですが、もはや絶滅かという域に達しつつあります。

記事を読む

ヤフーショッピング

yahoo! shoppingのページ作りはHP作成の基礎から

「yahoo! shoppingのプロフェッショナルに出店したのはいいけど、一体どうやってページを作

記事を読む

シンメトリー効果

デザインはシンメトリー効果を意識する

シンメトリーとは左右対称や上下左右でつり合っていること。ホームページのレイアウトが崩れていると「この

記事を読む

ヤフーデザイン

ヤフーショッピング出店デザインはどうやって作るのか

「無料で簡単に」申し込みができるようになったヤフーショッピングですが、ページ作りをするには技術が必要

記事を読む

Adsense

Adsense

去って欲しい社員
去って欲しいスタッフの条件

ドワンゴ社内に飾られている「去ってほしい社員の条件」 出典:天

何を売っていいかわからない
ネットショップ 商材 何を売っていいか分からない

個人で、副業で、ネットショップを始めたいけど、何を売っていいいかわ

ヤフーデザイン
ヤフーショッピング出店デザインはどうやって作るのか

「無料で簡単に」申し込みができるようになったヤフーショッピングですが、

quocard2
QUOカードや金券を確実に経費にする方法

(www.quocard.com/) quoカードはもちろん

アパレルショップ向けは
アパレルショップのネットショップを作成するには

アパレルショップと言っても、いろいろですからね。スーツ専門店、

→もっと見る

PAGE TOP ↑