BASEカスタマイズ中級編〜デザインオプション第0回〜「基礎知識」

2019.01.08

BASEのデザイン編集には、「デザインオプション」というもの使ったカスタマイズ方法があります。
「デザインオプション」には、初期設定で定義済みのテキストのカラーを編集する{TextColor}やロゴのタグを編集する{LogoTag}のようなデザイン変数がいくつか用意されていて、デザイン編集左パネルに「背景」の画像や色が設定できるようになっています。
この「デザインオプション」を特殊なmetaタグを設定することにより、ショップ担当者が直接HTMLを触らなくても任意の場所のテキストや画像、カラーなどを簡単に変更したり更新したりできるというメリットがあります。

BASEでは、「デザインオプション」のカスタマイズを「デザインオプションの独自設定」と呼ぶようです。

「デザインオプションの独自設定」についてはこれから全５回に渡ってご紹介する予定です。

・第1回「お知らせをつくろう！」
・第2回「カラーを色々変えてみよう！」
・第3回「スライドショーをつくろう！」
・第4回「カラムのレイアウトを簡単に切り替えよう！」
・第5回「スライドショーのブロックを表示・非表示に！」

今回は上記5回に進む前の準備編のような感じになると思います。

※管理画面のデザイン →「 HTMLを編集する」からHTMLを編集しますので、バックアップをとってから編集するようにしてください。

デザインカスタマイズの基礎

BASEはアドオンの「HTML編集Apps」をインストールすることでHTMLを自由にカスタマイズできるようになります。
とにもかくにも管理画面のヘッダーメニューの「Apps」からAppsページへ移動し、「HTML編集Apps」をインストールしてください。
インストールすると管理画面のヘッダーメニューの「デザイン」からデザイン編集ページに移動します。
左のサイドパネルの「HTMLを編集する」をクリックするとエディタが開き、HTMLを編集できるようになっています。
ちなみに、デザインオプションを設定すると「HTMLを編集する」の下の方にテーマ別設定として入力欄などが追加されるようになります。

「デザインオプション」の基礎

簡単な流れとしては、headタグ内に特殊なmetaタグを記入、<body>内の任意の場所に出力用のタグを記入、となります。

デザインオプションには5種類あります。

text	任意のテキストが入力できる。プレーンテキストの他、HTML、CSS、JSなども入力可能！
color	任意のカラーを自由に更新できる
image	任意の画像をアップロードして配置できる
select	複数の選択肢の中からオプションをセレクトで選択できる
if	オン、オフで選択できるようになる。on=true,off=false

「デザインオプション」の特殊なmetaタグ

まず、ここからはHTMLをカスタマイズしていきますので、管理画面のデザイン → 「HTMLを編集する」でエディタを開いてください。

headタグ内に特殊なmetaタグを記入して、text、color、image、select、ifのそれぞれのデザインオプションを設定します。
特殊なmetaタグの記入場所は<head>内の
{block:Hidden}
<!– meta tag —>
{/block:Hidden}
という箇所を見つけます。

この{block:Hidden}の中に特殊なmetaタグを記入します。
{block:Hidden}内に記入したmetaタグは公開されたHTMLのソースには表示されないようになっています。

[例]
{block:Hidden}
<!– meta tag –>
<meta name=“text:任意の英数字” content=”初期値” label=“入力欄の名前”>
{/block:Hidden}

name=“text:任意の英数字”の、コロンの前のtextはデザインオプションの種類を表します。colorの場合は、name=“color:任意の英数字”になり、imageの場合は、name=“image:任意の英数字”になるということです。
任意の英数字はbodyタグ内に挿入する出力用のカスタム独自タグに紐づく名前になります。

content=””には、初期値を設定できます。textの場合、content=”おはよう”とすれば左パネルで更新するまで「おはよう」が出力されます。

labelは、サイドパネルに表示される入力欄の項目名になります。

「デザインオプション」のブロックタグと独自タグ

metaタグで設定した内容を出力する為にタグをbodyタグ内の任意の場所に記入します。
この記入するタグには「独自タグ」とそれを囲む「ブロックタグ」があります。
（カスタマイズで追加するタグなので本来、「カスタマイズ独自タグ」「カスタマイズブロックタグ」のように表記すべきかもしれませんが、冗長になりますし、BASEのマニュアルにはこれらの呼び名が決められていませんので、ここでは「独自タグ」「ブロックタグ」として進めます。）

例えば、metaタグを下記のように設定した場合の「独自タグ」と「ブロックタグ」の書き方を見ていきましょう。
<meta name=”text:txt Example″ content=”” label=”テキスト入力例”>

まず「ブロックタグ」は下記のようになります。
{block:text-txt_Example}〜{/block:text-txt_Example}
nameのtextの後の”:”を”-”に置き換えて、txtとExampleの間のように空白スペースがある場合は空白スペースを”_”に置き換えます。大文字、小文字もmetaタグに合わせます。
もしmetaタグのnameがもっとシンプルに、name=”text:txt01″のような場合は、{block:text-txt01}のようになります。

「独自タグ」の書き方は簡単です。下記のようになります。
{text:txt Example}
nameの値を、{}内にそのままコピペすればいいだけです。

作成した「独自タグ」を「独自ブロックタグ」で囲んで下記のように記入すると、この場所に該当のテキストが出力されます。
{block:text-txt_Example}
{text:txt Example}
{/block:text-txt_Example}