こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はmakeshopのショップデザインで利用する、独自変数タグの書き方のポイントについてご紹介します！

こんなお悩みありませんか？

・独自変数タグって何だろう・・書き方あってるかな・・
・独自変数タグはどこに書いてもいいの？

独自変数タグって？！

かんたんに言うと、makeshop独自の簡易的なタグです。
ネットショップをはじめwebサービスは、HTMLで書かれたファイルをブラウザで表示しています。ただし、専門的な知識がない場合には書いてあ る意味がよくわかりません。

そこで、簡易的なタグ（独自変数タグ）を記載していただことで、ロゴや、商品名、金額などを
かんたんに表示すること ができるようになります。

→例えば、ロゴを表示する場合

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 上段メニュー管理

上段メニュー管理のエディターエリアに、下記のように記載してみると

<h1>[LOGO]</h1>

↓↓

「ショップロゴ/バナー管理」「ショップロゴ登録」に登録しているロゴが表示されます。

このように「makeshopの機能設定」と「独自変数タグ」HTMLを組み合わせて使うことができます。
それでは、利用する上で注意したいポイントを見ていきましょう！

気を付けたい！独自変数タグの書き方”3つ”のポイント！

その1 使えるタグを確認！

各ショップデザインの画面の下位置に利用できる独自変数タグの一覧があります。
記載のある独自変数タグを使いましょう！

各画面の一覧にないタグは書いても動作の保証はできません。
例えば、【上段メニュー管理】に使える独自変数タグを【中央画面管理】に書いても正しく動きません。

その2 例の通りに書く！

各ショップデザイン画面の下位置にある変数タグの一覧の例の通りに書きましょう！

▼例1

<a href=[ORDER]>注文履歴</a>
と例に書いてあるのに・・

→[ORDER]と書くだけでは利用できません。<a href= >　</a>とHTML入力も必要です。

▼例2

<a href=[GETBASKET]>かごに入れる</a>
と例に書いてあるのに・・

→<a href= “[GETBASKET]”> と例にない” “（ダブルクォーテーション）は必要ありません。

その3 直接デザイン変更できません！

独自変数タグから一括で出力されるコンテンツは仕様のため直接デザイン編集をすることはできません。

タグごとdivで囲み、idまたはclass名を指定し、要素に対しスタイル指定をすることでデザインを変更することができます！

▼HTML例

<div id="topImage">
[TOPIMAGE]
</div>

▼CSS例

#topImage{
    width:960px;
    margin:0 auto;
}

※PCで利用するタグ「 PCショップデザインタグ一覧 」が追加されました。
こちらも合わせてご参照ください。（2018.9.3）

いかがでしたでしょうか。
ぜひご確認ください！それではまた！