独自デザインよくある質問

デザインのノウハウは MakeShopサポートも合わせてご参照ください。

低価格でバナー作成やコーディングをしてほしい場合には「おてがるリニューアルサービス」「コーディング代行プラン」
サイト全体の構成から細部にいたるまでフルオーダーしたい場合は「こだわりデザインサービス」までお気軽にお問合せください。

全体/トップページ
商品分類画面
商品詳細画面
買い物カゴ画面
独自ページ
その他

全体/トップページ

Qグローバルナビゲーションなどをマウスオーバーした時に画像を切り替える方法を教えてください。

ACSSでの切り替え（CSSスプライト等）、JavaScriptでの設定のいずれも可能です。ショップ様でお好みの方法をご利用ください。

■画像の入れ替えではなく画像を透過する
ボタン画像は1枚ですが、マウスオーバー時に透過度を変更することで色を変更する方法がございます。

記述例）
<a href=[HOME]><img class="alpha" src="・・.gif"></a>

img要素にclass名「alpha」を指定しています。
リンク画像にマウスオーバーした時にこの「alpha」のimg（画像）要素を透過するスタイルを下記のように設定します。

スタイルに記述：
a:hover img.alpha {
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}

70%に透過する指定となります。

実装例）
弊社プレミアムプランデモショップの例　検索ボタンなどに指定しています。

■CSSでの設定の場合
マウスONとOFFの画像を1枚にまとめた画像を表示し、起点から算出した座標軸の数値で表示位置を切り替える方法が多く用いられております。
「ロールオーバー　画像の切り替え」　「CSSスプライト」などで検索していただきますと作成方法をご参照いただくことができます。→Google検索

■JavaScriptでの設定の場合
画像を切り替えるスクリプトを宣言後、aまたはimgタグに「swapImage()・・」のような指定を記述する方法です。
（弊社のサポート対象外となりますため、詳細は割愛させていただきます）

■ソースに直接記述する場合
<img src="●●.jpg　onMouseOver="this.src='○○.jpg'" onMouseOut="this.src='●●.jpg'">
上記のようにimgタグに記述する方法がございます。旧来の方法で、タグ内の記述は長くなります。

いずれの方法も、ON・OFF時の画像をご用意いただき【独自デザイン】>【ファイル管理】>【100MBサーバー】にアップロードしてご利用ください。

Q【イントロページデザイン】イントロページをショップのトップページにしたい。（非推奨）

A イントロページは主に閉店中のショップの看板としてのご利用を想定した機能のため、通常のショップのトップ画面としてのご利用は推奨させていただいておりません。トップページには【中央画面管理】で表示される、index.htmlをご利用いただきますようお願いいたします。
イントロページをトップページにご設定された場合でも、仕様上/index.htmlに遷移する箇所がございます。
/index.htmlにリダイレクト（refresh）を指定し強制的にイントロページへ遷移させる方法はございます。

【独自デザイン】 > 【トップページデザイン】 >【中央画面管理】に下記のタグを記述します。

<meta http-equiv="refresh" content="0; url=http://***.jp/">

0秒でジャンプするという設定ですが、閲覧者の通信速度により表示までの時間には差異がございます。
また、仕様上metaタグをheadタグにご追記いただくことができないため、文法上は正しい記述ではありません。

■仕様
イントロページは主に閉店中のショップの看板としてのご利用を想定した機能です。
「新商品」「おすすめ商品」などトップページ表示用の機能は、全て【中央画面管理】でご利用いただくことのできる機能となり、イントロページにはこれらの機能がございません。
イントロページをご利用いただきますと、通常トップページへのリンクが「/index.html」から「/」に変更されますが、

・ログイン後
・ログアウト後
・決済完了後
・決済画面の右上「トップページへ」のリンク先
　は、「/index.html」にリンクします。こちらは仕様のためショップ様側でご変更いただくことができません。

【関連】BtoB設定にしていますが、ヘッダー（上段メニュー）のナビゲーションからHOMEをクリックするとイントロページのログインに戻ってしまいます。
BtoBショップのトップも含め、イントロページをご利用いただきますと、通常トップページへのリンクが「/index.html」から「/」に変更されます。
お手数ですが、BtoBショップをご利用の場合は【上段メニュー管理】グローバルナビゲーションのリンク先を
<a href=[HOME]>　から　
<a href="/index.html">　にご変更ください。

Q【中央画面管理】「スペシャル商品」を「新商品」「おすすめ商品」と同様に表示したい。（不可）

A「スペシャル（目玉）商品」の表示形式は新商品・おすすめ商品とは異なります。 1行に1～3商品を表示します。
「スペシャル（目玉）商品」は、「新商品」「おすすめ商品」と同様に【商品の登録/修正】の「陳列位置」の選択にて表示位置を変える仕様ですので、それぞれの商品の見せ方は自由です。
「新商品」などのタイトルをご変更いただくことで別の用途にもご利用いただくことができます。
それぞれの陳列形式をご活用いただき、ショップ様の運営に最適なご利用をご考慮いただけますと幸いです。

※『イーレコメンド』をご利用いただくことでかんたん操作で『おすすめ』『新商品』『PVランキング』を自動表示できます。
→イーレコメンドはこちら

■仕様
「スペシャル商品」の表示形式は新商品・おすすめ商品とは異なります。
[SPECIAL1] 1列に表示
[SPECIAL1N] 1列に表示 – タイトルが表示されません
[SPECIAL2] 横2列ずつ表示
[SPECIAL3] 横3列ずつ表示

