マイテンプレート設定

マイテンプレートとは

加盟店が登録した商品情報は、マスタテンプレートを複製したマイテンプレートを基にして、ネットショップとして生成・公開されます。商品ページ以外のネットショップを構成する要素として、特定商取引に関する表示、商品カテゴリなどのショップ画面と、注文手続き、マイページなどのカート画面も、マイテンプレートを基にして、ページが生成・公開されます。

マスタテンプレートは、カート管理画面で選択することができます。

マスタテンプレート間での共通したレイアウトはなく、各マスタテンプレートにて独自のレイアウトとなります。

カート管理画面にて自ネットショップに適用したいデザインを選択し、追加すると、HTMLやCSSが複製され、そのネットショップ専用のマイテンプレートとなります。コピーされたマイテンプレートのHTMLの一部とCSSは自由に編集できます。

カート管理画面では、複数のマイテンプレートを保持でき、そのうち一つがネットショップ公開用に使用されます。（ネットショップで使用するマイテンプレートは随時切り替え可能）

保持されたマイテンプレートは、画面部品ごとのHTMLやCSSがあり、その中に商品情報などに置き換える置換タグが含まれています。置換タグはネットショップのページ表示時に置換出力されます。

以下の構成部品のHTMLやCSSを設定できます。

No.	編集画面	構成部品	説明
１	ショップ画面	共通部分	ショップ画面のヘッダー・フッター・ナビゲーションなど共通部分のHTMLと、全てのショップ画面で出力されるCSSを設定できます。
２		トップ	ショップ画面のトップHTMLと、トップのみ出力されるCSSを設定できます。
３		商品一覧	商品一覧（カテゴリなど）のHTMLと、商品一覧のみ出力されるCSSを設定できます。
４		商品一覧 (キーワード検索)	商品一覧（キーワード検索）のHTMLと、商品一覧（キーワード検索）のみ出力されるCSSを設定できます。
５		商品詳細	商品詳細のHTMLと、商品詳細のみ出力されるCSSを設定できます。
６		404 Not Found	らくうるカート上に存在しないページ（商品ページを削除した場合など）へアクセスした際に表示されるページのHTMLとCSSを設定できます。
７		ランディングページ	ランディングページのヘッダー・フッターなど共通部分のHTMLと、ランディングページで出力CSSを設定できます。
８		会員限定ログインページ	会員限定ログインページのHTMLと会員限定ログインページのCSSを設定できます。
９		共通IDログインページ	共通IDログインページのHTMLと共通IDログインページのCSSを設定できます。
１０	カート画面	共通部分	全てのカート画面で出力されるCSSを設定できます。 ImportantHTMLについてカート画面のHTMLは編集できません。 Attentionsカート画面のURLについてレギュラープラン・アドバンスプランご利用でも以下の共有ドメインでの表示となります。 https://cart.raku-uru.jp/

ショップ画面

共通部分は、全体の枠となる部分のHTMLやCSSです。

全体の枠となる部分の他に、コンテンツが差し込まれる箇所（メインコンテンツ箇所）があります。

トップ・商品一覧・商品一覧（キーワード検索）・商品詳細のHTMLは、メインコンテンツ箇所に差し込まれます。

例：ブラウザにてトップページが読み込まれる際に、共通部分の枠にトップのHTML（コンテンツ）が差し込まれます。また同時に、共通部分CSS＋トップCSSのCSSが出力されます。

ImportantHTML編集不可なショップ画面ページ

ショップ画面の以下ページでは、メインコンテンツ箇所HTMLは編集できませんのでご注意ください。

特定商取引法に基づく表示
個人情報保護方針
送料について
会員規約

ランディングページは、ランディングページの枠となる部分のHTMLやCSSです。

カート画面

共通部分は、カート画面全体で使用されるCSSです。

マイテンプレートの追加

マイテンプレートを追加する手順について説明します。

1業務メニューの［デザイン］をクリックしてください。

2［新規登録］をクリックします。

3追加するマスタテンプレートの［追加］をクリックしてください。

設定中マイテンプレートの切替え

1業務メニューの［デザイン］をクリックしてください。

2一覧の「通常使用設定」にて“設定中”の行のマイテンプレートにてネットショップが公開されています。
“設定中”に切替えたいマイテンプレートの［設定］をクリックしてください。

Attentions

