ショップデザインのカスタマイズ
実店舗でも飾り付けや商品の陳列など、お店独自の雰囲気を上手く引き出しています。
ネットのショッピングモールだからといっても売っている商品や、扱っている商品の雰囲気（テイスト）に合わせてショップの見た目を変えたいですよね。
印象的な雰囲気を出すことで、一度見て、商品を悩んでいる人が再度購入を検討した時に「あの感じのお店だった」と思い出す事も多いかと思います。
お店の名前を覚えるより、雰囲気や〇〇な感じ・・・といった抽象的なものからお店を思い出す方も多いのではないでしょうか？
またそういった印象を相手に覚えておいてもらうことで、日常のふとした時に思い出したりとか、時々見かける広告や雑誌に掲載されている似たような雰囲気の物からアノお店のアノ雰囲気良かったなぁと思い出すこともあると思います。
このようなお店独自のニオイといいますか・・・雰囲気を持たせるにはどうしたらいいでしょうか・・・
そうです。ショップをデザインしてカスタマイズをするんです。
style要素は使えないけど！
Yahoo!ショップでデザインをしようとすると、どうしてもCSSを書かなければ表現しきれません。
ですがYahoo!ショップではstyle要素が使えないので、CSSによる簡単な変更ができませんね。
でも諦める必要はありません。
それぞれの要素にstyle属性を使って直接書き込めば、CSSを使ったレイアウトができるんです。
ただしこれでは煩雑になってしまいますね。
同じ見た目にしたい部分へ、毎回同じstyle属性と値を書き込むのは更新時に面倒です。
やっぱりCSSを使ったデザインは難しいのかな・・・と思うかもしれませんが大丈夫
「トリプル」という有料サービスを使えば、外部CSSの読み込みができる様になるので、通常のページ制作の様に作り込むことができるようになるんです。
しかもこの「トリプル」を使うとJavaScriptの読み込みもできる様になるので、さらに色々と弄る事ができます。いろいろと捗りますね！！
ぜひ試してみてください。
ページ幅を広げるには全体の設定を変更
ページの表示幅、狭くないですか？
ディスプレイも大型化してきているので、左右に余白が開きすぎて貧相・・・なんてこともよくあるのではないでしょうか。
そんな時は設定から変更する事ができますよ。
変更は「ストアデザイン」→「全体の設定を変更」→「ページ幅」です。
ただし広くし過ぎには注意です。
デスクトップパソコンなら表示しきれるかもしれませんが、ノートパソコンや小さめのディスプレイで見た時に収まらないかもしれません。
だいたいですが1000pxとか1100pxとかにしておきましょう。
ナビゲーションについて
ナビゲーションは背景色とテキストだけで貧相な雰囲気がすごいですね。
これでも機能は十分果たしていますが、やはり変更をしたくなります。
そんな時はボタン毎に画像を設定する事ができるので、画像を作ってあてはめていきましょう。
ただしこの部分から変更をすると、右側に3px程の空白が生まれてしまいます。
これはHTMLとCSSの関係で生まれてしまうスキマです。
CSSを変更できれば解決できるのですが、この項目はHTML編集ができないので手が加えられません。
有料サービス「トリプル」なら外部CSSを読み込めるので変更ができるかもしれませんが、そうでなければこのスキマも含めてデザインしましょう。
どうしてもスキマが許せない場合は思い切ってナビゲーションを非表示にし、ヘッダー内のフリーエリアに書き込んで対応するという荒業もあります。
各パーツの配置について
ストアデザインからページレイアウトの変更でパーツの表示・非表示を設定することができます。
フッターの配置やフリーエリアの追加など、用意されているパーツから配置したいものと場所を選んでカスタマイズすることができます。
なので不要な物は外したり、逆に必要な物を設置したり・・・
配置を変えて思った通りに並べかえたりして思い思いのストアを構築していきましょう。
サイドに出るカテゴリ名を画像にするには
カテゴリのリンクは初期段階だとテキスト表示になっているので、正直探しにくいです。
これを画像にできたらいいのにとは思いませんか？
それもできます。
設定は各商品カテゴリの編集画面から行います。
あてはめたい画像を選択して更新すればOK・・・と思いますよね。
もうひと手間必要です。
ストアデザインから「ストア内商品カテゴリ」を選んでください。
すると表示パターンの選択ができますよね。
その項目から「タイプ3」を選択してみてください。
これで先ほど設定した画像が表示されるはずです。
ちなみにこの項目、HTMLを編集する箇所がないので、中央寄せにしたり、画像とテキストの合わせ技にしたりといった操作ができませんのでご注意ください。
また画像の横幅は198pxです。
この数値以内でデザインしてくださいね。
会社概要ページなど初期からあるページをいじりたい・・・
初期からあるページもいくつかありますよね。
そのページのデザインも変更したくなりますが、残念ながら編集する項目がありません。
なので情報を追加したり、styleで表示を整えたりする事ができません。
どうしても編集したい場合は、別途ページを設ける他なさそうです。
まとめ
・style要素は使えないがstyle属性は使える
・要素毎にstyle属性を使いデザインをしていく
・有料サービス「トリプル」なら外部ファイルを読み込める