[SPECIAL2]、[SPECIAL3]　は1商品ごとに枠線で囲まれて表示されます。商品名と価格は「商品画像の横」に表示されます。
→下記、表示例のリンクよりデモショップにてご確認ください。

[SPECIAL1] 、[SPECIAL1N] は、
【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定】「その他機能表示個数設定」→「スペシャル商品表示個数」→ラジオボタンの「〇流れる商品リスト」を選択でスクロール（マーキー）表示が可能です。

表示個数は【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定】「その他機能表示個数設定」→「スペシャル商品表示個数」で最大10個まで表示が可能です。

ご注意）
上記はトップページ（【中央画面管理】）の表示機能です。
左に表示させる場合は【左側メニュー管理】に[LEFT_SPECIAL]を記述します。
【左側メニュー管理】に[LEFT_SPECIAL]を記述すると、【中央画面管理】に上記の「スペシャル商品」の独自変数タグを記述しても無効となります。

【関連】「スペシャル商品」の商品欄を囲んで表示される枠線を消したい。
こちらはtdの背景のカラー指定で線として表示しておりますので、このtdを非表示にするCSSを指定する方法がございます。

記述例）
１）独自変数タグの外側をdivで囲み親要素名をご指定ください。
<div id="r_special">[SPECIAL2]</div>

２）この属性下のtd.line要素を非表示にご指定ください。
#r_special td.line { display: none; }

表示例）
デモショップより表示例をご参照いただくことができます。※いずれもCSSで枠線（border）を非表示にしています。
[SPECIAL1Y]を使用：カスタマイズテンプレート【プレーン】
[SPECIAL2Y]を使用：カスタマイズテンプレート【サニーポップ】
[SPECIAL3Y]を使用：カスタマイズテンプレート【シンプルモダン】

Q【中央画面管理】「トップページの新着の商品レビュー」表示がズレます。

Aショップの幅を拡大された場合にご調整が必要となります。
【独自デザイン】> 【トップページ編集】 > 【共通CSS管理】など適用中のCSSに下記のようなスタイル指定をご追記いただき、ご対応ください。

記述例）
トップページ、商品詳細画面に「全文表示」タイプを設置している場合は、それぞれをdivで囲み、別々のid（またはclass）名で親要素を指定してください。

<div id="topReview">[REVIEW_VIEW_10]</div>

.M_reviewImg{
float:left;
}

#topReview .M_reviewBox {
float:right;
width: 580px;
/width: 540px; /* IE Hack */
}

#topReview #M_reviewRead{width:580px; /width: 540px; /* IE Hack */ overflow:hidden;}

.M_reviewReadText {clear:both;}

#M_reviewViewAll {
width: 100% !important; /* 商品詳細画面のレビュー全文表示の幅を600pxよりも拡大する場合に指定 */
}

赤文字の箇所はトップページのみ適用させるため、トップページ用の親要素名から記載してご対応ください。トップページには商品の画像が入るためfloatが必要です。

カスタマイズテンプレートご利用時は既にid名が指定されていますので

#M_reviewView table{width:100% !important;}

.M_reviewHead{
overflow:hidden;
width:100%;
}
.M_reviewRead {
overflow: hidden;
width: 100%;
}
.M_reviewerInfo {
width: auto !important;
}

のようにご指定ください。

表示例）
MSデパート

■仕様
独自変数タグから一括で出力されるコンテンツは仕様のため直接削除またはご変更をおこなっていただくことはできません。
独自変数タグごとdiv要素で囲み、idまたはclass名を指定後、属性下の子要素に対しCSSでスタイル指定を追加するか、既存の要素に対しCSSでの指定を追記してご対応ください。

Q【中央画面管理】【カスタマイズテンプレート】「トップページデザイン」に改行が入り後続のコンテンツの前に大きくスぺースが空いてしまいます。

A【ショップ作成】 > 【デザインの設定】 > 【トップページデザイン】の「ソース」ボタンで編集モードを切り替えてご編集ください。
空白の生じている箇所にカーソルを合わせてDelete（後方削除）ボタンをクリックし、改行を削除してご対応ください。
入力欄では見えませんので、ソースをHTMLエディタに貼り付けてご確認いただくと判りやすくなります。

■仕様
【ショップ作成】>【デザインの設定】>【トップページデザイン】のコメント欄に入力された内容は、
【独自デザイン】>【トップページ編集】>【中央画面管理】の独自変数タグ　[SHOPINTRO]　の位置に出力されます。

この入力欄内での改行位置は<br>としてショップ画面に出力されます。
こちらのエディタ機能は　ビジネスプラン以下向けのショップ様にもご対応いただくことのできる機能としてご提供させていただいておりますが、
上記の改行の追加などがソースとして見落としやすいため、独自デザインをご利用の場合はこの機能をご利用いただかず、【中央画面管理】の[SHOPINTRO]を削除し、その箇所に【トップページデザイン】「コメント入力」のソースを直接記述していただく方法がございます。

■関連トップページに「Welcome to ***ご訪問をありがとうございます･･･」という文言が出てしまうので消したいです。
【ショップ作成】>【デザインの設定】>【トップページデザイン】の「コメント入力」欄にてご変更ください。
「Welcome to ***ご訪問をありがとう･･･」は、上記設定欄に何も設定されていない場合に表示される初期表示です。
ショップ様にてコメントをご入力いただきますと、上記の初期値は表示されなくなります。

商品分類画面

Q【商品分類画面管理】商品分類（カテゴリー一覧）画面のレイアウトを教えてください。

A[PRODUCTION_START]～[PRODUCTION_END]とした場合
↓サンプルソースをコピーしてご自由にお使いいただけます。

http://www.makeshop.jp/manual/category_taglayout_sample.html

