一般社団法人 全国個人事業主支援協会

COLUMN コラム

皆さんこんにちは

緊急事態宣言は延長され、一体いつになったら感染者数は落ち着くんだろうか…

という今日この頃です。

皆さんはBASE (ベイス)をご存知でしょうか?

ネットショップを無料で簡単に開設できるサービスみたいです。

昨今のコロナ禍で外出が減ったため、通販などのネットショップの需要が高まってきています。

そんな中、簡単にネットショップが始められるBASEはテレビでCMを流すほど人気になっているようです。

 

私がBASEのオリジナルテーマを作ろうと思ったきっかけは、兄がBASEで開いていたショップがあまりにもダサかったからです…

私の兄は副業としてちょっとした通販をBASEでやっていたのですが、サイトのTOPにイラストを載せたいから描いて欲しいと言われてURLが送られてきました。

ですが、見てみるとTOPうんぬんの前にサイトがダサい!!

ごちゃごちゃした背景に、いらんhover (カーソルが乗った時に出る表示)が付いていたりと非常に見にくい。

そのことを兄に指摘すると、色々修正してそれなりに見やすいサイトにしてくれました。(上記の2点は改善されていました!)

がしかし、ショップロゴが微妙な位置に表示されたり、スマホからみるとTOPの画像が見切れていまったりと、イマイチなところが残っていました。

やっぱり無料のテーマだと限界があるんですよね…

 

そこで、こうなったら自分にぴったりのオリジナルテーマを作ってやろうと思いました!

BASEでは自分でテーマを作って販売することができ、HTML・CSS・JavaScriptが分かれば自分好みにテーマを作り変えたりすることが出来ます。

有料のテーマを買うほどではないけどちょっと変えてみたい、、、

HTML・CSS・JavaScriptの勉強になにか作ってみたい、、、

という人もいるかと思うので、今回から少しずつ作り方を解説していきたいと思います。

今回は、本格的にコードをいじる手前まで説明していきます。

 


 

①アカウントを作成する

アカウントの作成は公式の記事を参考にしてください。(https://baseu.jp/19697)

 

②拡張機能をインストール

アカウントが作成出来たら、ログインしてホームに移動します。

ホーム画面の一番上にたくさんカテゴリーがありますが、その中のAppsを開いてください。

Appsを開くと、左側に利用中のAppsがあるので、その中にHTML編集があればOK、無ければ下にスクロールすると「ショップをデザインする」の下にHTML編集があるのでクリックして開いてインストールしてください。

 

③BASE Templateから新規テーマを作成

HTML編集をインストールしたら、設定を編集するボタンをクリックしてください。(あるいは上のカテゴリーのデザインを開くと左の一番下にHTML編集があります)

そうすると中央に「+テーマを新規作成する」ボタンがあるのでクリックしてください。

元になるテーマは基本的にサンプルテーマだけなので、そこからこのテーマを元に編集をクリックしてください。

 


 

以上の手順でDevelopersを起動できます!

何だか文字がいっぱいの画面が出てきて混乱すると思いますが、8割読めなくても大丈夫です(笑)

具体的な編集は次回から取り組みたいと思います。

それでは、今日はこの辺で

ありがとうございました!

 

 

The following two tabs change content below.

内田 美樹

システムエンジニアをしています。 フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア