こんばんは。0期生で2期の山内です。
昨日のオンラインラジオは楽しそうでしたね^^
MYC元祖ちょい不良
LEONオヤジコンビ現る
と題して、おともさんナビで
MYC2期 新井秀俊さん+百瀬 信吾さんがゲスト
楽しくない訳がない 笑
私は残念ながら所用があり、
ライブに間に合わなかったので
チャットで絡めませんでしたが、
新井さんが九州にこられた際は、
九州メンバーと相見えたいですね!!
お待ちしています!
さて本日は、
Yahoo!ショップ トップページの作り込み
〈その3〉です。
すべて作り込んでお見せするつもりが
ヘッダーだけしか出来ていません汗
ストアクリエイターproに
そもそも慣れていないので
時間がかかってしまいます(言い訳)
それでも基本的なことは
わかりましたのでお伝えしていきますね!
無料テンプレートを利用したヘッダーを作ってみました
![](http://yj-style.com/wp-content/uploads/2018/10/template-1599667_640.png)
ネット検索して、
初心者でも扱える
HTMLテンプレートを無料配布している
ヤフーショップ制作代行会社のサイトを見つけました。
内容は、
「ヤフーショップテンプレート無料を活用して
素人っぽさを無くそう!」
という、最低限のシンプルなものです。
ーーーーーーーー
・ヘッダーエリア
・サイドエリア
・メインエリア
・フッターエリア
ーーーーーーーー
これら4つのテンプレートセットです。
HTMLをどこに貼ればよいのかも
サイトにわかりやすく表記してくれてます。
まったく知らない会社ですので
URLは載せないでおきますが
知りたい方は山内までコンタクトしてください。
(自己責任でお願いしますね)
今日はこのうちの[ヘッダーエリア]を
反映させました。
↓ ↓ ↓ ↓ ↓
http://bit.ly/2jrN2yD
店名にモザイクをかけていますが、
ここから、すぐ下の罫線で挟まれたメニューの部分、
(黄色の矢印で示しています)
これがヘッダーエリアの無料テンプレートで作成した箇所です。
たったこれだけ・・・^^;
非常にシンプルですが、
その制作代行会社がいうには理由があります。
それは、
このヘッダーの上下等にYahoo!から提供される
バナーなどを貼り付け、そちらを目立たせる、
その方が得策であるとのこと。
なるほど一理ありますね。
店名よりも、
ポイントは何倍か
今何がお得なのか
キャンペーンはあるのか
そちらの方が知りたいですよねw
貼り付けたバナーは各ページに
反映もできますので賑やかになります。
デザインはいろいろ追加できます
![](http://yj-style.com/wp-content/uploads/2018/10/ads-1663031_640.png)
けれど、やはり店名の部分は
写真など入れてカッコよく大きく表示したい!と思われるなら、
「看板」で追加することもできますよ。
その際は、きちんとバナーデザインを
依頼するなり自分で作るなりしなければなりません。
サンプルでお見せしている
”モザイクのロゴからYahoo!Shop (飛行機のアイコン)海外から〜お届けします。”
ここは私が自分で作成したpngデータを
ストアエディタの[画像管理]へ追加保存して
無料テンプレートのHTMLへリンクさせました。
最初は、自分の持つサーバへアップし、
同じように無料テンプレートのHTMLへ
リンクを貼ったのですが
プレビューをみても反映されないのです。
ストアエディタをよく見ると、
「外部リンクを削除しました」と
赤文字で警告文が。。
画像はすべてYahoo!のストアエディタへ
アップロードし、そこで表示されるURLで
リンクさせなければいけないんですねー。
外部リンクはダメでした!
ちなみに無料テンプレートのデフォルトは
テキストで店舗名を入れるようになっていますので、
その部分に画像リンクを差し替えるだけでOKです。
備考:今回のようなロゴなどの画像は、
フォルダリストの「追加画像」に入れ、
商品画像とは区別します。
ヘッダーエリアはそんな感じです^^
★[中央のメインエリア]
真っ白で寂しいですね〜。
何もしないとトップページはこんな状態です。
前回にも書きましたが、
ほとんどの場合、購入者は検索して
商品ページを見るわけですが
真っ白は寂しいというか、寒い!ですので
最低限の形にはしたいですね。
ここも無料テンプレートでは
「新着アイテム」や「売れ筋商品」などとして
商品が並んだ状態となります。
★左の[サイドエリア]の一番上は、
現在「私が店長です」に
なっちゃっていますが
ここも無料テンプレートは
「一押しアイテム」というタイトルで
商品とコメントを表示し、
商品カテゴリ欄も、
今はYahoo!のデフォルトのままですが
シンプルな罫線で区切られたデザインとなります。
文字だけでの説明では、ひじょ〜に
分かりづらいかと思いますm(_ _)m
また反映が進んだら画像付きで
お届けしていきます〜。
それでは、どんな仮装にするのか?明日の谷さんへバトンタッチです!
最後までお読みいただきありがとうございました。
大越 雄介
最新記事 by 大越 雄介 (全て見る)
- 【Day121】【資産形成の基本】無駄遣いを止めて資産を増やす秘訣 - 2024年7月21日
- 【Day120】40代で決断!田舎移住で変わった私の生活と仕事 - 2024年7月16日
- 【Day119】【フリーランス法って知ってますか?】2024年11月施行!フリーランスの新たな働き方 - 2024年7月8日
コメントを残す