ネットショップBASEのデザインを編集する【HTML編集 App】

最近クライアントワークで、BASEのHTML/CSSを編集しましたので、そこで得た知識経験をシェアします。

主に行ったことは、ローカル環境でのデザイン作成・HTML/CSSの作成、そしてBASEの「HTML編集」アプリを導入して、ローカルで実装したものを適応させるといったことです。

BASEで見た目をカスタマイズする方法

BASEでネットショップを開くのはとても簡単です。

最低限、商品や料金、ページで使用する画像、文章、などを準備するだけでサクッとショップを開くことが可能です。お問い合わせのページ、クレジットカード支払いなど、最低限必要になるものはもともと用意されていて、クリックして設定していくだけで簡単に設定していくことが出来ます。

ただ、とても便利なBASEですが、少しデザインを凝ったものにしたければ、諸々作業が必要になります。

デザインを変更する方法は大きく2つあり、それぞれ解説します。

• テンプレートを変更する
• HTMLを編集する

BASEのデザインテンプレートを変更する

デフォルトのままのデザインでも最低限機能しますが、もう少しデザインに調整を加えたければ、テンプレートを変更することが可能です。

テンプレートには、有料のもの無料のものがあり、2020年12月時点で確認すると、無料テンプレートは17種類あります。無料でもシンプルなものから画像を全面に押し出したもの、バリエーションがある程度はあるので、ここから手をつけるのはありかなと思います。

テンプレートを変更する方法

テンプレートの変更もとても簡単で、誰でもさくっと行うことが出来ます。

管理画面のヘッダーにある「デザイン」を選択し、「テーマ」と進むと、テーマを変更することが可能です。無料で用意されているデザインテーマで満足行かない場合は、「BASE DESIGN MARKET」から有料のテーマを導入することも可能です。

もし、予め用意されている有料・無料テンプレートの範囲だけでなく独自にカスタマイズしていきたい場合は、「HTML編集」アプリを導入して、自分でHTML・CSSを書くことが出来ます。

BASEのHTML編集アプリを導入して独自デザインを作成する

ここからは、「HTML編集」アプリを導入して独自のデザインを適応させていく方法を記載していきます。

前提として、すでにローカル環境に、HTML・CSSをある程度は作成出来ている前提で話を進めます。

BASEでHMTL・CSSをカスタマイズするには、「HTML編集」アプリを導入して、独自にデザインテンプレートを作成する必要があります。

HTML編集アプリを導入する

管理画面のヘッダーの「Apps」を選択し、「HTML編集」を追加します。

「HTML編集」のアプリを開くと、「テーマを新規作成」し、エディタを開くことでHTMLを編集することが出来るようになります。ただこのエディタはやはり、その他の開発ツールと比べるといろいろと使いにくい部分があるので、ローカルで編集したものを貼り付けるといった使い方が良さそう。

BASEのテンプレートタグを理解する

HTML・CSSを編集するには、BASEテンプレートの中身を理解する必要があります。

最低限理解しておくべき特徴を記載します。

BASEテンプレートは1つのファイルですべてのページを管理する

例えばWordPressなら固定ページを作成するときに、それぞれ、index.phpと固定ページ.phpでファイルを分けますよね。

しかし、BASEテンプレートは、1つのファイルですべてのページを管理しています。その1つのファイルのなかで、

{block:IndexPage}
IndexPageで表示する内容を記述する
{/block:IndexPage}

といったBASEテンプレートのblockタグによってページが切り分けられていて、なかなか混乱しますね。

商品詳細ページであれば、{block:ItemPage}というタグ、ABOUTページであれば、{block:AboutPage}というものが用意されていますので、それぞれのページの記述をそのブロック変数の中に記載していくことになります。

CSS・JavaScriptも同じファイルで管理する

独自にHTMLを編集する場合はほぼ確実にCSS（JavaScriptも）もカスタマイズすると思いますが、CSS・JavaScriptに関しても、同じひとつのファイル内で管理することになります。

独自のCSSを記述する場所は、普通のHTMLと同様に考えて大丈夫です。headタグ内にstyleタグを作成してそこに全部書いちゃうのがよさげです。

外部CSSを読み込めるようにしてあげることも出来るかもしれませんが、試していません。。

商品詳細情報のタグ

独自のHTMLを組み込むにあたって、「商品管理」画面で設定している商品がどのように取得出来るのかも理解しておく必要があります。

販売可能な商品があればブロック内を読み込む箇所は以下です。

{block:HasItems}
{block:/HasItems}

プログラミングをかじっている人であれば、なんとなく雰囲気で分かる感じに作られていますね。

販売可能なアイテムがある場合は、Itemsブロックで商品を一つずつ取得します。ここはプログラミングで言うところの、for文ですね。登録されている商品の数だけ、itemsブロックが繰り返されます。

{block:Items}
{block:/Items}

そしてItemsブロック内で、{ItemTitle}や{ItemPrice}で商品名や商品価格を取得することになります。

<p class="product_title">{ItemTitle}</p>
<p class="product_price">{ItemPrice}</p>

こんな感じで、各商品のタイトルと価格をpタグで表示することが出来ます。

もし販売可能な商品がない場合は、NoItemsブロック内のコードが呼ばれます。

{block:NoItems}
{block:/NoItems}

その他、細かな独自のタグもあり、中には削除してはいけないものなどもあります。

詳細は公式ドキュメントを見ながら試してみてください。
https://docs.thebase.in/docs/template/