無料ネットショップサービス『ShopStar(ショップスター)』

サポートマニュアル

Webパーツ編集

ショップ管理ツールのテンプレート編集画面では、主にマウス操作でデザインを編集できます。

テンプレートは、Webパーツと呼ばれるオブジェクトをドラッグ＆ドロップしながらデザインのレイアウトを調整していきます。
Webパーツは、「検索」や「お知らせ」などといったショップサイトに表示する機能ごとに用意されています。テンプレート編集画面では、画面右側にあるWebパーツパレット領域から画面中心にある配置領域に移動させながらレイアウトを編集していきます。

テンプレート編集の各手順

ショップ管理ツール左メニューから「デザイン」＞「テンプレート」を選択して、テンプレート画面を表示してください。

テンプレート編集画面の表示

そして、編集したいテンプレートの「編集」ボタンを選択することで、テンプレートを編集できます。

編集領域の切り替え

テンプレート編集画面より、「PC用レイアウト」、「スマホ用レイアウト」および、「画像設定」をそれぞれ選択し、表示を切り替える。
「PC用レイアウト」および、「スマホ用レイアウト」を選択した際の「共通部分」、「トップ」、「商品詳細」、および「カラー」をそれぞれ選択し表示を切り替える。

「PC用レイアウト」は、パソコンでショップサイトを表示した際に適用されるレイアウトを設定できます。
「スマホ用レイアウト」は、スマートフォンやタブレットでショップサイトを表示した際に適用されるレイアウトを設定できます。
「画像設定」は、テンプレートが予め設定している画像や、Webパーツで使用する画像をアップロードできます。

Webパーツの配置

右側の「★Webパーツパレット」にある任意のWebパーツを、左側の「ヘッダ」、「サイド」または、「フッタ」のいずれかの領域にドラッグ＆ドロップする。
必要であれば、1でドロップしたWebパーツを再度ドラッグして、別の領域にドラッグ＆ドロップする。
「保存」もしくは「保存してプレビュー」または「適用」もしくは「適用してプレビュー」ボタンを押下して、変更したパーツの配置を保存する。

「共通部分」領域では、ショップサイトの何れのページにも共通して使用される領域に配置するWebパーツを設定できます。
同様に「トップ」領域では、ショップサイトのトップページのうち、共通部分に含まれない部分を設定できます。
また、「商品詳細」領域では、商品１点を紹介するページのうち、共通部分に含まれない部分を設定できます。これらは、「スマホ用レイアウト」でも同様です。

保存とサイト適用の関係

編集結果を保存する場合、ショップサイトに適用中のテンプレートは、保存した内容がそのままショップサイトに適用されます。そのため、試験的に配置してプレビューしたい場合は、適用中のテンプレートをコピーした、適用中でないテンプレートでテストすることが推奨されます。

Webパーツの設定の編集

本画面では、配置したWebパーツをどのように出力するかを設定できます。

テンプレート編集画面を表示し、Webパーツを配置する。
1で配置したWebパーツのボタンを選択する。
表示されるダイアログの各項目に値を設定する。
「登録」ボタンを選択する。
「保存」もしくは「保存してプレビュー」または「適用」もしくは「適用してプレビュー」ボタンを押下して、編集したパーツの内容を保存する。

なお、ダイアログに表示される項目は、Webパーツの種類によって異なります。

Webパーツの設定のHTML編集

これは上級者向けの機能です。
本画面では、配置したWebパーツの出力を独自のデザインに変更することができます。

テンプレート編集画面を表示し、Webパーツを配置する。
1で配置したWebパーツのボタンを選択する。
表示されるダイアログのHTML編集タブを選択します。
表示されるHTMLを編集します。
「登録」ボタンを選択する。
「保存」もしくは「保存してプレビュー」または「適用」もしくは「適用してプレビュー」ボタンを押下して、編集したパーツの内容を保存する。

HTMLを編集する場合は、カスタムタグを使った編集も可能です。
カスタムタグの詳細は、デザインリファレンスをご確認ください。

Webパーツの削除

本画面では、配置したWebパーツを削除できます。