★サンプルAタイプ

サンプルAタイプソース適用例
http://msdepart.shop13.makeshop.jp/shopbrand/004/P/

3列表示+一括で買い物かごに入れるにカスタマイズ例
http://msdepart.shop13.makeshop.jp/shopbrand/012/P/

2列表示にカスタマイズ例
http://msdepart.shop13.makeshop.jp/shopbrand/016/P/
http://msdepart.shop13.makeshop.jp/shopbrand/018/P/

★サンプルBタイプ

サンプルBタイプソース適用例
http://msdepart.shop13.makeshop.jp/shopbrand/003/P/

商品ごとに買い物かごボタン+一括で買い物かごに入れるにカスタマイズ例
http://msdepart.shop13.makeshop.jp/shopbrand/017/P/

★サンプルCタイプ

サンプルCタイプソース適用例
http://msdepart.shop13.makeshop.jp/shopbrand/002/P/

買い物かごに入れる/品切れ表示追加カスタマイズ例
http://msdepart.shop13.makeshop.jp/shopbrand/015/P/

カテゴリー表示例
【独自デザイン】>【内部ページ編集I】>【商品分類ページ管理】の一括出力での独自変数タグは商品画像を表示タイプでは記述方式が4通り（表示形式は5通り）となります。下記をご参照ください。

１）[PRODUCTION*]の場合：*に入れた数字で1列の商品数を指定します。

★[PRODUCTION1]（または[BASKETPRODUCTION1]）とした場合
http://msdepart.shop13.makeshop.jp/shopbrand/023/O/
1行1列の陳列となり、商品情報および商品詳細内容を表示します。

★[PRODUCTION2]（または[BASKETPRODUCTION2]）とした場合
http://msdepart.shop13.makeshop.jp/shopbrand/021/O/
1行2列の陳列となり、商品情報を表示します。

★[PRODUCTION3]（または[BASKETPRODUCTION3]）とした場合
http://designdemo03.shop14.makeshop.jp/shopbrand/017/O/
1行3列の陳列となり、商品情報は商品名と価格のみを表示します。

★[PRODUCTION4]（または[BASKETPRODUCTION4]）とした場合
http://msdepart.shop13.makeshop.jp/shopbrand/035/O/

★[PRODUCTION5]（または[BASKETPRODUCTION5]）とした場合
http://msdepart.shop13.makeshop.jp/shopbrand/032/O/
最大横5個（[PRODUCTION5]）まで変更可能です。

２）[PRODUCTION10_02_ffffff] とした場合（詳細表示形式）

http://msdepart.shop13.makeshop.jp/shopbrand/022/O/
1行2列、1行1商品の表示となり、商品詳細情報が表示されます。
※１）で[PRODUCTION1]とされた場合はこの表示形式と同様になります。

３）[PRODUCTION00_72_ffffff] とした場合（リスト形式）

http://msdepart.shop13.makeshop.jp/shopbrand/026/O/
リスト形式となり、買い物かごボタンが表示されます。
買い物かごボタンは0～7の8種類より選択が可能です。

４）[BASKETPRODUCTION4] とした場合「買い物かごへ一括で入れる」

http://msdepart.shop13.makeshop.jp/shopbrand/053/P/
数量入力欄が表示され、買い物かごへ商品をまとめて入れることができます。
※オプション設定のある商品はこの画面から購入できません。「オプション有」と表示します。

ご参考）
★陳列数は【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定】
「カテゴリーページ表示個数設定」より、1 ～ 50個の間で設定することができます。
1ページに最大50個まで表示可能です。

★サムネイルサイズは【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定】
「商品画像サイズ設定」より、最大800px幅まで指定することができます。

Q【商品分類画面管理】[PRODUCTION?]使用時、価格がオレンジ色になるのを変更したい。

A出力されるページ上に直接色の指定がされていますので、b要素に対して指定を追記する方法にてご対応ください。

#makebanner table table td font b { color: #0000ff; }

【独自デザイン】 > 【トップページ編集】 > 【共通CSS管理】
などに上記のようなスタイルをご追記ください。
色は任意です。お好みの色をご指定ください。必ず順に table table　を記述してください。

記述例2）
【独自デザイン】 > 【内部ページ編集I】 > 【商品分類ページ管理】の独自変数タグをdivで囲み、id（またはclass）名を指定し、その属性下の td font b要素に対してご指定ください。

<div id="categoryItemList">
[PRODUCTION?]
</div>

スタイル：
#categoryItemList td font b{background:#000999; color:#fff;}

■仕様
[PRODUCTION?]から出力される価格の色はHTML上に直接色の指定がされています。このソースをショップ様にてご変更いただくことはできません。
同じ位置の要素に対して別途CSSでご指定ください。

Q【商品分類画面管理】【商品詳細画面管理】[LIST]から出力されるパンくずリストのフォントカラーを変更したいです。

Aこちらの出力値には仕様として直接fontcolorが指定されています。
独自変数タグの外側より要素を追加し、属性下の要素に対して指定をおこなうことで制御します。

【A】「カスタマイズタイプテンプレート」をご利用の場合
　[LIST]は　div.M_topicPath　で囲まれていますので、この要素の属性下のa font要素に指定をおこないます。
【独自デザイン】>【トップページ編集】>【共通CSS管理】など適用中のCSSに下記を追記してください。

