通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ヤフーショッピング作成講座 2016 > 実践講座 > サイドナビを画像に変更する方法

サイドナビを画像に変更する方法

ヤフー看板作成講座 サイドナビタイトル

サイドナビを画像化する!

看板やストアーサービス(ヘッダーナビ)は、HTMLを使う必要がなかったのですが、サイドナビはHTMLを使います。と言っても、タグは「<img>」と「<a>」の2つだけなので初心者でも、簡単にできてしまいます。

手順としては、(1)ボタン画像の作成→(2)画像をアップ→(3)サイドナビ編集

メニュー

※ネットショプ成功事例無料パンフレット配布中

1.サイドナビのサイズの確認

サイドナビのサイズ

まず、サイドナビのサイズの確認です。「ストアデザイン」→「テンプレート選択」と進めば、自分のお店がどの大きさの設定になっているかわかります。当店は200pxになっています。広くしたい場合は220px、狭くしたい場合は180pxを選びます。

最近のパソコンは画面も大きいので220pxでも良いと思います。そのほうが見やすいナビゲーションが作れます。当店はこの設定があるのを知らずに、作ってしまったので200pxで統一しまた。各画像は高さをつけることで見やすいボタンにしています。

2.サイドナビ用の画像作り

フリーサービスのボタンメーカーを使います。使い方は、(ストアーサービスをボタン画像化にする)の動画でも見れます。ちょっとボタンらしくするために設定を増やしてみました。

ボタン設定

サンプルのカテゴリーは(1)トップス、(2)ジャケット・アウター、(3)パンツ、(4)スカートの4カテゴリーですが、最も文字数の多い「ジャケット・アウター」が200pxというサイズに収まるように、フォントの大きさを調整します。

バナートップス
バナージャケット
バナーパンツ
バナースカート

文字数の少ないトップスやパンツ、スカートが右側に余白が出来てしまうので英語を入れました。これは気持ちの問題です(笑)。これを見づらいと思う場合は空白でも良いです。

3.サイドナビ画像の登録

完成した画像を登録します。「画像管理」→「追加画像」と進んでパソコン上に保存したボタン画像を登録していきます。一度に5つまで登録できます。それ以上の場合は、一括登録の方法がありますが今回は使いません。

登録した祭のポイントは、画像のURLをコピーしておくことです。メモ帳(notepad)でも良いですし、メールでも構いません。

URLをコピー

メールに保存
このようにメールに保存しておくと、いちいちい管理画面からURLをコピーしなくても済みます。

4.フリースペースにHTMLを書く

画像ができたら画像を配置するのと同時にリンクを貼る作業です。とてもシンプルなHTMLなので楽ですね。画像URLは「http://shopping.c.yimg.jp/lib/hogeracco/tops.gif」という形式で、赤文字のところが書くお店のID(アカウント)の文字列になります。

画像にリンクを貼るタグ
<A HREF=カテゴリページ><IMG SRC="画像URL" border="0"></A>

今回のカテゴリボタンを縦に並べる場合、もっとも簡単なやり方は改行(<br>)です。

<A HREF=カテゴリページ><IMG SRC="画像URL" border="0"></A><BR>
<A HREF=カテゴリページ><IMG SRC="画像URL" border="0"></A><BR>
<A HREF=カテゴリページ><IMG SRC="画像URL" border="0"></A><BR>
<A HREF=カテゴリページ><IMG SRC="画像URL" border="0"></A>

最後の行に<BR>は不要です。するとこんな感じになります。

バナートップス
バナージャケット
バナーパンツ
バナースカート

「ボタンとボタンの間が詰まりすぎていて嫌だ。適度なスペースを空けたい。」という場合はCSSを使います。<IMG>タグの中に「style="margin-bottom:5px;」と入れます。5pxの所は自由に変更して下さい。
「画像の下に余白5pxを入れる」という意味です。

<A HREF=カテゴリページ><IMG SRC="画像URL" border="0" style="margin-bottom:5px;";></A>

バナートップス
バナージャケット
バナーパンツ
バナースカート

できたタグをサイドナビのタグを書くエリアにペースとします。この動画では、うっかりリンクを貼り忘れてします。実際は、カテゴリーへのリンクも貼ってから登録して下さい。 反映をしてボタンが表示されたことを確認して、やぼったいテキストリンクは削除します。

5.あ!カテゴリーバナー忘れた!

カテゴリーの見出しを作るのを忘れました。こんな感じですね。タグを入れ替えて完成です。


バナートップス
バナージャケット
バナーパンツ
バナースカート

サイドナビ完成

6.ホームページビルダーがおすすめ

ただ、このタグをコピペや手打ちでやっていると時間がかかったりミスが出たりで手間取ることが多いです。できれば、自動でHTMLタグを作ってくれるホームページ・ビルダー(HPB)を使うと良いです。他のHTML編集用ソフトでも構いません。下の動画はHPBで今回のHTMLのタグを作るところです。

ポイントは、最後のリンクの一括変更です。パソコン上で編集した場合、画像URLがパソコン上のものになってしまいます。ストアクリエーターに貼り付ける前に、ヤフー上の画像URLに置換(ちかん)という機能を使って一括変更します。これめちゃくちゃ便利ですよ。100でも200でも一気に変更できますから。

ヤフーストアのカテゴリをバナー画像に置き換える方法
フリースペースや商品説明はホームページ・ビルダーで効率的に作る
ヤフーストア・トップページ用のテンプレートを作ってみた。
ヤフーショップのヘッダー画像HTMLの編集方法
yahoo! shoppingトップページ用HTMLテンプレート(シンプル版)

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP