BASE初心者のためのテーマカスタマイズのやり方

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

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

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

BASEのカスタマイズをはじめる前に

BASEのテーマをカスタマイズするには「HTML編集APP」をインストールしておく必要があります。

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

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

BASEのHTML編集アプリ

BASEテーマカスタマイズの基礎

BASEのテーマはTumblrと同じで、1つのファイルに全てのページのコードをまとめて記述するタイプです。

BASEテーマカスタマイズの基礎

また、ページのデータは基本的にBASEタグによって出力されます。ページそのものが1つのタグで動的に出力されるものもあるため、HTML構造も含めて編集できるページと、CSSしか編集できないページに別れています。

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

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

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

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

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

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

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

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

CSSのみ編集可能なページ

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

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

基本的には動的出力ですが、ページの上下に追加でコンテンツを表示することもできます。

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

BASEタグの使い方

BASEではHTMLとCSSだけでなく、テンプレート(独自)タグを使って商品一覧や各ページのリンクを表示することができます。

どんなタグがあるのかについては、公式ドキュメントでタグの種類やサンプルコードがまとめられているのでそちらをご覧ください。ドキュメントでは各種Appの使い方も確認することができます。

BASE Templateドキュメント BASEタグの使い方

このサイトでも条件分岐やデザインオプションなど、BASEタグの基本的な使用方法についてまとめています。

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

まとめ

BASEはheadも含めてカスタマイズでき、ページも1枚でわかりやすいという特徴があります。その反面、1枚に全ページの情報を載せるのでコードが煩雑になりがちなんですよね。

僕がBASE案件やるときはローカル環境で作ってjekyllのようなビルドシステムを使っています。BASEテーマのカスタマイズ代行もやってるので誰かに任せたい!というときはご相談ください。

Copyright © 2020 homupedia.com