BASE初心者向けのテーマカスタマイズ入門編。

BASEはHead要素も含めてカスタマイズできるため、大変自由度が高いのが特徴。頑張れば完全オリジナルのお店を作ることもできます。

この記事ではBASEのテーマカスタマイズの始め方と、どんなことができるかをまとめてみました。

BASEのテーマカスタマイズの始め方

BASEのテーマカスタマイズの始め方

テーマカスタマイズは以前は有料アプリの購入が必要でしたが、現在は無料で提供されています。

BASEのテーマをカスタマイズするには「HTML編集APP」が必要です。管理画面メニューの「Apps」からインストールしておきましょう。

BASEのHTML編集アプリ

BASEのテーマデザインページからHTML編集

HTML編集アプリをインストールしたら、管理画面メニューの「デザイン」をクリックし、デザインページへ移動します。

このページでは背景カラーの変更などデフォルトで用意されているものの他に、ロゴの作成やテーマごとに用意されているオプションの設定ができます。

BASEのテーマデザインページの使い方

HTML編集を行うには「HTMLを編集する」をクリックしてコードを表示し、HTMLやCSSのカスタマイズを行います。

BASEのテーマデザインページ

BASEのテンプレートタグ(独自タグ)について

BASEではHTMLとCSSだけでなく、テンプレート(独自)タグを使って商品一覧や各ページのリンクを表示することができます。Githubにドキュメントがあるので、テーマのカスタマイズをする際は確認しておきましょう。

ドキュメントで必須と書かれているタグは必ず使用する必要がありますが、それ以外はなくても問題ありません。

BASEでカスタマイズできるページについて

次にBASEのHTML編集でカスタマイズできるページについてまとめておきます。

HTMLも含めて編集できるページ

BASEのページは7ページありますが、HTMLも含めて編集できるのは次の3ページだけ。

  • トップ(一覧)ページ: カテゴリページと検索結果ページを含む、商品一覧の表示
  • 商品詳細ページ: 商品詳細の表示
  • aboutページ: ショップについてのページの表示

トップページのみ、カテゴリページと検索結果ページが含まれ、それぞれコンテンツの出し分けが可能です。

例えばカテゴリページのみパンくずリストを表示したり、トップページのみスライドショーを表示することができます。

<!-- トップページのみ表示 -->
{block:IndexPage}
{block:NoIndexPageCategory}
{block:NoIndexPageSearch}
  <!-- 表示したいコンテンツ -->
{/block:IndexPage}
{/block:NoIndexPageCategory}
{/block:NoIndexPageSearch}

<!-- カテゴリページのみ表示 -->
{block:IndexPage}
{block:IndexPageCategory}
  <!-- 表示したいコンテンツ -->
{/block:IndexPage}
{/block:IndexPageCategory}

<!-- 検索結果ページのみ表示 -->
{block:IndexPageSearch}
  <!-- 表示したいコンテンツ -->
{/block:IndexPageSearch}

CSSのみ編集可能なページ

次のCSSのみ編集可能なページは、HTMLも含めて動的に出力されるため、こちらでカスタマイズすることができません。

  • 特商法ページ: 特商法に関する表示
  • プライバシーページ: プライバシーポリシーの表示
  • お問い合わせページ: 問い合わせフォームの表示
  • ブログページ: ブログAPPを入れている場合にブログの表示

基本的には動的出力ですが、次の例のように追加でコンテンツを表示することも可能です。

{block:ContactPage}
  <!-- フォームの上に問い合わせの注意事項などを表示 -->
  {ContactContentsTag}
{/block:ContactPage}

まとめ

BASEはTumblrとよく似ているため、Tumblrのカスタマイズをやったことがあるならそれほど苦労せずできると思います。

BASEとよく似たネットショップでカラーミーショップがありますが、こちらはHead要素のカスタムができない(タグの追加は可能)のでBASEほどの自由度はありません。

ただ、売れ筋ランキングやカレンダーなど使える独自タグはBASEより圧倒的に多いので、もっとコンテンツたくさん表示したい場合はカラーミーショップもオススメ。