テンプレート編集画面を表示し、任意の領域でWebパーツを配置する。
1で配置したWebパーツのボタンを選択する。
表示される確認ダイアログで「OK」ボタンを選択する。

カラー編集

テンプレート編集画面を表示し、任意の領域の「カラー」領域に切り替える。
テキストボックスにHTMLで定められているカラーコードを記入するか、アイコンを選択して、マウスで色を選択して、色情報を設定する。
「保存」または「適用」ボタンを選択する。

テンプレートでは、テンプレートの作者が予め設定した編集可能な色情報をリストアップしています。
カラー編集では、これらを、上記の方法で設定できます。
この機能は、「PC用レイアウト」および、「スマホ用レイアウト」の両方で同じように動作します。
なお、「初期化」ボタンを選択すると、テンプレートが設定している初期の色設定が入力されます。

画像設定

テンプレート編集画面を表示し、「画像設定」領域に切り替える。
「画像選択」ボタンを選択し、表示された画像選択ダイアログを介して画像をアップロードする。
任意の画像を選択し、「選択した画像を挿入」ボタンを選択する。
「保存」または「適用」ボタンを選択する。

テンプレートでは、テンプレートの作者が予め設定した編集可能な画像情報をリストアップしています。
画像編集では、これらを、上記の方法で変更できます。なお、「初期化」ボタンを選択すると、テンプレートが設定している初期の画像が設定されます。

テンプレートのプレビュー

テンプレート編集画面を表示し、任意の領域の「共通部分」「トップ」または「商品詳細」領域に切り替える。
「保存してプレビュー」ボタン、または「適用してプレビュー」ボタンを選択する。
領域に応じたプレビューが表示される。

スマートフォンサイトのプレビューには対応しておりません。
スマートフォンサイトのプレビューを確認したい場合は、GoogleChromeなどのブラウザに付いているスマートフォンのエミュレーション機能をご利用ください。

リロード

本画面では、リロードすることで、保存していないデータをクリアすることができます。

テンプレート編集画面を表示する。
「リロード」ボタンを選択する。

項目の説明

Webパーツ

メニュー: リンクメニューを作成するWebパーツです。
商品検索: 商品検索のセットを作成するWebパーツです。
カテゴリ: カテゴリ画面でカテゴリのリストを作成するWebパーツです。
商品リスト: 特定の商品リストを作成するWebパーツです。商品リストで表示できる商品は、特定にグループに属しているか、特定のカテゴリに属しているか、最近チェクした商品です。
お知らせ: お知らせ一覧を表示するWebパーツです。
レビュー情報: 最近投稿されたレビューのリストを作成するWebパーツです。
フリーエリア: 自由にHTMLを記述できる領域を作成するWebパーツです。
ソーシャルボタン: 複数のソーシャルボタンのセットを作成するWebパーツです。
商品詳細: 商品を購入するために必要な最低限の情報セットを作成するWebパーツです。
商品フリーテキスト: 商品登録画面で商品ごとに設定されている自由に設定されたHTML領域を作成するWebパーツです。
商品レビュー: その商品のレビューのリストを作成するWebパーツです。
商品のお問い合わせ: その商品に対して問い合わせを行うためのリンクを作成するWebパーツです。

各Webパーツの説明

各Webパーツ共通

Webパーツのタイトル: WEBパーツ上部に表示するタイトルを指定します。フリーエリア以外のWebパーツタイトルは、【画面上にタイトルとアイコンを表示する】をチェックするとショップに表示されます。このタイトルを変更することで、本画面上に配置された要素の名前を変えることができます。

メニュー

表示名: ここで設定する表示名に対して、ショップサイトでリンクが設定されます。アイコンか表示めのどちらかに対して値を設定することで、メニューをデザインできます。
アイコン: ここで設定するアイコンに対して、ショップサイトでリンクが設定されます。アイコンか表示めのどちらかに対して値を設定することで、メニューをデザインできます。
リンク先: リンク先を設定します。リンク先は、ドロップダウンメニューから選択できます。任意のURLや、グループページなども設定できます。