BASEでHTMLは編集できる？ショップデザインを自分でカスタマイズする方法

「BASEってHTML編集できるの？」

デザインにこだわりたい方は、疑問に感じるのではないでしょうか。

BASEでは、有料テーマに限りHTML編集が可能です。「HTML編集App」を利用して編集すれば、自分好みのデザインに変更できます。

本記事では、

• BASEでHTMLを編集する方法
• HTML編集を行う際の注意点

について解説していきます。ぜひ最後まで読んで、実際にHTML編集を行ってみてください。

BASEでHTML編集はできるのか

BASEにはあらかじめテーマが準備されています。HTML編集を行う場合もテーマを選択した上で、それをベースにカスタマイズする流れとなります。

ただし、無料テーマでは編集機能は使えません。またHTML編集を行った場合、公式による標準テーマの新機能の追加や不具合の修正が行われる際、自動更新適応の対象外となります。

公式による機能追加や修正は随時行われています。都度、確認しつつショップメンテナンスが必要な点は把握しておきましよう。

①：無料テーマの場合

無料オフィシャルテーマのHTML編集はできません。無料テーマのカスタマイズを希望する場合は、「デザイン機能」を利用しましょう。編集の後、プレビュー画面で確認できます。なお、最新のショップデザイン機能を利用している場合、「ページ追加App」の使用も可能です。

HTMLの知識がなく不安な時は、上記で触れた機能で「どの程度好みのカスタマイズができるのか」を確認してみるのも良いでしょう。

②：有料テーマの場合

無料テーマで物足りない場合、好みの有料テーマが購入できます。有料テーマでは「ページ追加App」の使用はできませんがHTML編集が可能です。

編集用のアプリを利用し、購入済みのテーマを選択の上編集します。HTMLを利用した場合、画像や動画のサイズの指定やフォントの変更、ボタンサイズの変更などのバリエーション豊富なカスタマイズが可能です。

具体的な編集方法は後述します。元にしたテーマを再度選択すると、それまで行った編集が消えてしまう点には注意が必要です。

③：最初から自分でショップをデザインする場合

BASEでは全く白紙の状態で、ゼロからのオリジナルショップの作成はできません。
オリジナルショップを作成したい場合は、専用の編集アプリのインストールが必要です。そこに用意されている「サンプルテーマ」を元に編集できます。

BASEでHTML編集するなら「HTML編集App」をインストールしよう

HTML編集はパソコンを利用して行います。スマホでは利用できない点に注意しましょう。

編集アプリのインストールはBASEのサイトから行います。（「BASE Apps」＞「HTML編集」を選択）
編集アプリは無料です。

BASEでHTML編集する方法

HTML編集はアプリで行います。編集アプリを利用すると、HTML、CSS、JapaScriptを利用して、直接編集できます。

Web製作に関する専門知識がない場合、初めて見る文字の羅列に圧倒されるかもしれません。一方、少しでも知識がある場合は、以下の手順に沿ってコードを編集することで、オリジナルデザインのショップが作成できます。

ここでは、HTML編集の具体的な方法・手順をみていきましょう。

step1：編集画面を開く

ソースコードの並ぶ編集画面を開きます。開き方は以下のとおりです。

編集アプリインストール後、メニューの「デザイン編集」＞「HTML編集」を選択

step2：実際にコードを書く

実際にコードを記入していきます。BASEでは、1つのソースを用いショップ全体を構成します。ページごとの編集ではないことを押さえておきましょう。また、ヘッダー・本文内共に必須のコードがあるため、省略できない点に注意が必要です。

HTML更新の後、「プレビュー更新」を押すと更新内容が画面上で確認できます。公開前に、自分の期待した画面になっていることを確認しましょう。問題がないことを確認できた場合、「保存」ボタンを押すことで、公開中のショップデザインの変更が確定します。

補足：ユーザーがカスタマイズできるページ

BASEにおいて、基本のページは以下の6ページです。

そのうち、独自編集できるページは以下の3つです。

他に、別途専用アプリをダウンロードすることで追加できるページが4つあります。

なお、カートページ以降の購入情報入力や購入完了ページに関しては、カスタマイズできません。

カスタマイズの注意点として、意図的にサーバーに負担をかける行為及び、必須タグの非表示は禁止されていることも押さえておきましょう。

BASEタグの使い方

一般的なHTMLタグとBASE独自のテンプレートタグを使用して編集可能です。全体的なページ構成を知りたい場合、専用アプリから確認できる「サンプルテーマ」のHTMLを開くことで確認できます。

BASEでは非表示を禁止されているタグがあるため、確認しておきましょう。

head内必須タグ

