概要
テーマのスタイルをカスタマイズできる機能です。新たにテーマを作成したり、編集して使用することができます。ただし、弊社が過去に作成したテーマは編集できません。
仕様
- https://shop.tagfab.jp/themes にアクセスし、テーマIDを作成します
-
作成したテーマIDは動画タグのdata-themeや共通タグのdata-scenarioThemeに指定することで使用できます。
各機能の説明
テーマ編集機能
| 項目 | 必須 | 値 | 説明 |
| ID | ◯ | 文字列 | data-themeやdata-scenarioThemeに指定するテーマIDです。 |
| アイテム表示 | ◯ | ラジオボタン |
アイテムの表示方式はgrid形式かlist形式かを選ぶことができます。 |
| フォント | ◯ | フォント名 |
テーマ全体のフォントを指定します。デフォルト値は下記 Noto Sans JP, |
| コメントのフォント | ◯ | ラジオボタン |
白、黒、下敷き付きの３つから選択いただけます |
| 商品画像の比率 | ◯ | ラジオボタン |
アイテムの画像は5x6の縦長もしくは1x1の正方形を選択することができます。 |
| カウントダウンのフォント | ◯ | フォント名 |
カウントダウン機能のフォントを指定します。デフォルト値は下記 Noto Sans JP, |
| カウントダウンの文字色 | ◯ | RGB または RGBA 表記 |
カウントダウン機能のフォントの文字色を指定します。 |
| コメントのNGワード | 文字列 |
カンマ区切りでコメントとして表示させたくないワードを登録することができます。 |
grid形式の設定項目
| No. | 項目 | 説明 | 入力規則 | デフォルト値 |
| 1 | 商品一覧タイトル | テキスト | 20文字以下 | このライブで紹介しているアイテム |
| 文字色 | RGB または RGBA 表記 | #000000 | ||
| 文字サイズ (px) | 100以下 | 14 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 2,3,4,5 | 商品情報テキストの整列 | 左寄せ／中央寄せ／右寄せ | 左寄せ | |
| 2 | ブランド名 | 文字色 | RGB または RGBA 表記 | #000000 |
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 3 | アイテム名 | 文字色 | RGB または RGBA 表記 | #000000 |
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 4 | 価格 | 価格表示 | ON/OFF | ON |
| 文字色 | RGB または RGBA 表記 | #333333 | ||
| 文字サイズ (px) | 100以下 | 14 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 末尾のテキスト | 20文字以内 | (税込) | ||
| 通貨表記 |
￥／円 |
￥ | ||
| 5 | サブタイトル | 文字色 | RGB または RGBA 表記 | #ff0000 |
| 文字サイズ (px) | 100以下 | 14 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 6 | セールスのアイコン | セールのアイコンのテキスト | 文字列 | SALE |
| セールのアイコンの文字色 | RGB または RGBA 表記 | #ff0000 | ||
| セールのアイコンの背景色 | RGB または RGBA 表記 | #ffffff | ||
| セールのアイコンの文字サイズ | 100以下 | 8 | ||
| セールのアイコンの文字の太さ | 1000以下 | 400 | ||
| 7 | セール価格 | セール価格の文字色 |
RGB または RGBA 表記 |
#000000 |
| セール価格の文字のサイズ |
100以下 |
14 | ||
| セール価格の文字の太さ |
1000以下 |
400 | ||
| 打ち消された価格の文字色 |
RGB または RGBA 表記 |
#969696 | ||
| 打ち消された価格の文字のサイズ |
100以下 |
12 | ||
| 打ち消された価格の文字の太さ |
1000以下 |
300 |
list形式の設定項目
| No. | 項目 | 説明 | 入力規則 | デフォルト値 |
| 1 | タイトル | テキスト | 20文字以下 | このライブで紹介しているアイテム |
| 文字色 | RGB または RGBA 表記 | #000000 | ||
| 文字サイズ (px) | 100以下 | 14 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 2 | アイテム名 | 文字色 | RGB または RGBA 表記 | #000000 |
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 3 | ブランド名 | 文字色 | RGB または RGBA 表記 | #000000 |
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 4 | 価格 | 文字色 | RGB または RGBA 表記 | #333333 |
| 文字サイズ (px) | 100以下 | 14 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 末尾のテキスト | 20文字以内 | (税込) | ||
| 通貨表記 | ￥／円 | ￥ | ||
| 5 | セール価格 | セール価格の文字色 |
RGB または RGBA 表記 |
#000000 |
| セール価格の文字のサイズ |
100以下 |
14 | ||
| セール価格の文字の太さ |
1000以下 |
400 | ||
| 打ち消された価格の文字色 |
RGB または RGBA 表記 |
#969696 | ||
| 打ち消された価格の文字のサイズ |
100以下 |
12 | ||
| 打ち消された価格の文字の太さ |
1000以下 |
300 | ||
| 5 | サブタイトル | 文字色 | RGB または RGBA 表記 | #ff0000 |
| 文字サイズ (px) | 100以下 | 14 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 6 | この商品について | 文字色 | RGB または RGBA 表記 | #333333 |
| 文字サイズ (px) | 100以下 | 18 | ||
| 文字の太さ | 1000以下 | 400 | ||
| テキスト | 20文字以内 | この商品について | ||
| 7 | 購入ボタン | 背景色 | RGB または RGBA 表記 | #666666 |
| 角の丸み | 100以下 | 16 | ||
| 文字色 | RGB または RGBA 表記 | #ffffff | ||
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 700 | ||
| テキスト | 20文字以内 | 詳細を見る | ||
| 8 | セールスのアイコン | セールのアイコンのテキスト | 文字列 | SALE |
| セールのアイコンの文字色 | RGB または RGBA 表記 | #ff0000 | ||
| セールのアイコンの背景色 | RGB または RGBA 表記 | #ffffff | ||
| セールのアイコンの文字サイズ | 100以下 | 8 | ||
| セールのアイコンの文字の太さ | 1000以下 | 400 |
共通設定
| No. | 項目 | 入力規則 | デフォルト値 | |
| 1 | ライブ一覧の日付 | 文字色 | RGB または RGBA 表記 | #000000 |
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 400 | ||
| 2 | ライブ一覧の名前 | 文字色 | RGB または RGBA 表記 | #000000 |
| 文字サイズ (px) | 100以下 | 12 | ||
| 文字の太さ | 1000以下 | 400 |