*

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

リアルタイム受注状況を表示させる方法(無料CGI提供)

楽天で良く見かけるリアルタイム受注状況の小窓(こんなやつ)ですが、ショップサーブにはその機能はありま

記事を読む

CGI、PHPフリーのプログラマーの(集客)マーケティング・アイデア

ネットショップを自作する人が超マニアックであるように、レスポンシブ対応の掲示板を探している人

記事を読む

ストアサービス変更

デザイン設定で最初にやっておきたいこと(その1)

「ヤフーショッピングに出店してみた。」ものの、デザインをいじりだすと止まらなくなるのが、もとウェブク

記事を読む

置換を使って効率的に

フリースペースや商品説明はホームページ・ビルダーで効率的に作る

ヤフーストアのフリースペースや商品説明(PCのみ)のHTML部分は、1、2行なら、そのまま手書きする

記事を読む

認証キー

EC CUBE プラグイン用の認証キーの場所

納期が迫っているのに、ついついサボってEC CUBEでお遊びです。EC CUBEもバージョン3.0に

記事を読む

カウントダウン

繁盛感の演出~注文が入りました!自動スクロール~

楽天ショップなどでよく見かける「注文が入りました!」逆スクロールをショップサーブに導入しよう!企画?

記事を読む

売れてる本の表紙デザイン

売れている本は表紙デザインが秀逸

ショッピングカートを作りたい! APIを使えるようになりたい! マッシュアップサイトを作

記事を読む

テクニック

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

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

記事を読む

no image

ショップ運営者のHTMLメール作成について

HTMLメールのメルマガが増えてきているのは周知のところです。その流れでネットショップ運営の現場でも

記事を読む

CSV引っ越しは楽しい

ヤフーショップからショップサーブへの引っ越し方法

楽天からカラー・ミーショップ・プロ、カラー・ミーショップ・プロからヤフーストア、ヤフーストアから

記事を読む

Adsense

Adsense

ショートカット
企業の通販部門は急がば回らない。その道のプロを頼ってショートカットを。

趣味で習い事をしている人も多いと思いますが、何かを始めるときに「その道

ネットマーケティング
実店舗ビジネスもホームページにFBにInstaにとネットマーケティング全開

「美容室を開業した。ホームページを作った。」 以前は、実店舗のホ

儲かるネットビジネス
儲かるネットビジネス見っけ

儲かる(たぶん)ビジネス見っけました。 それは、ずばりフォー

セレクトショップ開業
リアル(実店舗)のセレクトショップ開業方法について

リアルのビジネスを始めようと思ったとき、誰もが、まずはネットで情報

検索キーワードは検索ユーザーとの対話
検索キーワードはユーザーとの対話

GAのオーガニック検索のキーワードの取得がほとんどできなくなって久しい

→もっと見る

PAGE TOP ↑