物販

【BASE初心者向け】HTML編集によるカスタマイズのやり方

無料で簡単にECサイト・ネットショップを作成できるサービスの代表格が、BASEです。BASEを利用したショップの開設数は100万を超えており、その勢いはとどまるところを知りません。

そのようなBASEの特徴の一つとして、柔軟にサイトをカスタマイズできることが挙げられます。「HTML編集App」と呼ばれる機能をインストールすることで、大まかな外観から、細かな内部の動作まで、あなたの好きなようにデザインすることができるようになっているのです。この機能は無料で提供されているので、余計な金銭的コストはかかりません。

このような点から、BASEでショップを開設してみたいと考えている方も多いはずですが、同時に「難しい知識が必要なのではないか」といった不安から、躊躇してしまうこともあるかもしれません。この記事では、そんな方のために、BASEのHTML編集によってサイトをカスタマイズする方法を、初心者向けに噛み砕いて解説していきます。これからネットビジネスを展開しようとしているあなたの助けとなれば幸いです。

魅力的なショップを作り上げるためのHTML編集

ネットショップにおいて、お客様を惹きつけるために大切なのは、その外観、デザインです。もちろん、取り扱っている商品が魅力的であることは大前提ですが、まずショップの外観が目を引くものでなければ、お客様はそもそもまともに立ち寄ってもくれません。

BASEにおいて、ショップのデザインを変更する方法は、大きく分けると3つあります。この項目ではその3つの方法を一つずつ挙げていきます。

管理画面の『デザイン』を選んで簡単に編集

BASEには、テーマの雛形があらかじめ11種類、無料で用意されています。
その中から好きなものを選んで、オリジナルのロゴを挿入したり、背景や文字のカラーを変更したりすることで、簡易的なカスタマイズをすることができます。

BASEデザインマーケットで購入して編集

「サイト内に動画を貼りつけたい」「実店舗へのアクセスマップを表示させたい」「各商品ページに共通のお知らせを表示させたい」といった場合、通常のデザイン編集では実現することができません。そのようなときは、「BASEデザインマーケット」で販売されているテーマを有料で購入することで構想を実現可能になります。

いずれのテーマも、BASEのために国内のデザイナー等が制作した高品質なものです。表示されている価格は、月額ではなく、買い切りの額となっています。

HTML編集で自由自在にデザイン編集

1で紹介した通常のデザインにせよ、2で紹介した『BASEデザインマーケット』で購入したテーマにせよ、自分のショップの理想に合わせてカスタマイズしたい部分が出てくることがあります。あるいは、一からすべてを自分で作り上げたいという方もいるでしょう。

そのような場合に、BASE公式Appである『HTML編集App』をインストールすることで、HTML、CSS、JapaScriptを直接編集することができるようになります。HTML編集をしたBASEショップは、以下で紹介するサイトのようになります。

参考:SALLY’S

参考:TAWARA HONEY SELECTION

こういった事例を見てみると、すぐにでもオリジナルのショップを開設したくなるかもしれません。しかし、このHTML編集は、ありもののテーマをそのまま使うのとはまったく異なり、先述したHTML、CSS、JavaScriptの知識が要求されます。

はじめに · Developers」というページは、BASE Template(BASEのショップのテーマを編集できる機能のこと)についての公式のドキュメントです。HTML編集は、こういったことを行う機能となっています。

オリジナルのテーマを作成する難易度

前項で説明したように、HTML編集にはHTML、CSS、JavaScriptについての専門知識が必要となります。また、HTML編集App独自の関数といったものもあり、それらもきちんと覚えて使いこなさなければいけません。Web制作の知識がまったくない場合、これらはかなりの障壁となるでしょう。

ですが逆に、あなたがWeb制作の知識をすでに持っている場合、あるいは知識を持っている人間が身内にいる場合には、比較的速やかに、この機能を使って素敵なオリジナルテーマを作成することができます。先述した公式ドキュメントに、一通りの操作方法が書かれているので、これを見ながら一つ一つ作り上げていけば、適切な書式にのっとったデザインを構築していくことができるのです。

オリジナルテーマを作成することができれば、既存のテーマでは実現できなかったデザインや機能を自由に実現することができます。ご自身のショップを成長させていきたい方にとって、それは大きな契機となるでしょう。ここはぜひとも挑戦すべきところです。

BASEのHTML編集【概要編】

BASEがHTML編集Appをリリースしたのは、2017年のことです。それから現在までのあいだに、より使いやすくなるよう、少しずつ進化を重ねてきました。ここでは、そのHTML編集Appの基礎と、カスタマイズの基本について解説していきます。

利用の開始

まず、HTML編集Appをインストールします。次に、メニューの「デザイン編集」をクリックし、そのあとに「HTMLを編集する」をクリックします。これでHTML編集Appが利用可能となります。

禁止事項

HTML編集Appを利用するうえでの禁止事項として、次のようなものがあります。

  • {BASEMenuTag}、{FaviconTag}を非表示にしない。
  • JavaScriptなどにおいて、意図的にサーバーに負荷をかける編集はしない。

負荷をかける編集が迷惑行為にあたるのは、説明するまでもないです。{BASEMenuTag}は、画面右上にBASEのロゴを表示させるためのタグ、そして{FaviconTag}は、ファビコンを表示するためのタグです。あなたがどんなデザインを求めるにせよ、これらはきちんと表示させなければいけません。

