{"id":18267,"date":"2020-12-01T08:55:01","date_gmt":"2020-11-30T23:55:01","guid":{"rendered":"http:\/\/raku2bb.com\/faq\/?p=18267"},"modified":"2025-09-05T15:27:58","modified_gmt":"2025-09-05T06:27:58","slug":"02-0684","status":"publish","type":"post","link":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/design\/02-0684\/","title":{"rendered":"\u57fa\u672c\u8a2d\u5b9a\uff1e\u30ab\u30fc\u30c8\u30b7\u30b9\u30c6\u30e0\u8a2d\u5b9a\uff1e\u30c7\u30b6\u30a4\u30f3\u95a2\u9023\u8a2d\u5b9a"},"content":{"rendered":"

概要<\/h2>\n\n\n\n

サイト内のパーツデザインや文字・背景色の設定を行う画面です。
具体的にどこのカラーを変更できるかについては、以下の資料をご参照ください。<\/p>\n\n\n\n

\n
<\/path><\/svg>サイトカラーの設定について（PDF）<\/span><\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

※2023年12月頃に初期デザインの変更を実施したため、それ以降に管理画面をお渡ししたユーザー様におかれましては、
原則として「パンの卸売り専門店『BAKERY PRO』」という店舗が表示されるようになっています
※旧デザインをご利用の場合は、こちらのページ<\/a>をご確認ください<\/p>\n\n\n\n

設定画面<\/h2>\n\n\n\n

基本設定 ＞ カートシステム設定<\/span> ＞［デザイン関連設定］タブ<\/p>\n\n\n\n

サイトデザイン<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
項目<\/th>内容<\/th><\/tr><\/thead>
レイアウト<\/td>サイトデザインのバリエーションを選択します。初期状態では右側が選択されています。
\"\"\/

※従来はサイトの段組み（カラム数）<\/strong>を変更する項目でしたが、
2023年12月頃に実施した「初期デザインの改修」に伴い、
デザイン変更のみ行う項目となっています<\/td><\/tr>
メインカラー
ベースカラー
アクセントカラー
メッセージカラー
…など<\/td>		各種カラーの変更が可能です。
設定したカラーがどの要素に反映されるかは、PDFをご参照ください。

 <\/span>サイトカラーの設定について（PDF）<\/a><\/td><\/tr>
フォントファミリー<\/td>フォントを選択してください。
初期値は「-apple-system…」です。
※Internet Explorerは非対応です<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

購入フローステップ<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
項目<\/th>内容<\/th><\/tr><\/thead>
PCタイプ<\/td>PC版の購入フローのステップ画像を選択してください。
初期値は「標準」です。
\"\"<\/td><\/tr>
強調カラー（背景）<\/td>購入フローステップの強調カラーを選択してください。<\/td><\/tr>
強調カラー（文字）<\/td>購入フローステップの強調カラーの箇所に適用される文字色を選択してください。<\/td><\/tr>
スマホタイプ<\/td>SP版の購入フローのステップ画像を選択してください。
初期値は「標準」です。<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

おすすめバリエーション<\/h3>\n\n\n\n

おすすめのカラーテンプレートを５種類ご用意しています。
選択すると、サイトデザインと購入フローステップが自動的に選択されます。<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

 <\/span>バリエーション選択時の挙動<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

バリエーションを選択すると、上部のカラーが自動で切り替わります。
選択後に【設定を保存する】ボタンをクリックすると、初期カラーに戻せなくなるため、ご注意ください。<\/p>\n\n\n\n

商品画像拡大<\/h3>\n\n\n\n

商品詳細ページに表示される画像の拡大方法を選択してください。
※PC版のみ初期値は「facebox」です。<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
facebox <\/h5>\n\n\n\n

\n\n商品画像をクリックすると、画像登録サイズでモーダル表示されます。\n\n<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
raku2loupe <\/h5>\n\n\n\n
\"\"<\/figure>\n\n\n\n

※PCテンプレートC,F,Gではご利用になれません
※サムネイル画像数は9枚までとなります
※画像推奨サイズ：1000px×1000px以上<\/p>\n\n\n\n

使用しない<\/h5>\n\n\n\n

画像拡大なしとなります。<\/p>\n\n\n\n

スライダー設定<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
項目<\/th>内容<\/th><\/tr><\/thead>
使用スライダー（PC）<\/td>PC版のスライダーの種類を選択してください。
jQueryプラグインが切り替わります。<\/td><\/tr>
使用スライダー（スマートフォン）<\/td>SP版のスライダーの種類を選択してください。
jQueryプラグインが切り替わります。
※slickを利用する場合はスマートフォンのトップページからbxSliderの記述を削除してください。<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

顧客情報入力<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n\n\n<\/colgroup>\n\n\n\n\n\n\n
項目<\/th>\n内容<\/th>\n<\/tr>\n<\/thead>\n
必須表示内容<\/td>\n必須部分に表示される文言の設定が可能です。
未設定の場合は「※」が表示されます。
\"\"<\/td>\n<\/tr>\n
デザイン（PC）<\/td>\nPC版の必須部分のデザインの変更が可能です。
「.required_label{}」にスタイルを指定してください。
（例）
\"\"<\/td>\n<\/tr>\n
デザイン（スマートフォン）<\/td>\nSP版の必須部分のデザインの変更が可能です。
「.required_label{}」にスタイルを指定してください。
（例）
\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n

補足情報<\/h2>\n\n\n\n

本機能で文字色や背景色を指定した場合、画像のように一瞬 別の色が表示される場合があります。<\/p>\n\n\n\n

\"\"
 <\/span>上のアニメーションは、再生速度を落としています<\/figcaption><\/figure>\n\n\n\n

「ちらつき」を避けるためには、デザイン(PC\/SP) ＞ スタイルシート設定<\/span> より【import.css】を編集ください。
本機能で設定した色と同一色になるよう<\/strong>CSSに記載をお願いします。<\/p>\n\n\n\n

記述例<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


編集前：background-color: var(--main-color);
編集後：background-color: #3a5894;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

概要 サイト内のパーツデザインや文字・背景色の設定を行う画面です。具体的にどこのカラーを変更できるかについては、以下の資料をご参照ください。 ※2023年12月頃に初期デザインの変更を実施したため、それ以降に管理画面をお・・・<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[11,25,5,24],"tags":[],"class_list":{"0":"post-18267","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-config","7":"category-set-design","8":"category-design","9":"category-basis"},"views":1844,"_links":{"self":[{"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/posts\/18267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/comments?post=18267"}],"version-history":[{"count":69,"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/posts\/18267\/revisions"}],"predecessor-version":[{"id":47187,"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/posts\/18267\/revisions\/47187"}],"wp:attachment":[{"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/media?parent=18267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/categories?post=18267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ec.smaregi.jp\/b2b\/professional\/faq\/wp-json\/wp\/v2\/tags?post=18267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}