*

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

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

この記事は約5分で読むことができます。

ヤフーストア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

関連記事

jQuery外部ファイル

外部HTMLファイルをjQueryで読み込んでも表示してくれない2つの原因

古い「.html」を変更するときに悩むのが、全ページ共通部分のヘッダーやナビ、フッターなどで

記事を読む

ウェブテクニック

ショップオーナーが知っておくと役に立つWEBテクニック

ネットショップを始めるのにHTMLやCSSとかの知識は、とりあえずいらないです。アプリを借りたなら、

記事を読む

php無理

phpプログラミングは果てしないのであきらめた

「phpでプログラミングができたらどんなにいいか。APIを使っていろんなことができるし。」という思い

記事を読む

ストアクリエーターPro

初心者が「ストアクリエーターProが難しい」と感じる3つの理由とその解決策

「ヤフーショッピング・プロフェッショナルで出店したのは良いけど、管理画面であるストアクリエーターPr

記事を読む

体験談

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

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

記事を読む

オリジナルページ

ショップサーブオリジナルページへのカートボタン他

物忘れがひどくなるのは年齢のせい? たま~にHTMLやCGIをいじってページを作るのですが、と

記事を読む

シンメトリー効果

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

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

記事を読む

フッター

フッターは「とりあえず」設定で

商品ページで良く見られるエリアは上部なので、下部のフッター部分は、とりあえず必要情報を載せておくだけ

記事を読む

slider

商品を横スクロールするのはjQueryやCSSによるSLIDER

楽天の「今月の売れ筋ジャンルランキング」などの箇所にある、右矢印をポチっとやると、横に商品一覧がスク

記事を読む

わからない

ヤフーショップの構築方法がわからない

「ヤフーに出店したけど構築方法がわからない。」という人が激増中です。 出店審査にパスす

記事を読む

Adsense

Adsense

最強のメルマガCGI
メルマガCGI、こんなに素晴らしい最強のCGIがあったのを忘れていた・・・

2018年からの傾向なんですが、通販システムを借りているショップサ

事情
一部のネット販売店の実情

最近話したAさんのお話。。。「ネット販売やっています。」というと、

確定申告
2019年確定申告の時期だよ~テキトーな個人的裏(ウラ)話

来ましたか?確定申告のハガキ!1月下旬に来たハガキ、忘れないように

みるみる残高が増える
やれば、銀行口座残高がみるみる増えるヽ(^o^)

銀行口座の残高が増えるって嬉しい! って思いませんか? 思

insta
instagramやるべき店とやるべきではない店(ネット販売)

インスタは一応アカウント持ってますが何年か放置です。当然です。

→もっと見る

PAGE TOP ↑