Developers

Developers

  • BASE API
  • BASE Template

›テンプレートタグ

BASE Template

  • はじめに
  • 更新情報
  • テーマの作成方法

    • テーマの作成・管理方法
    • テーマエディタの使い方

    テーマの販売方法(デザインマーケット)

    • テーマを販売したい方へ
    • デザイナー登録
    • デザインガイドライン
    • デモ用ショップに関する注意事項
    • 新規テーマの販売申請
    • テーマのアップデート申請
    • テーマ申請チェックリスト

    基本設定

    • 全体構成
    • 必須タグ
    • <head>仕様
    • <body>仕様
    • ナビゲーションに関する仕様

    各ページの仕様

    • ページ構成

    商品ページ

    • 商品ステータス
    • 購入ボタンの制御
    • 商品情報
    • Pay ID あと払いウィジェット
    • モーダル

    テンプレートタグ

    • 非表示
    • ページ
    • デザインオプション
    • ショップ
    • url
    • イテレータ
    • 商品
    • ソーシャル
    • 関連商品
    • コンテンツ
    • sandboxタグ

    Apps

    • 商品検索App
    • カテゴリ管理App
    • ラベルApp
    • Blog App
    • セールApp
    • 英語・外貨対応App
    • ショップコインApp
    • BASEロゴ非表示App
    • デジタルコンテンツApp
    • レビューApp
    • 販売期間設定App
    • 予約販売App
    • メッセージApp
    • 送料詳細設定App
    • 商品説明カスタムApp
    • 抽選販売App
    • テイクアウトApp
    • 商品オプションApp
    • コミュニティApp
    • メンバーシップ App
    • 再入荷自動通知App
    • 年齢制限App
    • お知らせバナーApp
    • メールマガジンApp

    よくある質問

    • FAQ

デザインオプション

デザインオプションとしてテーマ独自の設定項目を設けることで、テーマの魅力として様々な特色を持たせることが可能です。

独自設定は text、image、color、select、ifの5種類があり、
<meta name="設定項目の種類:変数名" content="デフォルトの値" label="設定項目の見出し"> のように記述します。

デザイン編集

例)

<head>
    ・・・
    {block:Hidden}
        <meta name="text:Sample Text" content="" label="サンプル テキスト">
        <meta name="image:Sample Image" content="" label="サンプル 画像">
        <meta name="color:Sample Color" content="" label="サンプル 色">
        <meta name="select:Sample Select" content="セレクト1の値" title="サンプル セレクト1" label="サンプル セレクト">
        <meta name="select:Sample Select" content="セレクト2の値" title="サンプル セレクト2" label="サンプル セレクト">
        <meta name="select:Sample Select" content="セレクト3の値" title="サンプル セレクト3" label="サンプル セレクト">
        <meta name="if:Sample If" content="1" label="サンプル if">
    {/block:Hidden}
    ・・・
</head>

このように<head>内に独自のmetaタグを記述することで「デザイン編集」の「テーマ別設定」として利用できるようになります。
また、{block:Hidden} タグを使うことでWebブラウザで表示する際にHTMLとして出力しないようにすることが可能です。

入力エリアと変数

入力エリアはlabel属性が見出しとして表示され、その次に指定した種類の設定要素が表示されます。
content属性はデフォルト値や入力例など予め入力しておきたい内容がある場合に記述しておきます。
入力された内容はname属性を参照し {text:Sample Text} のように変数として使用します。

入力判定ブロック

一つの設定項目に対してそれぞれの入力されているかどうかを判定するブロックも使えるようになります。
nameの値のコロン(:)をハイフン(-)に、スペース( )をアンダーバー(_)に変換した値がブロック名になります。falseのチェックの場合は頭にnot_をつけます。

{block:text-Sample_Text}
    {text:Sample Text}
    テーマ別設定の「サンプル テキスト」に入力があった場合のみ表示
{/block:text-Sample_Text}

{block:not_text-Sample_Text}
    テーマ別設定の「サンプル テキスト」に入力がなかった場合のみ表示
{/block:not_text-Sample_Text}

