Yahoo!ショップのデザイン変更など、作業していて気が付いた事
Yahoo!ショップが基本料金0円になってしばらく経ちます。
ありがたいことに、Yahoo!ショップのデザイン作成も数件携わらせていただいておりますが、楽天などと同様に制約が多いYahoo!ショップ・・・
デザインをカスタマイズしていく中で気が付いた事を備忘録として書き溜めていきますので、お役に立てば幸いです。
※ここにある仕様は記事を作成時点（2017年10月30日）での情報です。今後のアップデートでメニュー名などが変更になる事もあります。
・全体幅の変更は「全体の設定」から
・ストア名について
・CSSの設定について
・JavaScriptについて
・ストアナビゲーションに画像を設定する場合
・サブメニュー内の商品カテゴリに画像を適用する
・カテゴリページにカテゴリ画像を載せる
・左右ボックス内の装飾
全体幅の変更は「全体の設定」から
ストアの横幅を変更する場合、「ストアデザイン」→「全体の設定」→「ページ幅」から手入力で数値を入れて変更できます。
その際、全体幅は指定した数値に広がりますが、サイドコンテンツは横幅200pxで固定です。
ストア名について
管理画面から入力できるストア名は全角16文字まで
画像などでサイト名やバナーに「Yahoo!ショップ」を記載する場合、「ヤフー」や「Yahoo!」の名称だけを記載するのはNG。
利用用途として、自社カートと区別するために「Yahoo!」の表記が必要な場合のみ、ストア名の末尾に「店」「ショップ」などと組み合わせて利用すれば記載できます。
その際、大文字/小文字・全角/半角を正確に表記しなければなりません。
使用可能例）
「○○○ ヤフー店」「○○○ ヤフーショップ」「○○○ ヤフーSHOP（Shop/shop）」「○○○ Yahoo!店」「○○○ Yahoo!ショップ」「○○○ Yahoo! JAPAN 店」など
CSSの設定について
無料プランでは記載不可。
別途有料サービス「トリプル」を利用する事で、外部ファイルの読み込みもできるようになります。
ちなみにソース上にstyle要素でCSSを書き込んでも動作しません。
CSSでレイアウトを設定する場合は、要素内にstyle属性を書き、必要な箇所に都度入れていく必要があります。
同じ装飾をする場合は同じ記載を必要な数だけ繰り返し書き込まなければなりません。
JavaScriptについて
無料プランでは使用不可。
別途有料サービス「トリプル」に加入し、外部ファイル化させたJavaScriptを読み込ませれば利用できます。
ストアナビゲーションに画像を設定する場合
「ストアデザインメニュー」→「ヘッダー・看板」→「ストアサービス」から設定可能。
用意されているリンク以外の設定はできません。
画像を設定した場合、右側に3px程度の余白が生まれるので、その値を考慮して画像を作る必要があります。
この余白は消すことができません。
どうしても許容できない場合は、「ストアデザイン」の中からヘッダー共通設定で「ストアサービス」を外し、フリースペースにHTMLで書き込む事で表現する事ができます。
この場合は任意のメニューを設置する事もできますが、外部サイトへのリンクを設定する場合、Yahoo!以外のWebページへ移動させようとしている事を警告する画面が1枚必ず挟まります。
サブメニュー内の商品カテゴリに画像を適用する
「ストアデザイン」→「サイドナビ」→「ストア内商品カテゴリ」からパターン3を選択
続いて、商品カテゴリページから、サイドナビ画像を設定。
作る画像は、横幅198px以内
左右には必ず1pxの線が入るので、そこも考慮したデザインにする必要があります。
カテゴリページにカテゴリ画像を載せる
テンプレートから「カテゴリページ2」を選択し、カテゴリページから画像をアップする。
カテゴリページ2のテンプレートを指定していますが、「タイトル画像」の欄があるテンプレートならどれでも適用できます。
左右ボックス内の装飾
テンプレート設定から個別に色指定が可能。
背景に画像を入れる、太字にするなどは不可。
全体設定を一括で変更する箇所も用意されています。
ちなみに個別に設定した後、全体の設定画面から変更をかけると個別設定が解除され、統一されてしまうので、個別に変えたい場合は個々に設定していった方がベター。
