スマートフォンのデザインとフリーページ

使用するテンプレートの選択や、テンプレートの編集を行います。
画面の操作方法はモバイル版のテンプレート設定画面とほぼ同じです。

下記ページにて、編集・確認することができます。

デザイン設定メニュー画面

テンプレートは、最大5個まで編集・保存可能です。

 【選択中のテンプレート】

スマートフォンで表示されるテンプレートにはマークが付きます。

 【デザイン設定】

各テンプレートの基本設定(テンプレート名、1ページの商品掲載数、商品並び順)と、デザイン編集を行います。
デザイン編集は、ページ種類ごとに「上級モード(html,cssを編集)」がご利用いただけます。
編集したデザインは、各テンプレートごとに保存されます。

 【フリーページ設定】

フリーページの使用設定と内容編集を行います。 スマートフォン用に設定できるフリーページは10ページまでです。
編集したフリーページは、各テンプレートごとに保存されます。

【選択したテンプレートを使用する】

ショップで使用するテンプレートを変更する際に使用します。

【名前を変更してテンプレートをコピー】

現在選択されているテンプレートの内容を複製して、新規テンプレートを追加する際に使用します。
名前を設定してからコピーすることができます。
テンプレートをコピーすると、フリーページの内容もそのままコピーされます。

【新規テンプレート追加】

新しいテンプレートをダウンロードする際に使用します。

 【プレビュー】

【プレビュー】をクリックすると、PC上でスマートフォン最適化された画面を確認できます。
選択していないテンプレートや、『スマートフォン表示モード』を『PC版表示』に設定している場合も、プレビュー表示が可能です。

【Preview】ボタンでの表示は、実際のスマートフォンでの表示とは異なります。目安としてお考えください。

 【URL表示】

【URL表示】をクリックすると、プレビュー用URLが表示されます。
このURLをメールでスマートフォンに送信して、表示確認することができます。
選択していないテンプレートや、『スマートフォン表示モード』を 『PC版表示』に設定している場合も、【URL表示】ボタンをクリックして表示されたURLからアクセスすると表示確認が可能です。

プレビュー用URLは 一日限定のURLです。 ブックマーク等には登録せず、利用する都度【URL表示】ボタンをクリックして、URLをご確認ください。

『このURLをメールで送る』をクリックすると、メーラーが起動し、メール本文に確認用URLが自動入力されます。
 

スマートフォン版のデザイン設定(上級)

使用するテンプレートを、上級モードで編集を行います。
【編集中のテンプレートを確認するには】 プレビュー ボタンをクリックすると、編集中のショップ画面を確認できます。
(※【Preview】ボタンでの表示は、実際のスマートフォンでの表示とは異なります。目安としてお考えください。)

下記ページにて、編集・確認することができます。

編集するテンプレートを選択します。

【デザイン設定】画面で、編集するテンプレートの【デザイン設定】ボタンをクリックします。


編集するテンプレート種類を選択します。

【テンプレート名の編集】

使用するテンプレート名を編集できます。
『オリジナル名称』の欄には、テンプレートをダウンロードした際のオリジナルテンプレート名称が表示されます。

【商品一覧時の設定】

並び順の初期設定
カテゴリー(グループ)別商品一覧、商品検索結果での、商品の並び順を設定します。
  • おすすめ順
    • 設定した表示番号順に表示されます。
    • 表示番号の設定がない場合、登録の古い商品から順に表示されます。
  • 価格順
    • 価格の安い順に表示されます。
  • 新着順
    • 登録の新しい商品から順に表示されます。
表示商品数
カテゴリー(グループ)別商品一覧、商品検索結果での、1ページに表示される商品数を設定します。

【フリーページ編集】

現在選択中のテンプレートの、フリーページ設定画面へ移動します。

【フリーページ設定】 の説明はこちら

【テンプレート種類一覧】

テンプレート種類一覧が表示されますので、設定を行うページの【HTML・CSS編集】をクリックしてください。


HTML・CSSの編集を行います。

【HTML編集】

HTMLを表示しています。 編集エリアは、<body> 要素以下から設定されています。
<{**********}> のように記述されている箇所は独自タグとなります。
消去されますと正常な動作が出来なくなりますのでご注意ください。例: <{ $logo }> 等

この項目はHTML編集が可能な場合のみ表示されます。
HTMLの文字数は半角65,530文字が上限となっています。

【CSS編集】

設定されているCSSを表示しています。

この項目はCSS編集が可能な場合のみ表示されます。
CSSの文字数は半角65,530文字が上限となっています。

【編集エリア拡大】

クリックすると編集エリアが拡大されます。

【編集エリア縮小】

クリックすると編集エリアが縮小されます。

【入力支援ツールで編集】

クリックすると、文字の色や大きさを変更したり画像挿入用のHTMLタグを入力する支援ツールが別ウィンドウで表示されます。

【入力支援ツール】 マニュアルはこちら

【更新】

【更新】ボタンを押すと、編集内容を保存します。

【もどる】

【デザイン設定】画面に戻ります。

編集完了後、【更新】ボタンをクリックします。

確認のアラートが表示されますので、【OK】ボタンをクリックします。
以上で設定は完了です。

【デザイン設定】 に戻る

スマートフォン-フリーページ設定

フリーページの設定を行います。
【編集中のテンプレートを確認するには】 プレビュー ボタンをクリックすると、編集中のショップ画面を確認できます。
(※【Preview】ボタンでの表示は、実際のスマートフォンでの表示とは異なります。目安としてお考えください。)


下記ページにて、編集・確認することができます。

編集するテンプレートを選択します。

【デザイン設定】画面で、編集するテンプレートの【フリーページ設定】ボタンをクリックします。


フリーページの編集を行います。

【ページタイトル】

フリーページのページタイトルを設定します。
タイトルを空欄にする場合、使用設定を「使用しない」にして更新してください。 タイトルにタグは使用できません。

【ページタイトルのリンク表示】

設定したフリーページのタイトルをショップに表示するかしないかの設定を行います。
【表示しない】に設定した場合、そのフリーページへのテキストリンクはショップ上で非表示になります。
【表示しない】に設定した場合でも、フリーページのURLに直接アクセスするとページを見ることが可能です。

【HTML編集】

HTMLを表示しています。 編集エリアは、<body> 要素以下から設定されています。
<{**********}> のように記述されている箇所は独自タグとなります。
消去されますと正常な動作が出来なくなりますのでご注意ください。

例: <{ $logo }> 等

※この項目はHTML編集が可能な場合のみ表示されます。
※HTMLの文字数は半角65,530文字が上限となっています。

【フリーページ編集】

現在選択中のテンプレートの、デザイン設定画面へ移動します。

【デザイン設定】 の説明はこちら

【更新】

【更新】ボタンを押すと、編集内容を保存します。

【もどる】

【フリーページ設定】画面に戻ります。


編集完了後、【更新】ボタンをクリックします。

確認のアラートが表示されますので、【OK】ボタンをクリックします。
以上で設定は完了です。

【デザイン設定】 に戻る