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

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

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

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

まずは、この「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://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種類用意しておいた。文字コード以外の内容はまったく同じものである。

この記事を書いた人

中小企業診断士:遠田幹雄の顔写真遠田 幹雄(とおだ みきお)
 
経営コンサルティング企業である株式会社ドモドモコーポレーションの代表取締役。石川県金沢市を中心とした北陸三県を主な活動エリアとする経営コンサルタントである。
小規模事業者や中小企業を対象として、経営戦略立案とその後の実行支援、商品開発、販路拡大、マーケティング、ブランド構築等に係るコンサルティング活動を展開している。商工三団体などの支援機関が主催するセミナー講師を年間数十回担当したり、支援機関の専門家派遣中小企業基盤整備機構の経営窓口相談に対応したりもしている。
保有資格:中小企業診断士、情報処理技術者
 
会社概要およびプロフィールは株式会社ドモドモコーポレーションの会社案内にて紹介している。


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  

この記事のURL「https://dm2.co.jp/2020/02/basehtml.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2020/02/basehtml.html」をQRコードで表示「https://dm2.co.jp/2020/02/basehtml.html」
パソコンで表示されたページをスマホでも見たい場合は、このQRコードをスマホのカメラ(QRコードが読めるリーダー)で読むとページが表示されます。