text

text テーマ別設定にテキスト入力フィールドが追加されます。

<head>

    {block:Hidden}
        <meta name="text:Sample Text" content="" label="サンプル テキスト">
    {/block:Hidden}

</head>

<body>

    {block:text-Sample_Text}
        <div>入力されたテキストは {text:Sample Text} です。</div>
    {/block:text-Sample_Text}

    {block:not_text-Sample_Text}
        <div>テキストが入力されていません。</div>
    {/block:not_text-Sample_Text}

</body>

image

image テーマ別設定に画像選択フィールドが追加されます。値がない場合は1pxの透過の画像を返します。

<head>

    {block:Hidden}
        <meta name="image:Sample Image" content="" label="サンプル 画像">
    {/block:Hidden}

</head>

<body>

    {block:image-Sample_Image}
        画像が設定されている<br>
        <img src="{image:Sample Image}">
    {/block:image-Sample_Image}

    {block:not_image-Sample_Image}
        画像が設定されていない
    {/block:not_image-Sample_Image}

</body>

color

color テーマ別設定にカラーピッカーが追加されます。変数はカラーコードを出力します。

<head>

    {block:Hidden}
        <meta name="color:Sample Color" content="" label="サンプル 色">
    {/block:Hidden}

    <style type="text/css">
        .sampleClass {
            {block:color-Sample_Color}
                /* 色設定がある場合 */
                color: {color:Sample Color}
            {/block:color-Sample_Color}

            {block:not_color-Sample_Color}
                /* 色設定がない場合 */
                color: #000000;
            {/block:not_color-Sample_Color}
        }
    </style>

</head>

select

select テーマ別設定に選択フィールドが追加されます。selectの一番上のcontentの値がデフォルト値になります。
選択された選択肢のcontent属性がこの変数の値として出力され、title属性は選択肢の表示名となります。

<head>

    {block:Hidden}
        <meta name="select:Sample Select" content="セレクト1の値" title="サンプル セレクト1" label="サンプル セレクト">
        <meta name="select:Sample Select" content="セレクト2の値" title="サンプル セレクト2" label="サンプル セレクト">
        <meta name="select:Sample Select" content="セレクト3の値" title="サンプル セレクト3" label="サンプル セレクト">
    {/block:Hidden}

</head>

<body>

    選択されたのは {select:Sample Select} です。

</body>

if

if テーマ別設定にスイッチが追加されます。content属性の値が0だとOff、値が1だとOnです。


<head>

    {block:Hidden}
        <meta name="if:Sample If" content="1" label="サンプル if">
    {/block:Hidden}

</head>

<body>

    {block:if-Sample_If}
        Onの時(contentの値が1の時)に表示されます。
    {/block:if-Sample_If}

    {block:not_if-Sample_If}
        Offの時(contentの値が0の時)に表示されます。
    {/block:not_if-Sample_If}

</body>

デザインオプションのグルーピング

デザインオプションのグルーピング1 デザインオプションのグルーピング2

特定のページで使われるようなデザインオプションがある場合、「デザイン編集」に表示させる設定項目をまとめることができます。
所属させるグループはmetaタグに data-group="グループID" を設定することで指定します。

<head>
    {block:Hidden}
        <meta name="color:Sample Color" content="" label="全体で利用する色">
        <meta name="text:Sample Text" content="" label="HOMEで利用するテキスト" data-group="home">
        <meta name="text:Sample Text" content="" label="商品ページで利用するテキスト" data-group="item">
    {/block:Hidden}
</head>

利用できるグループIDは以下の通りです。

グループID表示されるグループ名
(未指定もしくは不正なID)全体設定
homeHOME設定
aboutABOUT設定
item商品ページ設定
appApp設定
otherその他設定

いずれのデザインオプションにも data-group が指定されていない場合はグルーピングされずにすべての設定項目がフラットに表示されます。

← ページショップ →
  • API利用規約
  • デザインマーケット利用規約
© 2012-2025 BASE, Inc.