*

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

関連記事

納品書

ショップサーブの納品書のフォントを明朝体に変更する方法

納品書のフォントの初期設定はゴシック体です。「このフォントを変えたい!」と思っている方もいるでしょう

記事を読む

学んだこと

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

もうやり始めると止まらない(><)。HTML5とCSS3?レスポンシブWEBデザインをち

記事を読む

ヤフーデザイン

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

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

記事を読む

php無理

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

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

記事を読む

コンバーター

楽天・yahoo shopping・ショップサーブコンバーター

コンバーターとは変換器のこと。例えば、「楽天からヤフーに引っ越ししたい」という場合、トラックに荷物を

記事を読む

ストアクリエーターPro

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

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

記事を読む

オリジナルページ

ショップサーブのテンプレートを使わずにオリジナルページを使う方法

ショップサーブは、オリジナルページを使えるところが、他社と違うところですね。「ショップサーブのテンプ

記事を読む

たたりなし

CMS・・触らぬ神に祟りなし

「触らぬ神に祟(たたり)なし」とは、『かかわり合いさえしなければ、余計な災いを受けることもない。』の

記事を読む

フッター

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

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

記事を読む

slider

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

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

記事を読む

Adsense

Adsense

呪縛からの開放
無料当たり前という固定観念の呪縛かの開放

ネットショップを開業している人にとっては、当たり前のASP(通販システ

グランプリ受賞
ネットショップ大賞2016グランプリ受賞を逃す

すみません。別にノミネートされていたわけでも、声がかかったわけでも

仕事にやる気は必要か
「仕事にやる気って必要ですか?」って相談と回答を読んでみた

読売ONLINEの発言小町のとあるトピックにヒット。 「仕事

生き延びる裏ワザ
メーカーが生き残るために裏ワザ的に使える便利なWEBサービス

ネットショップでは、メーカー品をメーカーから仕入れて販売しているわけで

コンビニ経営
「セブン-イレブンで年商2億」の広告のLP

関係無くても年商2億と見るとついクリックしてしまった先は、セブンイレブ

→もっと見る

PAGE TOP ↑