BASEのHTMLを編集する方法について解説する 【初心者向け】

みやしも プログラミング

今回は、BASEでHTMLを編集する方法について解説してゆきます。

画像付きで分かりやすくまとめました。HTML編集を使いこなしてオリジナリティの高いネットショップにしよう!

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

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

誰でも手軽にネットショップが開設できるWEBサービス『BASE(ベイス)』、今回は、そんなBASEのショップデザインがカスタマイズできる『HTML編集』の機能について解説してゆきます。



▼BASE公式サイトはこちら

BASE(ベイス)を今すぐ利用する



BASEに会員登録する方法について、画像付きで詳しく解説する記事を書きました。

BASEのデザインをカスタマイズする方法

BASEのデザインをカスタマイズする方法

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



BASEのテーマには無料テーマ有料テーマがあり、通常はこれらのテーマを選択する事でショップのデザインを変えてゆきますが、より細かくカスタマイズをするためには テーマのHTMLを編集することとなります。



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

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

▼BASE Apps『HTML編集』でできること

  • デザインやレイアウトを自由に変更できる
  • プレビューを使って確認しながら作業できる
  • HTML・CSS・Javascriptが利用できる
本投稿で紹介する方法ではHTMLやCSSなどプログラミングの基礎知識が必要です。

HTML&CSSを学びたい方は『Progate(プロゲート)』や『 TechAcademy(テックアカデミー)』といった オンライン学習サービスの利用がおすすめです。



この様に、HTML編集のしくみを利用する事でショップのテーマ・デザインを自由にカスタマイズする事が可能となります。

とはいえカスタマイズするにはHTML&CSSや基礎的なプログラミング知識が必要です。専門的なスキルを伴うために、WEB初心者の方にとっては難しい作業と言えます。
初心者の方にはハードルの高い作業だと思います。しかし、これらスキルを必要とせずともデザインを変える方法があります。

BASEデザインマーケットを利用する

ひとつ目は、BASEデザインマーケットを利用して有料テーマを購入するといった方法。

BASEデザインマーケット

▼テーマの購入はこちら

BASEデザインマーケットを利用する

最初からデザイン性の高いテーマを利用するなら、デザインマーケットを利用するのがおススメです。

クラウドソージングで外注する

ふたつ目が、『ココナラ』や『ランサーズ』といったクラウドソージングを利用して、BASEのHTML編集を使ったデザインのカスタマイズ作業を外注するといった方法です。

BASEのカスタマイズを依頼する方法①ココナラ

▼公式サイト

ココナラを今すぐ利用する

BASEのカスタマイズを依頼する方法②ランサーズ

▼公式サイト

ランサーズを今すぐ利用する



こういったクラウドソージングの利用は、デザインのみならずロゴ・名刺・バナー・記事作成といったさまざまな作業の依頼も可能です。ショップ運営を始めとするネットビジネス全般で役立つため、もしもの時にも登録しておいても間違いない無いWEBサービスです。

企業に依頼するよりはるかに安く、デザイン変更が依頼出来ますよ!

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

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


インストール方法

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



▼公式サイト

BASE Apps



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



テンプレート変数を使ったテーマのカスタマイズには理解が必要ですが、一方で、ちょっとした画像・テキストの追加など、デザインだけの調整をするならテンプレート変数は深く理解しなくても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

▼公式サイト

ファイルアップローダーを開く



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



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

  • テンプレート上の任意の箇所にバナーやヘッダーなどのオリジナルの画像を挿入したい
  • CSSファイルを作成してテンプレートから利用できる様にしたい
  • Javascriptファイルを作成してテンプレートから利用できる様にしたい
  • Javascriptライブラリをテンプレートで利用したい


公式でファイルアップローダーが用意されているのはとても便利ですね!

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

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



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

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

関連記事

最新記事