株式会社アテンド0Yahoo!ショップのデザイン変更など、作業していて気が付いた事Yahoo!ショップが基本料金0円になってしばらく経ちます。ありがたいことに、Yahoo!ショップのデザイン作成も数件携わらせていただいておりますが、楽天などと同様に制約が多いYahoo!ショップ・・・デザインをカスタマイズしていく中で気が付いた事を備忘録として書き溜めていきますので、お役に立てば幸いです。※ここにある仕様は記事を作成時点(2017年10月30日)での情報です。今後のアップデートでメニュー名などが変更になる事もあります。全体幅の変更は「全体の設定」からストアの横幅を変更する場合、「ストアデザイン」→「全体の設定」→「ページ幅」から手入力で数値を入れて変更できます。その際、全体幅は指定した数値に広がりますが、サイドコンテンツは横幅200pxで固定です。ストア名について管理画面から入力できるストア名は全角16文字まで画像などでサイト名やバナーに「Yahoo!ショップ」を記載する場合、「ヤフー」や「Yahoo!」の名称だけを記載するのはNG。利用用途として、自社カートと区別するために「Yahoo!」の表記が必要な場合のみ、ストア名の末尾に「店」「ショップ」などと組み合わせて利用すれば記載できます。その際、大文字/小文字・全角/半角を正確に表記しなければなりません。サービス「トリプル」を利用する事で、外部ファイルの読み込みもできるようになります。ちなみにソース上にstyle要素でCSSを書き込んでも動作しません。CSSでレイアウトを設定する場合は、要素内にstyle属性を書き、必要な箇所に都度入れていく必要があります。同じ装飾をする場合は同じ記載を必要な数だけ繰り返し書き込まなければなりません。サービス「トリプル」に加入し、外部ファイル化させたJavaScriptを読み込ませれば利用できます。「ストアデザインメニュー」→「ヘッダー・看板」→「ストアサービス」から設定可能。用意されているリンク以外の設定はできません。画像を設定した場合、右側に3px程度の余白が生まれるので、その値を考慮して画像を作る必要があります。この余白は消すことができません。しても許容できない場合は、「ストアデザイン」の中からヘッダー共通設定で「ストアサービス」を外し、フリースペースにHTMLで書き込む事で表現する事ができます。この場合は任意のメニューを設置する事もできますが、外部サイトへのリンクを設定する場合、Yahoo!以外のWebページへ移動させようとしている事を警告する画面が1枚必ず挟まります。続いて、商品カテゴリページから、サイドナビ画像を設定。左右には必ず1pxの線が入るので、そこも考慮したデザインにする必要があります。カテゴリページにカテゴリ画像を載せるテンプレートから「カテゴリページ2」を選択し、カテゴリページから画像をアップする。カテゴリページ2のテンプレートを指定していますが、「タイトル画像」の欄があるテンプレートならどれでも適用できます。左右ボックス内の装飾テンプレート設定から個別に色指定が可能。背景に画像を入れる、太字にするなどは不可。全体設定を一括で変更する箇所も用意されています。ちなみに個別に設定した後、全体の設定画面から変更をかけると個別設定が解除され、統一されてしまうので、個別に変えたい場合は個々に設定していった方がベター。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。