ヤフーショッピング 新ストアデザイン-30分でトップバナーを作る方法

写真素材無料【写真AC】

[商品・画像・在庫]→[新ストアデザイン]→[看板]

30分でできる看板の作り方3つ

1枚画像を貼る方法

※横幅1250pxで作成します。

何もないのはおかしいので、とりあえず店の看板を表示しておくのには一番手っ取り早い方法です。

画像の看板となる画像を指定サイズ(推奨1250px×200px)で作成して、画像フォルダにあらかじめアップロードしておきます。

画像登録のしかた

[画像管理]をクリックします。

「フォルダリスト」は上下2つに分かれています。

点線より上が、各商品を登録した際に自動的に登録される画像
点線より下は、任意に登録した画像が格納されています。

点線より下の追加画像に登録します。
※注意:上段の商品画像に登録しても何も表示されません。

看板設定の看板ウインドウにHTMLで<a href=”トップページのurl”><img src=”画像のURL” width=”100%”></a>を記述して保存します。

看板(HTML可) と表記されていて、あたかもHTML以外の方法があるのか?と思いますが、HTMLでしか表示できません。

アップロードボタンはありません。HTML記述です。

リンクつき画像を横に並べる方法

ただ1枚画像を貼るだけなら、推奨サイズで作成した画像を<img src=”####”>のようにHTMLで書けばOKですが、それではリンク先が1つで非常にもったいないです。

複数画像、複数リンクにするのが最も簡単なので、私はそうしています。

ストアクリエータースタンダードプランではcssが使えないので、htmlを駆使してどうにか見栄え良くやるしかありません。

<a href=”##”><img src=”##”></a> ←これをひたすら並べただけのトップバナーです。

tableタグを使ってロゴ画像+リンク先を同時に表示する方法

次は、オーソドックスに店舗ロゴがあって、下にお問合せへのリンクをつける方法です。

色々悩んだ挙句、tableタグを使ってみました。

2行のtableを作り、1行目にpng形式の背景透明画像を配置、2行目にはテキストでそれぞれのページへのリンクを設定しました。

見た目がダサくならないよう、テキストにはリンクである下線が表示されないようにしてあります。

結果、リンクはテキストで表示したほうがブラウザではくっきりしてきれいで見やすいです。

もしも文字の修正があったとき、画像だと直すのが大変ですが、テキストなら一瞬です。

需要があるのかわかりませんが、コードを載せておくので参考にしてください。

画像のURL<img src=”#”>のところにファイルパス、それぞれのリンク先にURLを入れれば使えるはずです。

<table width=”100%” cellspacing=”0″ style=” background-color:#fff;”> <tr> <td align=”center”><img src=”画像のURL” width=”260px” vspace=”15″><br> </td> </tr> <tr> <td height=”28″ align=”center”> <a href=”#” style=”text-decoration:none; color:#660000″>HOME</a> |<a href=”#” style=”text-decoration:none; color:#660000″> 会社概要</a> | <a href=”#” style=”text-decoration:none; color:#660000″>配送について</a> | <a href=”#” style=”text-decoration:none; color:#660000″>お支払い・送料</a> |<a href=”#” style=”text-decoration:none; color:#660000″>お問合せ</a><br> </td> </tr> </table>