なお、{GoogleAnalyticsTag}に、自分で用意したタグを貼ることは禁止されています。

body内必須タグ

BASEへのリンクとなる{BASEMenuTag}を非表示にするには、有料のアプリ「BASEロゴ非表示App」が必要です。CSSを利用して勝手に非表示にすることは禁止されています。

headには、検索エンジンやブラウザに対するサイトの情報を記述します。画面上には表示されませんが、SEO対策として大切な部分です。一方、bodyはユーザーに向けてコンテンツを記述する部分となります。

BASEでは必須タグ以外にも様々なタグが用意されています。すべてのタグは「BASE Template」ページで確認可能です。

ここでは、head部分で利用することの多いmetaタグ、デザインタグについてみていきましょう。

metaタグ

デザイン編集用ブロックタグ

デザイン編集用変数タグ

バックグラウンドタグ以外は、テンプレートソース内に無い場合、表示されません。
ショップページ全体で表示が必要となる、body内要素は以下3点です。

BASEリンク、カートリンクについては必須タグ{BASEMenuTag}として紹介したため、省略します。

ショップロゴ

ナビゲーション

ナビゲーションには、メインナビゲーションと、サブナビゲーションの二種類があります。メインナビゲーションは以下項目へのリンクを指したもので、表示順に決まりはありません。

このうちBlogページ、カテゴリページ、コミュニティページを利用するには別途アプリが必要です。
サブナビゲーションとは、この二つへのリンクを指します。

サブナビゲーションはフッター部分などに表記されることが多いですが、メインナビゲーションと一緒に表記することも可能です。なお、それぞれにローカライズテキストタグがあります。

ナビゲーションとしてまとめて表示するタグはないため、各ページのブロックタグや変数タグを利用し、表示しましょう。

テーマをHTML編集する際のポイント

編集作業の時に、特に気を付けておきたい4つのポイントについて解説します。

ポイント①：編集前にはバックアップをしておく

BASEには、テーマに関する自動バックアップ機能は備わっていません。仮にバックアップがない状態で編集の不備などが起きた場合、元の状態に戻すことができません。あとで困ることのないように編集前には必ず自分でバックアップしておきましょう。

例えば、編集前ごとにエディターの内容を全てコピーしてメモ帳などに貼りつけ、日付が分かるように保存・管理しておくと安心です。

ポイント②：テンプレート変数について理解しておく

BASEの独自タグは波カッコ{}で囲まれており、これは「テンプレート変数」と呼びます。一般的なHTMLとは異なるため注意が必要です。

また、不用意に削除すると機能しなくなります。特によく理解できないうちは、不用意に削除しないように意識しましょう。

変数には「変数」と「ブロック変数」の2種類があります。2つの違いは以下のとおりです。

変数はタグを記載するだけで指示の出力が可能です。一方、ブロック変数は{block:××Page}～{/block:××Page}のように利用します。

ポイント③：BASEの編集形態を理解しておく

BASEは、全てのページ編集を1つのエディターで行います。そのため、ページごとの編集について、ブロックタグを用います。
ブロックタグの利用方法は、以下のとおりです。

具体例として、トップページに関する編集を行いたい場合、以下のようになります。

それぞれのページを表すタグは以下の通りです。

ポイント④：ファイルのアップロード方法を理解しておく

ファイルアップロード機能を利用すれば、画像やCSS、Javascriptといった外部ファイルを使用できます。利用方法は以下のとおりです。

「ファイルアップローダー」＞「ファイルを選択」＞「アップロードする」

ファイルをアップロードするとURLが発行されるため、HTMLに記述することで利用できます。
なお、ファイルの修正やURLの再確認はできません。そのような場合は、再度ファイルをアップロードし、URL再取得が必要となる点に注意が必要です。

なお、アップロードした外部ファイルを読み込む際、{UpdateTime}タグを使用するとキャッシュ対策できます。

HTML編集でBASEショップをカスタマイズしよう！

BASEでは、HTML編集を利用してオリジナルデザインのショップを作ることができます。特別なデザインをすることで、他店との差別化を図ることが可能です。

HTMLと聞くと、難しい専門知識が必要ではと身構えてしまう人もいるでしょう。しかし、多少の知識があれば、コピー＆ペーストのみでカスタマイズできるという魅力があります。興味のある方は、本記事を参考にオリジナルデザインのショップ作成に挑戦してみてください。その際は、事前のバックアップを忘れないよう注意が必要です。

また本当にオリジナルデザインで作りたい場合はWordPressなどでBASEと別にホームページを作り、BASEのカートのみを利用するというのも一つの手段です。WordPressやHTMLの知識に自信がない方はWeb制作会社に問い合わせをしてみるのもいいでしょう。