<head>仕様

ショップページ全体で共通となる<head>に関する仕様です。

  • テーマ名とテーマのバージョンの明記
  • metaに関するタグ
  • デザイン編集の基本設定に関するタグ
  • その他必須タグの設置
  • 外部ファイルの読み込みについて
  • <head>タグ内にCSSを記述する場合のご注意

各ページで出し分けが必要な場合はページを判別するタグで出し分けを制御します。
具体的な実装はこのページの最後の実装例を御覧ください。

テーマ名とテーマのバージョンの明記

任意の記述項目として、テーマの管理のために<head>内にテーマ名とテーマのバージョン番号を記述することが可能です。 その場合は下記のフォーマットで記述してください。

テーマ名は下記 BASE-Theme-Name のテーマ名の部分に記述します。

テーマのバージョンNo.は下記 BASE-Theme-Versionのcontentの部分に管理のための任意の番号を記述してください。

<meta name="BASE-Theme-Name" content="テーマ名">
<meta name="BASE-Theme-Version" content="1">

デザインマーケットで販売する場合は、テーマ名とテーマのバージョンをわかりやすい位置に必ず明記してください。

meta情報に関するタグ

meta情報に関するタグは以下の通りです。

タグ説明
{PageTitle}ページのタイトルのテキストで出力されます。
{FaviconTag}ブラウザのファビコンおよびスマートフォンのホームアイコン用画像として適用されるようにlinkタグが出力されます。
{CanonicalTag}正規化されたURLをcanonical属性のlinkタグとして出力します。
{MetaItemInfoTag}商品詳細ページ用のメタ情報のタグ。商品詳細ページであるかを判別する{block:ItemPage}とセットで使用します。
{MetaShopInfoTag}ショップのメタ情報のタグ。商品詳細ページは専用のタグがあるので、商品詳細ページ以外であることを判別する{block:NotItemPage}とセットで使用します。
{HeadLinkNextPrevTag}クローラー向けの前のページ、次のページのlinkタグが出力されます。indexページであることを判別する{block:IndexPage}とセットで使用します。

デザイン編集の基本設定に関するタグ

管理画面のデザイン編集では基本設定として背景色やテキストカラーなどを設定できます。
その設定した内容を出力する変数と設定されているかどうかを判定するブロックです。
※ ロゴテキストの色はロゴの変数タグで一緒に出力されます。

base

ブロック

タグ説明
{block:TextColor}「テキスト」が設定されているか判別
{block:LinkColor}「リンク」が設定されているか判別
{block:NavColor}「ナビゲーション」が設定されているか判別

※ 背景設定に関しては必須のため判定はありません。

変数

タグ説明
{BackgroundTag}バックグラウンドのタグ。styleタグとして出力されます。設定した背景色、もしくは背景画像の内容が反映されます。
{TextColor}「テキスト」で設定した色のカラーコードが出力されます。bodyや任意のclassに対して色を設定する場合に使用します。
{LinkColor}「リンク」で設定した色のカラーコードが出力されます。aタグや任意のclassに対して色を設定する場合に使用します。
{NavColor}「ナビゲーション」で設定した色のカラーコードが出力されます。上記リンクとは別に特定のナビゲーション等に色を設定する場合に使用します。

{TextColor} 、 {LinkColor} 、 {NavColor} はテンプレートソース内に存在しなければ、デザイン編集の基本設定にも表示されません。

その他必須タグの設置

<head>内で設置する必要がある必須タグは以下の通りです。
任意の箇所に設置してください。

タグ説明
{JQueryTag}[非推奨 2022.03] jQuery が必要な場合は <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> などのように CDN を利用するようにしてください。
{GoogleAnalyticsTag}Google Analyticsのタグ。Google Analytics Appsで設定したタグがここに表示されます。
(※)独自に用意したGoogle Analyticsタグを貼らないでください。

外部ファイルの読み込みについて

BASE Developerからアップロードした外部ファイルなどを読み込む際、 ファイルが更新された際に再度読み込まれるように、下記のタグをつけることでキャッシュ対策となります。

タグ説明
{UpdateTime}ファイルの更新時間

<head>タグ内にCSSを記述する場合のご注意

BASE Templateのタグは{任意の文字:任意の文字}という書式のため、
セミコロン;を省略したりminifyしてスペースが無くなると、
CSSがBASE Templateタグとみなされ正しく反映されない、という現象がおきます。

この現象は2020年10月にリリースした新しいショップデザイン機能では発生せず、
まだ新しいショップデザイン機能に移行していないショップでのみ発生します。

新しいショップデザイン機能をご使用の場合は
この現象をご確認することはできませんので、予めご了承ください。

CSSだけの場合

// NG : BASE Templateと同じ書き方のためCSSとしては無効になる
a{color:#f00}

// OK : スペースとセミコロンを省略しない
a { color: #f00; }

CSSにデザインオプションで設定した値を使用する場合


// NG : BASE Templateタグのカッコの内側にスペースがあるため変数として認識されない
a {
    color: { color:TxtCol };
}

// OK : BASE Templateタグのカッコの内側にはスペースを入れない
a {
    color: {color:TxtCol};
}

<head>の記述例

<head>
    <meta charset="utf-8">

    <title>{PageTitle}</title>
    <meta name="BASE-Theme-Name" content="テーマ名">
    <meta name="BASE-Theme-Version" content="バージョン番号">

    {FaviconTag}
    {CanonicalTag}

    {block:ItemPage}
        {MetaItemInfoTag}
    {/block:ItemPage}

    {block:NotItemPage}
        {MetaShopInfoTag}
    {/block:NotItemPage}

    {block:IndexPage}
        {HeadLinkNextPrevTag}
    {/block:IndexPage}

    <link rel="stylesheet" href="https://www.example.com/example.css?{UpdateTime}">

    {BackgroundTag}

    <style type="text/css">
        {block:TextColor}
            body {
                color: {TextColor};
            }
        {/block:TextColor}

        {block:LinkColor}
            a {
                color: {LinkColor};
            }
        {/block:LinkColor}

        {block:NavColor}
            .クラス名1,
            .クラス名2 {
                color: {NavColor};
            }
        {/block:NavColor}
    </style>

    {GoogleAnalyticsTag}

</head>
← 必須タグ<body>仕様 →