*

ヤフーショップのヘッダー画像HTMLの編集方法

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

開店申請にパスしたなら、とりあえず商品を登録して行くわけですが、ヘッダーを作ってお店らしくしたい人も多いと思います。ま、そこは、順番は別に決まっていないので、商品登録が終わってからでも良いし先でも良いです。

1.ページの幅は決めてますか?

まず、ヘッダーを作るにしろ、フリースペースにバナーを貼り付けるにしろ、ページの全体幅を決めていないと、何もできません。ページの幅を決めるのは「ストアデザイン」→「全体の設定」のところです。950が標準だと思うんで、この数字を基準に話を進めます。

ストアページ幅

 

2.ヘッダーは横いっぱい(950)の画像を作る

ヘッダーは通常は、横幅いっぱいに作ります。分割する方法などもありますが、それ基礎ができてからでよいでしょう。ちなにみ、950というのは950px(ピクセル)のことです。横に点(ドット)が950個ということです。

必ず、ページ幅と揃えてください。これが違うをレイアウト崩れの原因になります。縦の大きさはいくらでも良いですが、大きすぎるとページが見難くなるので、最大でも200pxくらいに納めておきましょう。

ヘッダー看板

 

3.ヘッダー看板画像を登録する

ここがちょっとヤフーショップ編集の面倒なところですが、作成した看板は、一度画像専用フォルダに入れる必要があります。言ってみれば、画像専用保管庫です。画像を保存する場所は決められていて、そこ以外には置けない決まりになっています。

「画像管理」→「追加画像」→「パーツ」→「追加」と進みます。

追加できると、その画像用のURLが割り振られるので、それをコピーしておきます。

ヘッダー画像

4.ヘッダーHTMLの欄にIMGタグを書く

ここでまた、「ストアデザイン」のページに戻ります。左側のナビゲーションにある「ヘッダー・看板」というボタンをクリックします。右側に出てくる「ヘッダー」をクリックします。そして、その下のほうにある「HTML(タイプ3)」にチェックを入れます。

ヘッダー看板3

そして、さらに下にあるフォームのスペースの中次のタグを書きます。

<a href=”お店URL”><img src=”http://shopping.c.yimg.jp/lib/shopid/kanban.jpg” border=”0″></a>

ヘッダー看板4

ポイントは、看板そのものをクリックするとお店のトップページに戻れるように、<A>タグでリンクをする点と、border=”0″と入れておくことです。borderを入れないと、画像の周りに余計な枠ができてしまいます。これで、お店看板がページ横幅いっぱいに配置されます。

ちょっと面倒ですが、慣れてしまえばどってことないです。しかも、ヘッダーなんて毎日編集するもんじゃないですから、1度決めてしまえば何年もそのままで良いですからね。

関連 ヤフーストア作成講座2016


Adsense

関連記事

テクニック

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

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

記事を読む

オンエアー

「今、店長います。」をON AIR画像を使って表示させる方法

確か、10年近く前の、日経MJ「にぎわう専門通販」という記事で取り上げられていたショップサーブユーザ

記事を読む

スライダーで賑わい感

紙芝居のように画像が入れ替わるパーツは「スライダー」

ネットショップのヘッダーなどで、同じ場所で写真が自動的に入れ替わるパーツを「スライダー」と言います。

記事を読む

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

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

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

記事を読む

フッター

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

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

記事を読む

重ねるCSS

商品写真の上に文字や画像を重ねるCSS

初めての沖縄旅行にテンション上がりまくりの女の子ちゃん 商品写真に文字を入れる場合、基

記事を読む

ヤフー難しい?

ヤフーショッピング 店舗開設は難しいか?

複数ワードではなく、質問型キーワードでご訪問。 ヤフーショッピングにはトータルで5、6年出店し

記事を読む

自作ショップ常識

自作ショップ構築ファイル構成の考え方

自作構築をする場合、知らないと後で「トンデモない事態」を引き起こしかねないががファイルの構成。(商品

記事を読む

打ち消し線

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

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

記事を読む

マグカップ

画像検索対策が手薄な店が多いみたい

商品を探すときに画像検索を使う人も多いと思います。でも、その画像検索の結果を見ても、同じような写真ば

記事を読む

Adsense

Adsense

重ねるCSS
商品写真の上に文字や画像を重ねるCSS

初めての沖縄旅行にテンション上がりまくりの女の子ちゃん

今後10年で
今後10年でなくなる仕事を目の当たりにして実感した3例

オックスフォード大学が702業種を調べて、今後10年で「消える職業

制作を丸投げしない
こだわりある店主やオーナーは制作を丸投げしないこと

ショップサーブでネットショップを開店。お店づくりをしたいけど、面倒

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

楽天からカラー・ミーショップ・プロ、カラー・ミーショップ・プロから

受信拒否
迷惑客のメールを受信拒否する方法

電話や携帯メールは受信拒否が簡単にできますが、実は、メールの拒否機

→もっと見る

PAGE TOP ↑