BLOG
ブログ・お知らせ
  • TOP
  • BLOG
  • ネットショップ『BASE』のHTMLを編集する方法について解説します 【初心者向け】

ネットショップ『BASE』のHTMLを編集する方法について解説します 【初心者向け】

 2020.05.04  ブログ  みやしも

誰でも手軽にネットショップが開設できるWEBサービス『BASE(ベイス)』今回はそんなBASEで作成したネットショップの見た目を、自由にカスタマイズする方法について解説してゆきます。


BASEで作成したネットショップのHTMLを編集する方法を画像付きで分かりやすくまとめました。HTMLを編集してオリジナリティの高いネットショップを作成しましょう!!

BASEでHTMLを編集する方法について解説します

誰でも手軽にネットショップが開設できるWEBサービス『BASE(ベイス) 、今回はそんなBASEで作成したネットショップの見た目を、自由にカスタマイズする方法について解説してゆきます。



▼BASEに会員登録する方法

おすすめ

BASEに登録する方法!会員登録からネットショップの公開までの流れを画像付きで解説します

BASEのテーマをカスタマイズするためには?


作成したネットショップの見た目を自由に変えるために、BASEでは『テーマ(テンプレート)』という仕組みを提供しています。



BASEのHTMLを編集する方法_テーマ.jpg



BASEには無料テーマ有料テーマが存在しており、通常はこれらのテーマを選択する事でショップの見た目を変える事が出来ますが、より細かくカスタマイズをするためには、テーマのHTMLを編集する必要があります。



テーマのHTMLを編集するためには、BASE Appsが提供している『HTML編集』のアプリを利用します。



BASEのHTMLを編集する方法.jpg



▼BASE Apps『HTML編集』の主な機能

  • デザインやレイアウトを自由に変更できる
  • プレビューを使って見た目の変更を確認しながら作業が出来る
  • HTML/CSS/Javascriptが利用できる



本投稿で紹介する方法使ってカスタマイズするためにはHTMLやCSSなどの知識を必要とします。HTML&CSSを学びたいと考えている方は『Progate などのオンライン学習サービスの利用がおすすめです。


有料になりますが、最初からデザイン性の高いテーマを利用するなら『DESIGN MARKET を利用するのもおススメです!

BASE Apps で『HTML編集』をインストールする


HTMLを編集するためには、BASE Appsで提供されている『HTML編集』を自分のネットショップにインストールする必要があります。


インストール方法

BASEのダッシュボードにログインして『BASE Apps』メニューでインストール作業を行います。



▼BASE Appsを開く

BASE Apps 

※クリックすると別ウィンドウで開きます

※BASEアカウントが必要になります



BASE Appsを開くと、BASEで利用できる沢山のアプリが並んでいます。一覧を辿ると『ショップをデザインする』の所に『HTML編集』がありますので、インストールするためにそのままクリックします。



BASEのHTMLを編集する方法_インストール.jpg



開いたページで『インストール』ボタンを押せば、そのアプリのインストールが行われ、自分のネットショップ内で『HTML編集』が利用できる様になります。



BASEのHTMLを編集する方法_インストール2.jpg



以上で『HTML編集』のインストール作業は完了です。


アプリをインストールする方法はめちゃくちゃ簡単!BASEには他にも便利なアプリが沢山あるので気になる物があればチェックしてみよう!

HTMLを編集する方法

BASE Apps で『HTML編集』をインストールしたら早速利用してみましょう。


HTMLの編集画面を開く

BASEダッシュボードの『デザイン』メニューを開き、デザイン編集画面の『HTMLを編集する』 ボタンを押せばHTMLの編集画面が開きます。



▼ダッシュボードの『デザイン』メニューを選択しよう

BASEのHTMLを編集する方法_ダッシュボード.jpg



▼デザイン編集画面の『HTMLを編集する』ボタンを押そう

BASEのHTMLを編集する方法_デザイン編集画面.jpg



▼HTML編集画面はこんな感じになっています

20200502-00351.png


HTML編集してみる

HTMLを編集する基本な流れは次の通りです。



▼HTML編集の流れ

  • HTML編集画面で任意の箇所のHTMLを編集する
  • 『プレビューの更新』ボタンを押してHTMLの変更内容を確認する
  • デザイン編集画面で『保存』ボタンを押して変更を確定する



順番に詳しく説明してゆきますね!!今回は試しに『みやしものネットショップ』という文字をタイトルの下に入れてみたいと思います。 ※今回の例ではBASEデフォルトのテーマ『SIMPLE』を使用します)



▼①HTML編集画面で『みやしものネットショップ』という文字を入力する

BASEのHTMLを編集する方法_編集1.jpg



▼②『プレビューの更新』ボタンを押してHTMLの変更内容を確認する

BASEのHTMLを編集する方法_編集2.jpg



▼③デザイン編集画面で『保存』ボタンを押して変更を確定する

BASEのHTMLを編集する方法_編集3.jpg



HTML編集の基本的な流れは以上です。③の作業を行うと実際のショップにデザイン内容が反映されるので、事前にバックアップを取るなどの注意が必要です。(※次の章で詳しく説明してゆきます)


プレビューを見ながら作業できるのがとても便利ですね!!次の章ではより実践的な活用方法について紹介します!!

テーマ編集時のポイント

これまでは『HTML編集』をインストールする方法、そして『HTML編集』の基本的な使い方について解説してきました。ここからはより実践的にHTMLを編集するために、作業時に抑えておきたい点をいくつか紹介してゆきたいと思います。



▼テーマ編集時のポイント

  • 編集前にバックアップを作成しよう
  • テンプレート変数の存在を知っておこう
  • テーマの内容の読み解き方
  • ファイルのアップロード方法について
