無料ネットショップのBASEでhtmlをカスタマイズするにはちょっとしたコツがいる

この記事は約3分で読めます。

無料ネットショップのBASE無料ネットショップの「BASE」は、すでに利用者が80万人以上いるそうだ。無料で簡単にスタートできるネットショップとしては代表選手のようで市民権を得た印象がある。
さて、このBASEでは多少だがhtmlの編集ができる。CSSもhtmlもたったひとつのテンプレートで管理されており、しかもBASEの独自タグも挿入されているので、少しわかりにくい。しかし、逆にいえば、たったひとつのファイルを編集するだけでカスタマイズできるというのは便利でもある。
BASEでhtmlを編集するさいは「HTML編集」という無料アプリがあるので、インストールして利用する。

無料ネットショップのBASE

HTML編集をするためのアプリを使う

▼BASEのHTML編集アプリ
basehtmlapp.jpg

https://apps.thebase.in/detail/51

まずは、この「HTML編集」というアプリをインストールしておく。

HTMLを編集する

BASEの管理メニューから「利用中のAPP」を開き、「HTML編集」を選択しクリックするとデザイン編集に移動するように促される説明がある。

ショップページのHTMLの編集はデザイン編集で行えます。
HTML編集の仕様等はこちらをご覧ください。

上記の「デザイン編集」をクリックするとhtmlを編集できる画面になる。

以下は、遠田がテスト運用している「https://base.semm.jp/」の例である。

basehtml001.jpg

例えば、上記の編集画面では

<p style=”clear: left”> </p>
<h5>【公式サイト】</h5>
<p>株式会社ドモドモコーポレーションの公式サイトは<br />
<a href=”https://www.dm2.co.jp”>https://dm2.co.jp</a><br />
をご覧ください。</p>

という部分を挿入している。

▼編集部分の拡大
basehtml002.jpg

このように、該当部分に挿入したい内容をhtml記述で書けば編集ができる。

ただし、このエディタは編集がしにくいので、自分が使い慣れているエディタを使ったほうがいいだろう。

遠田は、秀丸エディタを利用している。もとのソースはバックアップしたうえで編集した。

編集したhtmlソースの例

▼文字コードがUTF-8
basehtml20200203.txt

▼文字コードがシフトJIS
basehtml20200203sjis.txt

自身の備忘録を兼ねてここに記録しておく。なお、文字コードがUTF-8かシフトJISかによってダウンロードした後に日本語部分が文字化けする場合があるので2種類用意しておいた。文字コード以外の内容はまったく同じものである。