物販

【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でオリジナルショップの構築にチャレンジしてみてください。

ところで、ビジネスで成功するためには独学よりも体系化された教材やサービスを活用して学ぶ方が結果が早く出ます。

ここではアクシグ編集部が予め登録した上で責任者に直接取材をし、有用性を確認した教材やサービスのみを厳選してご紹介します。無料ですのでお気軽にご登録またはご相談ください。

【無料レポート】中国輸入ビジネス成功の秘訣

安定して稼げる物販、副業として話題の中国輸入ビジネス。 「中国の卸サイト」で仕入れて、「アマゾン」「メルカリ」「ヤフオク」で売る、誰でもできる分かりやすい物販ビジネスです。

数万円の仕入れからスタートできる! 完全在宅でもOKだから、自分のペースでできる! 中国語不要、安く仕入れて検品・納品までしてくれる仕組みも紹介!

  • 数万円の仕入れからスタートできる!
  • 完全在宅でもOKだから、自分のペースでできる!
  • 中国語不要、安く仕入れて検品・納品までしてくれる仕組みも紹介!

行動力とやる気があればOK! サラリーマン、派遣社員、公務員、シングルマザー、自営業、フリーターなどあらゆる環境の方がどんどん成功しています。

この無料メール講座執筆者も、元は時給800円フリーターでしたが、 1年後には年収1,000万円、2年後には年収2,040万円を実現しました。

あなたも、中国輸入ビジネスで年収1,000万円を達成してみませんか?

【漫画で分かる】無在庫輸入物販ビジネス

アメリカやヨーロッパの商品を日本の「Amazon」などで 受注をしてから仕入れる無在庫方式の販売方法を解説しています。

  • まとまった資金がなくてもスタート可能!
  • 取り寄せ式なので大量の在庫を抱えなくて良い!
  • ネットで完結なので自宅でできる!

1つの商品の販売で1万円以上の利益を得ることもでき、 効率良く手元の資金が増やすことができます。

あなたもぜひ無在庫欧米輸入ビジネスで、 堅実な収入の柱を一緒に作りませんか?

【無料相談】Biz English

ビジネス英語は3ヶ月でマスターできます!

インターネットの買い物に慣れてくると、アメリカのアマゾンやeBayで購入したり出品したりしたくなるでしょう。英語ができなくてもGoogle翻訳やDeepLなどのツールを使えば始めるのは簡単です。

ところがクレームや返金などが発生すると機械翻訳では上手く交渉できません。金額が大きくなりビジネスレベルになるとなおさらリスクが高くなります。

ビズイングリッシュはビジネス英語専門の英会話スクールです。受講生は全くのゼロから英語でアカウントを復活させたり、海外の展示会で交渉に成功したりと幅広く活躍をしています!

今すぐビジネスレベルの英語力を身につけましょう!