ファイルのアップロード

ショップのデザインに必要な画像や、独自のJavaScriptコードなどを外部ファイルとして読み込みたい場合には、BASE Developersのファイルアップローダーからアップロードします。

レスポンシブ設定

レスポンシブとは、ある一つの記述によって作られたページが、PC版とスマホ版でそれぞれ異なる表示のされ方をするよう設計されていることです。初期設定では、このような設定にはなっていません。お客様がスマホで閲覧したときには、スマホ用のテンプレートテーマに切り替わるようになっています。

これをレスポンシブに変更したいときは、デザイン編集のページにある「デフォルトのモバイルテーマを使用」をオフにします。そして、HTML編集Appでヘッダを編集し、viewpointによる区分けなどを行ってください。

注意事項

HTML編集Appは定期的にアップデートを重ねており、そのたびに独自のタグが追加されたり、挙動が変更されたりすることがあります。常に最新のバージョンについてチェックしておくようにしましょう。また、編集をする前にバックアップをとっておく習慣をつけることも大切です。

マークアップの構造

BASE Templateにおいては、通常のHTMLとはべつの、独自のテンプレート変数(独自タグ)を使います。

テンプレート変数には「変数」「ブロック変数」の2種類があります。

  • 変数」は、{IndexPageURL}や{AboutPageURL}のように、配置するだけでその場所に変数の中身を出力するタグ。
  • ブロック変数」は、{block:AppsBlog}や{block:AppsItemCategory}などのように、”block:”が頭につき、{block:xxx}〜{/block:xxx}のように囲って、条件分岐により表示を切り分けたりするときに使うタグ。

同様の構造を持った別サービスとしては、Tumblrが挙げられます。Tumblrをカスタマイズした経験のある方は、理解しやすいでしょう。

BASEのHTML編集【テーマカスタマイズ編】

この項目では、無料で使用することのできるテーマをカスタマイズする具体的な方法について解説していきます。

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

以前はテーマカスタマイズをするだけでも有料だったのですが、現在は無料となっています。HTML編集Appさえインストールすれば、すぐにカスタマイズを始めることができます。

無事にインストールが完了したら、管理画面メニューの「デザイン」をクリックし、デザインページへ移ります。

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

HTML編集を行うには「デザイン編集」のタブにある「HTMLを編集する」をクリックしましょう。するとソースコードが表示されます。これを編集することでHTMLやCSSのカスタマイズを行います。

カスタマイズできるページ

BASEのページは7ページから構成されていますが、HTMLも含めて編集できるのは、そのうちの3ページだけとなります。

  1. 1トップ(一覧)ページ
  2. 商品詳細ページ
  3. aboutページ

トップページの中には、カテゴリページと検索結果ページが含まれており、お客様の操作に応じてコンテンツを表示し分けることができます。

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

  1. 特商法ページ
  2. プライバシーページ
  3. お問い合わせページ
  4. ブログページ(ブログAppを入れている場合)

BASEのHTML編集【独自タグ編】

この項目では、HTML編集Appにおいて使用することのできる、HTMLともCSSとも異なる独自タグについて解説していきます。

BASEテンプレート変数

BASEの独自タグである「BASEテンプレート変数」を使うことによって、BASE特有の処理をさせることができます。たとえば、指定した内容を特定のページ(トップページ、特定商品ページ、あるいは在庫がある商品ページ)にのみ表示したり、各商品のページにトップページのURLを表示させたり、といった処理です。

BASEテンプレート変数の使用例

BASEテンプレート変数は、HTML編集Appがインストールされていれば、すぐに使用することができます。ダッシュボードの「デザイン編集」→「HTMLを編集する」で行います。

先述したとおり、テンプレート変数には「変数」と「ブロック」の2種類があります。「変数」は単体で使用するものです。記述することによって、指定したデータをその場に表示させます。

たとえば、タグを以下のように記述した場合――。

<body>
 ~~~
 {IndexPageURL}
 ~~~
</body>

以下のように表示されます。

~~~
http://トップページのURL/
~~~

「ブロック」は、開始タグと終了タグで囲んだ中身に、ループ処理や条件分岐などの処理を施すためのものです。

たとえば、ブロックを以下のように記述した場合――。

<body>
 ~~~
 {block:IndexPage}
 トップページにのみ表示
 {/block:IndexPage}
 ~~~
 {block:ItemPage}
 商品ページにのみ表示
 {block:ItemPage}
 ~~~
</body>

トップページにおいては、以下のように表示されます。

~~~
トップページにのみ表示
~~~
~~~

そして商品ページにおいては、以下のように表示されます。

~~~
~~~
商品ページにのみ表示
~~~

まとめ

以上、BASEのHTML編集Appについて、初心者向けに基礎的なところを解説しました。
BASEは最初のリリース(2012年)から長い年月を経て、機能がこなれており、安価に柔軟なショップデザインを施すことができるサービスです。
HTML編集Appで細かなカスタマイズをするには、ある程度のハードルはありますが、やってみる価値は十分にあります。

あなたがネットショップを運営したいのであれば、この記事を参考にして、ぜひともBASEでオリジナルショップの構築にチャレンジしてみてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。