『HTML編集』機能を使いこなせば、BASEで開いたネットショップをよりオリジナリティのある見た目にカスタマイズする事が出来ますよ!!

その1:編集前にバックアップを作成しよう

HTMLを編集する際は必ずバックアップを作成する様にしましょう。BASEにはテーマの変更をバックアップする機能は備わっていないため、バックアップは自分で行う必要があります。



バックアップを取らないと編集時に不具合が起きた時に元の状態に戻せなくなり困ります。なので、テーマの編集前には必ずバックアップをする様に心がけましょう。



▼エディターの内容を全てコピーしてバックアップにしよう

BASEのHTMLを編集する方法_バックアップ1.jpg



▼バックアップの一例

BASEのHTMLを編集する方法_バックアップ2.jpg


その2:テンプレート変数の存在を知っておこう

BASEの『HTML編集』とは、BASEで用意されているデザインのテーマ(テンプレート)を直接編集するための機能です。



テーマには、BASEのネットショップの機能を扱うためのBASEが用意した独自のタグが含まれており、この独自のタグは『波括弧{}』で囲われており、『テンプレート変数』という名前で呼ばれています。テンプレート変数は一般的なHTMLとは異なり、あくまでBASE独自の物なので、編集時はこの違いに理解が必要です。



▼HTML内の『波括弧{}』で囲われた部分がテンプレート変数

BASEのHTMLを編集する方法_テンプレートタグ.jpg



誤ってテンプレートタグを消してしまうと、本来のネットショップの機能が失われる恐れもあります ので、テンプレートのHTML編集時には十分注意しましょう。



テンプレート変数を扱ったカスタマイズを行う際は、BASE Developers Docsの情報を参考にしましょう。



BASEのHTMLを編集する方法_BASE Developers.jpg



▼BASE Template

BASE Template 

※クリックすると別ウィンドウで開きます



テンプレート変数を使ったテーマのカスタマイズには理解が必要ですが、一方で、ちょっとした画像・テキストの追加など、デザインだけの調整をするならテンプレート変数は深く理解しなくてもOK。テンプレート変数を削除しない様に気を付けながら、HTMLタグの部分だけ編集する様にしましょう。

テンプレート変数はHTMLとは異なる物である事を理解しよう!!簡単なデザインだけ変えるなら、あまり深くは理解しなくてもOK!!そっと、そのままにしておきましょう。

その3:テーマの内容の読み解き方

BASEのテーマは1つのソースでショップ全体のページが構成されています。



BASEのネットショップは初期状態で全部で6ページありますが、その編集内容はページごとに分かれているという訳ではなく『HTML編集』のエディター1ページだけで、全ての編集を行う作りになっています。



具体的に、ページ毎の内容はブロックタグ』という物で囲われており、ブロックタグを通じてページ毎にその内容が出し分けられる 様になっています。例えばトップページは、次のようなブロックタグで出し分けが行われます。



▼例:トップページのみ表示されるブロックタグ

{block:IndexPage}
    <!-- トップページのコンテンツをここに記述 -->
{/block:IndexPage}



各ページの内容を表すブロックタグを以下に整理したので、作業時の参考にして頂けたらと思います。



▼各ページの内容を表示するためのブロックタグ一覧

トップページ {block:IndexPage}~{/block:IndexPage}
商品詳細ページ {block:ItemPage}~{/block:ItemPage}
Aboutページ {block:AboutPage}~{/block:AboutPage}
Contactページ {block:ContactPage}~{/block:ContactPage}
プライバシーポリシー {block:PrivacyPage}~{/block:PrivacyPage}
特定商取引法に基づく表記 {block:LawPage}~{/block:LawPage}



最初は少しわかり辛いかもですが、『{block:ItemPage}』のタグで囲われているから...この範囲は商品詳細ページの内容!といった様に、コードを見て、自分が編集したいページの場所を特定していく事がHTML編集時のポイントです。

HTML編集のプレビュー機能を活用して、直した場所が合っているかを確認しながら作業を進めてゆきましょう!

その4:ファイルのアップロード方法について

テンプレートで画像・CSS・Javascriptなどの外部ファイルを使いたい場合は、BASE Developersで用意されている『ファイルアップローダ―』機能を利用すれば出来ます。



BASEのHTMLを編集する方法_ファイルアップローダ―.jpg



▼BASEのファイルアップローダ―

ファイルアップローダ― 

※クリックすると別ウィンドウで開きます



ファイルアップローダー』を利用してファイルをアップロードすると、そのファイルのURLが発行され、テンプレートから読み込ませる形で利用できます。この機能は、例えば次のようなケースで利用できると思います。



▼ファイルアップローダーを使う機会は?

  • テンプレート上の任意の箇所にバナーやヘッダーなどのオリジナルの画像を挿入したい
  • CSSファイルを作成してテンプレートから利用できる様にしたい
  • Javascriptファイルを作成してテンプレートから利用できる様にしたい
  • Javascriptライブラリをテンプレートで利用したい
公式でファイルアップローダーが用意されているのはとても便利ですね!!

オリジナリティのあるネットショップを作ろう

BASEではBASE Apps から提供されている『HTML編集』機能を利用すれば、ネットショップのテーマを細かくカスタマイズする事が出来る様になっています。



HTML編集機能を使ったカスタマイズにはHTMLの知識を、やりたい事によっては更にテンプレート変数などBASE独自の深い知識を必要としますが、BASEのHTML編集機能は自由度が高く、使いこなせばよりオリジナリティの高いネットショップを作成する事も可能です。


テンプレート変数などBASE独自の知識も必要になるため、最初は少し戸惑うかもですが、コツさえつかめばサクサク作業が出来る様になると思います!ぜひトライしてみて下さいね。