.M_topicPath a font{color:#ff0000;} 　/*【商品分類画面】のパンくずのリンクテキストへの指定*/

.M_topicPath font{color:#ff0000;}　/*【商品詳細画面】のパンくずのテキスト（最下層：リンクなし）への指定*/

【B】上記以外の場合
【独自デザイン】>【内部ページ編集I】> 【商品分類ページ管理】または
【独自デザイン】>【内部ページ編集I】> 【商品詳細画面管理】において、
パンくず表記を出力する独自変数タグ[LIST]をdivで囲みます。

<div class="M_topicPath">[LIST]</div>
idまたはclass名は任意です。
この後は【A】の場合と同様にCSSをご指定ください。

■仕様
独自変数タグ[LIST]から出力されるタグに規定のカラー指定があることが原因です。
商品分類は　a fontに指定　.親要素+半角スペース+a+半角スペース+font {color:#333;}
商品詳細は　aがないのでfontにのみ指定　.親要素+半角スペース+font {color:#333;}

Q【商品分類画面管理】【カスタマイズテンプレート】「カートに入れる」ボタンの位置を隣の商品と揃えたいです。

A画像の縦横比や商品説明の文などに差がないようにご設定ください。
または、通常の「商品詳細内容説明」文とは別に「カテゴリーの商品説明文」をご登録いただき、文章の長さをならしてご対応ください。
シンプルモダンショップの表示例をご参照ください。

■仕様
こちらは【カスタマイズテンプレート】の画面の仕様です。
商品分類（カテゴリー）画面、検索画面において下記の場合に商品あたりのボックスの高さが異なり、段差が生じます。
・画像のタテヨコ比が異なる（横長・正方形・縦長などが混在している）
・商品の説明文の長さに差がある
・商品情報（特殊表示、原産地など）の量（=長さ）に差がある

■ご参考
商品名欄の高さを固定する方法がございますが、固定されますと
・商品名が短い欄では空白が生じます。
・商品名が指定の高さを超える長さの場合は途中で切れます。

記述例）
【独自デザイン】>【トップページ編集】>【共通CSS管理】中の、#r_searchList .name要素の指定にheightプロパティをご追加ください。
#r_searchList .name { height: 70px; margin-bottom: 5px; }

商品詳細画面

Q【商品詳細画面管理】「商品について問い合わせる」のポップアップをデザインすることができますか。

A誠に申し訳ございませんが「商品について問い合わせる」のメールフォーム（[QUESTION_MAIL]で出力：/html/question_mail.html）には独自デザインの機能提供がございません。
代替として　[QUESTION_MAIL]をご利用いただかず、下記の方法がございます。

(a)「mailto:」で直接メールリンクを記述します。

または
(b)【イベント/企画】>【フォーム/アンケートの設定】>【マルチフォームの設定】で
作成の問い合わせフォームURLにリンクを記述します。（この方法のみSSL対応可）

Q【商品詳細画面管理】GMOポイントの付与率画像を表示したいです。独自変数タグ[TOKURESERVE]を書いても表示されません。

AGMOポイントのシールまたは付与率の画像は、GMOポイントに一度ログインしていただくか、またはアイテムポスト経由で閲覧されますと表示されます。よくある質問

 【アイテムポスト】>【ポイント管理】>【GMOポイントの設定】より、
「GMOポイントツールバーの表示設定」を［シールを使う］から［ツールバーを使う］にご変更ください。

■仕様
GMOポイントのシールまたはツールバー表示はどちらか１つのご選択となります。

○［シールを使う］　をご設定の場合：
【独自デザイン】> 【トップページ編集】 > 【左側メニュー管理】または【中央画面管理】にて、
独自変数タグ　[TOKUTOKU]記述の箇所に

/images/gmo_tokuP_member_shop_seal.gif が表示されます。

○［ツールバーを使う］　をご設定の場合：
ショップ上部にGMOポイントのツールバーを表示し、【独自デザイン】>【内部ページ編集I】> 【商品詳細画面管理】にて、
独自変数タグ　[TOKURESERVE]　記述の箇所に付与率の画像を表示します。

Q【商品詳細画面管理】[OPTION1]を入れるとそれ以降のレイアウトが崩れます。

A訳ございませんがこちらは　[OPTION1]の仕様となります。

<table>[OPTION1]</table>

または、管理画面の記述例と注意書きにございます通り、

<table><tr><td>[OPTION1]</td></tr></table>

と記述していただき、[OPTION1]部分のみtable構造を完結させてください。

Q【商品詳細画面管理】ページ内に「買い物かごに入れる」ボタンを複数個設置したいです。

A「買い物かごに入れる」ボタンは、[IF]、[END]、[ELSE]、[ENDIF] の独自変数タグが【商品詳細画面管理】で1回のみ有効な動作仕様となっております。
「品切れ表示」を含む（正常に動作可能な）「買い物かごに入れる」ボタンはページ内に1か所のみの設置となります。

[GETBASKET]は2箇所以上に記述することは可能ですので、「買い物かごに入れる」ボタンは複数個の表示は可能ですが、品切れ時の切り替えの動作は1個のみとなり、2個め以上からは「品切れ」表示に変わらず「買い物かごに入れる」ボタンが表示されてしまいます。
その場合、ボタンをクリックするとアラートが表示されかごには入れられず、画面も遷移しません。

・現状の仕様上での動作となります。将来の継続的な動作保障をいたしかねますため推奨させていただいておりません。
・本来買い物かごボタンは1か所のみの設置を想定したプログラム構成となりますため品切れの場合の表示切替は1か所のみとなります。

商品が品切れの「品切れ」に入れ替わる箇所は1か所のみとなり、それ以外は品切れ表示の独自変数タグは文字列として出力されます。
2個以上設置した買い物かごボタンはそのまま表示されてしまいます。
ただしボタンをクリックするとアラート（「商品が品切れ状態です」）が表示され、かごには入れられず、画面も遷移しません。
従いまして、在庫が無制限の商品で、かごに入れるボタンのみを複数個設置されたい場合には有効です。
上記をご理解いただきました上で設置をご検討ください。

Q【商品詳細画面管理】価格表記を変更したい。（オプション設定時以外）

A商品にオプションを設定していない場合、出力される要素のid名を用い、その属性下の子要素に対してCSSを指定します。

【独自デザイン】> 【トップページ編集】 > 【共通CSS管理】などに記述します。

/* 価格（数字）の文字色　*/
#M_usualValue td { font-size: 16px !important; color:#ff0000;}　
/* 「価格」の文字色　*/
#M_usualValue td font { color:#000333;}
/* ポイント（数字）　*/
span#M_point {font-size:16px; color:#000333;}

・値は任意です。お好みのフォントサイズ、カラーコードにてご指定ください。
・ポイントは数字のみの変更方法となります。
・#M_itemInfo　のtd要素全体に対してフォントサイズを変更することも可能ですが、
その場合は「ポイント」「数量」などの文言のフォントも全て拡大されます。

独自変数タグより出力されますコンテンツは仕様のため直接削除またはご変更をおこなっていただくことはできません。
独自変数タグの外側にid（またはclass）を充て、その属性下に指定をおこなう方法にてご対応ください。

上記の方法は商品にオプションを設定していない場合の指定方法です。
商品にオプションを設定されました場合は価格の出力形式が異なります。
→ サポートサイト：「価格の表示が小さくなってしまう時の対処方法【オプション/オプショングループ編】」

Q【商品詳細画面管理】商品情報の文言を変更したい／数量変更ボタン（△▽）を変えたい。

A【独自デザイン】> 【内部ページ編集I 】>【商品詳細画面管理】の独自変数タグ
[INFO]のご利用時は、数量変更ボタンのみをご変更いただくことができません。文言も変更できません。
[INFO]は商品情報を一括で出力します。

対応）
変更されたい場合は[INFO]を削除し、[INFO]の部分に表示したい項目を管理画面の一覧表に従って記述します。

記述例）
[INFO]
↓削除し、項目ごとに書き換え

<ul>
<li>価格：[PRICE]円</li>
<li>[ADDCODE]</li>
<li>メーカー：[PRODUCTION]</li>
<li>ポイント:[RESERVE]ポイント</li>
<li><table><tr><td>[OPTION1]</td></tr></table></li>
<li>[OPTION2]</li>
<li><table><tr><td>数量 : [QUANTITY]</td>
<td><a href=[UPCOUNT]><img src=”/images/original_design_default/samplesource/3/r_basketUp.png”></a><br>
<a href=[DOWNCOUNT]><img src=”/images/original_design_default/samplesource/3/r_basketDown.png”></a></td></tr></table>
</li>
</ul>
[ENDFORM]

数量変更のボタン△▽の変更は、それぞれimgタグにて画像にご変更も可能です。
[QUANTITY]と[ENDFORM]は必須です。こちらを削除および順序を入れ替えると動作に影響します。
オプションを設定されている場合は[OPTION1][OPTION2]も必須です。

<ul>
<li>Price：[PRICE]円</li>
<li>[ADDCODE]</li>
<li>Maker：[PRODUCTION]</li>
<li>Point:[RESERVE]Pt</li>
<li><table><tr><td>[OPTION1]</td></tr></table></li>
<li>[OPTION2]</li>
<li><table><tr><td>Lot : [QUANTITY]</td>
<td><a href=[UPCOUNT]><img src="/images/common/basket_up.gif"></a><br>
<a href=[DOWNCOUNT]><img src="/images/common/basket_down.gif"></a></td></tr></table>
</li>
</ul>
[ENDFORM]

ご注意）
表示しない項目は省略が可能ですが、必須の項目（[QUANTITY]、[OPTION1]、[OPTION2]、[ENDFORM]）が抜けないようご注意ください。

表示例）
デモショップ【プレーン】ホワイト
独自変数タグ［INFO］を項目ごとのタグに書き換えています。

【関連】数量変更ボタンを削除（非表示に）したいです。

上記手順にて削除が可能です。または
【[INFO]利用のまま数量変更ボタンを非表示にする場合】
[INFO]を<div>で囲み親要素としてid（またはclass）名を指定します。

<div id="M_itemDetailInfo">[INFO]</div>

【独自デザイン】> 【トップページ編集】 > 【共通CSS管理】
適用中のCSSに下記のスタイル指定をご追記いただき、お試しいただきますようお願いいたします。

#M_itemDetailInfo a img { display : none; }

Q【商品詳細画面管理】テンプレートの商品詳細画面の幅を拡大したい→【16】番以降は可

A商品詳細画面のテンプレートにid名、class名が充てられているタイプである
【ショップ作成】>【デザインの設定】>【商品詳細画面デザイン】
【16】番以降のテンプレートの場合は【共通CSS管理】に別途スタイルを指定することで幅の変更が可能です。
【15】番以前のテンプレートは幅の変更ができません。

記述例）
/*　product Detail */
div#main{ width:760px !important; text-align:center;}
div#main p#item{ width:740px !important; margin:0 auto;}
div#main #itemDetail,
div#main #detailInfo, div#moreDetail { width:740px !important; margin:auto;}
div#itemInfo {width: 380px !important;}

など　
div#main、p#item、div#itemDetail等にwidthが指定されておりますので、これらのdiv要素に対して指定したものを【共通CSS管理】ご追記ください。
「!important」と記述していただくことで後述の指定を仕様に割り込ませ優先的に適用させます。

■仕様
【ショップ作成】>【デザインの設定】>【商品詳細画面デザイン】で選択する画面テンプレートは、
「カスタマイズテンプレート」ではなく旧来の「デザインテンプレートベーシックタイプ」に準拠しておりますので[商品詳細内容入力]「PC用メイン商品説明文」の幅が560px、メイン画面の幅が680px程度に指定されています。

ご参考）
「カスタマイズテンプレート」をご利用の場合は
【独自デザイン】>【内部ページ編集I】>【商品詳細画面管理】
でのソースのご利用を推奨させていただいております。

「商品詳細が上」「商品詳細が下」等に位置を入れ替えたい場合には独自変数タグ[DETAIL]の位置（順序）を入れ替えてご対応ください。
下記にソース例がございますのでご参照いただき、ご不明点は「デザイン質問掲示板」にお問い合わせください。
デモショップの例）
デモショップ【プレーン】商品名と商品詳細を上に移動した例
 デモショップ【プレーン】商品詳細を下に移動した例
 デモショップ【プレーン】商品名、商品詳細、追加商品画像を上に移動した例
 デモショップ【シンプルモダン】商品名、商品詳細を上に移動した例

買い物カゴ画面

Q【買い物かごページ管理】【お知らせ・インフォ管理】レイアウトがずれる・divが閉じる。

A【独自デザイン】>【内部ページ編集I】>【お知らせ・インフォ管理】
【独自デザイン】>【内部ページ編集I】>【お知らせ・インフォリスト】
【独自デザイン】>【内部ページ編集I】>【買い物かごページ管理】
それぞれの入力ソースの最上行に　テーブルのタグの一部

<tr><td>

または
</table>
を記述していただきますようお願いいたします。（tr～の開始タグのみ、またはtableの終了タグ）
前後のソースにより表示が異なる場合がございます。ショップ様の画面に合わせどちらかをご追記ください。

原因）
お知らせと買い物かご画面において、divボックスで囲んだ場合に、出力後のページではdivが終了の</div>よりも前の位置で閉じてしまいます。

MakeShopの仕様の構造上、
<div class="M_mainContents" id="M_member">（お知らせ画面）や
<div id="M_basket" class="M_mainContents">（買い物かご画面）
の直前のテーブルが
</td></tr>
で終了しているため、レイアウトの構造にズレが生じていることが原因となります。

divレイアウトをされた場合に上記の画面でテーブルタグの一部が不足することで、次に続くdiv要素が終了して（閉じられて）しまうため、レイアウトが崩れます。
弊社の仕様上のエラーとなりますが、上記のタグの追記にてご対応ください。

独自ページ

Q【独自ページ入力】仕様のtable#makebannerを閉じると独自ページがカラム落ちします。

A【独自デザイン】> 【トップページ編集】 > 【左側メニュー管理】の最下行に
右側（メインコンテンツ）用のdivカラムの開始タグのみを記述してご対応ください。

記述例）
</td></tr></table>
<div id="Sidebar" style="float:left; overflow:hidden;">左側メニューのソース</div>
<div id="mainContents" class="clear">

その後、【中央画面管理】などメインコンテンツ側の最下行か、
【独自デザイン】>【トップページ編集】>【下段メニュー管理】の最上行に終了タグを記述します。

記述例）
</div>
それぞれのdivにはfloatをご指定ください。
#mainContents{ width:740px; margin-left:20px; float:left; }

■仕様
【左側メニュー管理】の最上行に</td></tr></table>を記述し仕様のtable#makebannerを閉じた場合は後続の要素はfloatで並べる必要があります。
しかし【独自ページ作成】で生成されたページには<table width=100%>が出力されるため、
このtableにfloatおよびwidthを指定することができません。
仕様のtableレイアウト#makebannerは仕様どおりご利用いただきますようお願いいたします。

その他

Q【商品検索画面管理】=全商品一覧画面の画像のサムネイルサイズを変更したいです。

A出力されるサイズは仕様のため、直接の変更ができません。出力されているimg要素に対してCSSで制御してご対応ください。
検索画面＝全商品一覧画面の表示形式は、タグ取得一括表示タイプと、詳細設定タイプがございます。

■一括表示（タグ取得）タイプ[PRODUCTION?_??_??????]で表示している場合
横幅80pxまで拡大が可能です。
記述例）
<div id="M_searchResult">
[PRODUCTION0_00_EDEDED]
[PAGE2]
</div>

この場合、商品一覧を出力する独自変数タグ
[PRODUCTION0_00_EDEDED]
を
[PRODUCTION0_70_EDEDED]

に修正（中央のボタン画像指定数を　00→70に変更）し、表示ボタン画像を「7」番タイプにします。
このタグで商品画像サムネイルを拡大するとボタンも同時に拡大されてしまうため、あらかじめ一番幅の広い（80px）の7番タイプを適用しておくための指定となります。
その後、【独自デザイン】> 【トップページデザイン】 > 【共通CSS管理】などショップに適用中のCSSファイルに下記を追記してください。
#M_searchResult a img {width:80px; height:auto;}

■[SEARCH_RESULT]～[/SEARCH_RESULT] でデザインしている場合
表示される画像の原寸は「拡大画像」のサイズですので、このサイズ以内でCSSの指定が可能です。

例）
<div id="r_searchList">
[SEARCH_RESULT]
（略） [IMAGE_M]（略)
[/SEARCH_RESULT]
</div>

CSS:
#r_searchList a img { width:200px; height:auto !important; }
など

■仕様
【独自デザイン】>【内部ページデザインI】>【商品検索画面管理】の、「詳細設定タイプ」の[SEARCH_RESULT]～[/SEARCH_RESULT]で囲むソースで画面をデザインされた場合、商品のサムネイル画像は下記のいずれかの独自変数タグで指定できます。

[IMAGE_S]（長辺50px）
[IMAGE_M]（長辺100px）
[IMAGE_L]（長辺240px）

こちらは出力後のHTML上で上記の長辺サイズに縮小しますが、元の画像は原寸大（拡大画像）のサイズです。

Q【移動イベントバナー管理】移動イベントバナーの位置がずれます。

A下記のようなスタイルを【共通CSS管理】等適用中のCSSにご追記ください。

記述例）
/*移動イベントバナーを画面右から30pxの位置に表示する */
#RightBanner{margin:0;padding:0; left:auto !important; right:30px;}
※移動イベントバナーを表示する　div#RightBannerに設定を追記します。数値は任意です。
※「!important」を記述することで、ソースに直接出力される管理画面からの指定を無効化し、こちらでの指定を割り込ませます。
「!important」は仕様で変更のできない箇所に指定を加える場合などにご利用いただくことができます。
※機能には入力欄がないため、画面右側からの位置を　rightプロパティで追記します。
こちらでInternetExplorerおよびIE以外のブラウザで表示がほぼ統一されますが、小さいサイズの画面（ノートPCなど）で閲覧されました場合には　右側のバナーがショップ上に重なる場合があります。ご考慮の上ご調整ください。

■仕様
移動イベントバナーは、【独自デザイン】 > 【トップページ編集】>【「移動イベントバナー」管理】より入力いただきました数値がpositionタグに記述される仕様です。
こちらはMakeShopの開発当初、弊社の推奨環境のInternetExplorerを基準としておりましたが、現在ではIEでのpositionの解釈が他のブラウザ（FireFox、Safari、GoogleChrome）と異なる挙動を示す例が確認されております。

移動イベントバナー機能は主に左端への設置を想定しております。
ショップをセンターに配置されている場合に移動イベントバナーをショップの右側に表示させますと、
IE以外のブラウザではショップに重なる場合がありますが、ブラウザのサイズをご変更いただきますとブラウザに対してセンター表示のショップも左に移動しますのでバナーがショップ右側に表示される位置があります。
こちらの表示をIEとIE以外のブラウザで統一するには移動イベントバナーをポジショニングしております、div#RightBannerに対してスタイルの記述を追加する対処策があります。
左からの位置ではなく、右からの位置を指定し、左からの位置は「left:auto !important;」とご指定ください。

【移動イベントバナー管理】にテキストと画像を入力し、【共通CSS管理】に下記のスタイルを指定しています。

記述例）
#RightBanner {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-size: 10px;
left: auto !important;
margin: 0;
padding: 0;
right: 0;
text-align: center;
width: 50px;
}

Q【マルチフォームの設定】で作成できるフォームをデザインしたい（→制限あり）

A【イベント/企画】>【フォーム/アンケートの設定】>【マルチフォーム案内文の設定】
のコメント欄にスタイルタグを記述していただく方法がございます。独自デザイン機能はございません。

・入力欄の改行は全て<br>として出力されますので、改行せずに記述します。
・styleタグ内もすべて改行せずに記述します。
あらかじめエディタで作成いただきましたスタイルを、最終的に改行を抜いた状態でコピー＆ペーストしてご利用ください。
・入力欄内に新たに<div>カラムなどを作成し、id名を充てることでスタイルを別途作成いただくことは可能ですが、仕様として出力されるスタイルが優先されますので仕様の範囲内での設定となります。

表示例）
→MSデパートショップの例

■仕様
マルチフォームに独自デザインの機能提供はございません。既存のidおよびclass名に対して指定をおこなうご対応となります。

ご注意）
外部cssファイルを別途作成いただきリンクさせる方法もありますが、
ユーザー（閲覧者）様のご利用環境によりセキュリティの警告が出る場合、外部ファイルエラーとしてcssが適用されません。
上記の手順で直接スタイルタグ内に記述される方法がより確実です。

【関連】【マルチフォームの設定】で作成した画面の「送信する」ボタンの文言を変えたいです。→不可
ボタンの文言はご変更いただくことができません。

【関連】【マルチフォームの設定】のタイトルよりも上にヘッダーのデザインをしたいです。→不可
【マルチフォームの設定】には独自デザイン機能がございませんので、ヘッダーの追加をおこなっていただくことができません。
画像の挿入は【マルチフォーム案内文の設定】の画像登録、HTMLは「パソコンコメント」欄にてご対応いただきますようお願いいたします。

Q【タイトルイメージ管理】タイトルイメージに「×」が出ます／タイトル画像を変更したい。

A独自変数タグに自動出力されるタイトルの場合独自変数タグからの出力コンテンツに含まれるタイトル画像は、仕様のため削除することができません。

１）1px×1pxの透明画像（→spacer.gif）をダミーとしてご用意いただき、【タイトルイメージ管理】にご登録ください。

２）【会員認証ページ】など、空のtdが発生する画面に関しましては、お手数ですが編集欄内（最下行など）に下記のスタイルを記述していただき、ご対応ください。

<style type="text/css">
td.line{ font-size:0; height: 0 !important;}
</style>

・<td class="line" height="16"> </td>として設定されている行のheight指定に割り込み、0とします。
　「 」にフォントサイズが適用されないようこちらにも0を指定します。
・td.lineはショップサイト内の画面に多用されておりますため、共通CSSではなく【独自デザイン】のソース内にスタイルタグとして記述します。

タイトル名	管理画面	独自変数タグ
おすすめ商品タイトル	【中央画面管理】	[SUISEN1][SUISEN2][SUISEN?Y?]
新商品タイトル		[NEW1][NEW2]
共同購入タイトル		[KYOUDOU] 価格固定型共同購入: はいいいえで「はい」設定時
バナータイトル		[BANNER1][BANNER2]
お知らせタイトル	【中央画面管理】	[NEWSEVENT1][NEWSEVENT2][NEWSEVENT3][NEWSEVENT4]
お知らせタイトル	【左側メニュー管理】	[LEFT_NEWSEVENT]
スペシャル商品タイトル	【中央画面管理】	[SPECIAL1][SPECIAL2][SPECIAL3]
スペシャル商品タイトル	【左側メニュー管理】	[LEFT_SPECIAL]
インフォメーションタイトル	【中央画面管理】	[INFO1][INFO2][INFO3][INFO4]
インフォメーションタイトル	【左側メニュー管理】	[LEFT_INFO]
リサーチタイトル	【左側メニュー管理】	[LEFT_POLL]
履歴レコメンド(左側)タイトル	【左側メニュー管理】	[RECENT]
履歴レコメンド(中央)タイトル	【中央画面管理】	[RECENT1]

■【独自デザイン】で編集可能な画面の場合
入力欄下部に「ページ上段タイトルイメージを含む」のチェックボックスがございます。
こちらにチェックを入れていただきますと【タイトルイメージ管理】にてご登録のタイトル画像が表示されます。
不要の際にはこちらのチェックボックスのチェックを外してご利用ください。

タイトル名	【独自デザイン】管理画面	URL	非表示可
利用案内タイトル	–	/html/info.html	×
買い物かごタイトル	【内部ページ編集I】>【買い物かごページ管理】	/shop/basket.html	○
注文履歴タイトル	–	/shop/confirm.html	×
会社概要タイトル	–	/html/company.html	×
オークションタイトル	–	/auction/auction.html	×

■仕様
【独自デザイン】>【独自デザインオプション】（デザインオプション）で
「メイン画面変更、各種タイトル変更」または「各種タイトル変更」を選択時には
【独自デザイン】>【トップページ編集】>【タイトルイメージ管理】に登録されたタイトルが表示されます。
登録がない場合「画像なし」としてブラウザにより「×」エラーが表示されます。

【独自デザイン】> 【トップページ編集】 > 【タイトルイメージ管理】に現在アップロードされているタイトル画像は「プレビュー」ボタンよりご確認いただくことができます。

【関連】タイトルイメージの上部に空欄のセル（<td>　</td>）が生じます。
【ショップ作成】 > 【デザインの設定】 > 【基本デザイン設定】「タイトルイメージの余白設定」のラジオボタンより「余白を入れない」をご選択ください。
主に「デザインテンプレート」（ビジネスプラン以下）ご利用のショップ様向けのレイアウト調整機能となります。
お手数ですが独自デザインご利用の際はこちらの設定をご変更ください。

【関連】「会社概要」ページのタイトルの位置がどうしても合いません。
誠に申し訳ございませんが、【タイトルイメージ管理】にアップロードしていただく画像にあらかじめ左余白を付加していただき、ご対応ください。
例）余白ありのタイトル画像、デモショップの表示例

Q【メルマガ設定】メルマガ登録画面をカスタマイズしたい。（制限あり）

A【メール】>【メルマガの設定】>【メルマガ設定】
の「案内テキスト文」入力欄はHTML編集が可能ですので、<style>タグを記述し、
既存のid名、class名に対して指定をおこなうことで、部分的なご変更は可能です。
・id、classのない箇所は変更できません。また、表示の位置、順序、ボタンの文言の変更はできません。
・スタイルタグでのリンクは、セキュリティの設定により外部CSSが読み込まれない場合に無効となります。

例）
デモショップ例
・【メルマガ設定】に画像をアップロードします。
・「案内テキスト文」に下記を記述しています。

入力例）
<style type=”text/css”>
#M_mailmagazine table th {
background: none repeat scroll 0 0 #333 !important;
color: #fff !important;
font-size: 12px;
text-align: left;
width: 120px;
}
#M_mailmagazine table em {
color: #FF0000;
font-style: normal;
}
/* responsive */
@media screen and (max-width: 768px){

#M_mailmagazine p.top,
#M_mailmagazine p,
#M_mailmagazine table th,
#M_mailmagazine table td {
font-size: 128%;
line-height: 180%;
}
#M_mailmagazine,
#M_mailmagazine h3, #M_mailmagazine #mailmagazineText {
width: 97% !important;
}
#M_mailmagazine table {
width: 98% !important;
}
}
</style>

■仕様
SSLの画面（https://～で表示される画面）は、セキュリティの都合上、独自デザインのファイルやページの階層とは異なるディレクトリ上に位置し、【独自デザイン】機能をご用意しておりません。現在のページは仕様としてご了承ください。

ご注意）
ブラウザのセキュリティ設定により、外部cssを読み込まない場合はスタイルの適用されない状態で表示されます。

【関連】メルマガ登録ページにもヘッダー（上段メニュー）や左側メニューを入れたいです。（不可）
ご登録を完了されるまでの離脱を防ぐためにも共通のヘッダー（上段メニュー）や左側メニューは表示しない仕様とさせていただいております。
恐れ入りますが、このままのご利用をお願いいたします。

MakeShopオンラインマニュアル

ベーシックモード

デザインオプション

ファイル管理

トップページ編集

内部ページ編集Ⅰ

内部ページ編集Ⅱ

独自ページ

ヘルプ

全体/トップページ

商品分類画面

商品詳細画面

買い物カゴ画面

独自ページ

その他