マイテンプレート切替え時の注意事項

マイテンプレートを切り替えた場合、切り替え前のマイテンプレートに登録されていたフリーページは非表示となります。フリーページを表示するには、新たにフリーページをご登録いただく必要があります。

マイテンプレートの更新について

マイテンプレートには「簡易設定」と「HTML編集設定」があります。

簡易設定：文字色や背景色の変更など決められた項目のみを簡単な操作で変更できます。

HTML編集設定：マイテンプレートの構成部品ごとのHTMLやCSSの編集が行えます。

簡易設定の場合

1業務メニューの［デザイン］をクリックしてください。

2更新を行うマイテンプレートの［編集］をクリックします。

3ショップ画面設定、カート画面設定にてそれぞれの項目を設定します。

ショップ画面設定

番号	項目	説明
1	ロゴ画像設定ヘッダーロゴ画像出力	ショップ画面のヘッダー部分にロゴ画像を出力する場合に、「出力する」を指定してください。ヘッダーロゴ画像出力：出力するを選択した場合ヘッダーロゴ画像を登録する項目が表示されます。
2	フッターロゴ画像出力	ショップ画面のフッター部分にロゴ画像を出力する場合に、「出力する」を指定してください。
3	背景設定　色	ショップ画面の背景色の設定です。
４	背景設定背景画像出力	ショップ画面に背景に画像を使用する場合に、指定してください。以下から選択して設定できます。出力しない全体配置（タイル状に配置されます）縦方向繰り返し（左右中央で縦一列に配置されます）横方向繰り返し（最上部で横一列に配置されます）繰り返しなし（最上部中央で１枚配置されます）「出力しない」以外を指定した場合背景画像を登録する項目が表示されます。
５	文字色設定通常文字色	ショップ画面の文字色の設定です。
６	文字色設定リンク文字色	ショップ画面のリンク文字色の設定です。
７	文字色設定リンクアクティブ文字色	ショップ画面のリンクアクティブ文字色（リンクにマウスを合わせた際の文字色）を設定できます。

カート画面設定

番号	項目	説明
1	ロゴ画像設定ヘッダーロゴ画像出力	カート画面のヘッダー部分にロゴ画像を出力する場合に、「出力する」を指定してください。ヘッダーロゴ画像出力：出力するを選択した場合ヘッダーロゴ画像を登録する項目が表示されます。 Tips 設定したロゴ画像について、既存のマイテンプレートでは、ＰＣ・スマホ共通で表示されるようになっております。また、ロゴ画像の縦横サイズも自動で縮小して表示されます。
2	フッターロゴ画像出力	カート画面のフッター部分にロゴ画像を出力する場合に、「出力する」を指定してください。
3	背景設定　色	カート画面の背景色の設定です。
４	背景設定　画像出力	カート画面の背景に画像を使用する場合に、指定してください。以下から選択して設定できます。出力しない全体配置（タイル状に配置されます）縦方向繰り返し（左右中央で縦一列に配置されます）横方向繰り返し（最上部で横一列に配置されます）繰り返しなし（最上部中央で１枚配置されます）「出力しない」以外を指定した場合背景画像を登録する項目が表示されます。
５	文字色設定通常文字色	カート画面の文字色の設定です。
６	文字色設定リンク文字色	カート画面のリンク文字色の設定です。
７	文字色設定リンクアクティブ文字色	カート画面のリンクアクティブ文字色（リンクにマウスを合わせた際の文字色）を設定できます。
８	ボタン色設定ボタン色	カート画面のボタン色の設定です。「次へ」「注文確定」などのボタンの色として使用されます。
９	ボタン色設定文字色	カート画面のボタンに使用される文字色の設定です。

4［登録］をクリックして、設定を完了させてください。

Important

ショップ画面設定、カート画面設定は［登録］がそれぞれあるのでご注意ください。

HTML編集設定の場合

マイテンプレートの編集→HTML編集設定

1業務メニューの［デザイン］→［マイテンプレート］をクリックしてください。

2更新を行うマイテンプレートの［編集］をクリックします。

3［HTML編集設定］をクリックします。

4編集する構成部品の［編集］をクリックします。

5「HTML」と「CSS」を編集し、［登録］をクリックしてください。

Tips

HTMLやCSS内で使用可能な置換タグは、入力枠右上の［置換タグはこちら］を参照ください。