皆さんこんにちは
緊急事態宣言は延長され、一体いつになったら感染者数は落ち着くんだろうか…
という今日この頃です。
皆さんはBASE (ベイス)をご存知でしょうか？
ネットショップを無料で簡単に開設できるサービスみたいです。
昨今のコロナ禍で外出が減ったため、通販などのネットショップの需要が高まってきています。
そんな中、簡単にネットショップが始められるBASEはテレビでCMを流すほど人気になっているようです。
私がBASEのオリジナルテーマを作ろうと思ったきっかけは、兄がBASEで開いていたショップがあまりにもダサかったからです…
私の兄は副業としてちょっとした通販をBASEでやっていたのですが、サイトのTOPにイラストを載せたいから描いて欲しいと言われてURLが送られてきました。
ですが、見てみるとTOPうんぬんの前にサイトがダサい！！
ごちゃごちゃした背景に、いらんhover (カーソルが乗った時に出る表示)が付いていたりと非常に見にくい。
そのことを兄に指摘すると、色々修正してそれなりに見やすいサイトにしてくれました。（上記の２点は改善されていました！）
がしかし、ショップロゴが微妙な位置に表示されたり、スマホからみるとTOPの画像が見切れていまったりと、イマイチなところが残っていました。
やっぱり無料のテーマだと限界があるんですよね…
そこで、こうなったら自分にぴったりのオリジナルテーマを作ってやろうと思いました！
BASEでは自分でテーマを作って販売することができ、HTML・CSS・JavaScriptが分かれば自分好みにテーマを作り変えたりすることが出来ます。
有料のテーマを買うほどではないけどちょっと変えてみたい、、、
HTML・CSS・JavaScriptの勉強になにか作ってみたい、、、
という人もいるかと思うので、今回から少しずつ作り方を解説していきたいと思います。
今回は、本格的にコードをいじる手前まで説明していきます。
①アカウントを作成する
アカウントの作成は公式の記事を参考にしてください。(https://baseu.jp/19697)
②拡張機能をインストール
アカウントが作成出来たら、ログインしてホームに移動します。
ホーム画面の一番上にたくさんカテゴリーがありますが、その中のAppsを開いてください。
Appsを開くと、左側に利用中のAppsがあるので、その中にHTML編集があればOK、無ければ下にスクロールすると「ショップをデザインする」の下にHTML編集があるのでクリックして開いてインストールしてください。
③BASE Templateから新規テーマを作成
HTML編集をインストールしたら、設定を編集するボタンをクリックしてください。（あるいは上のカテゴリーのデザインを開くと左の一番下にHTML編集があります）
そうすると中央に「＋テーマを新規作成する」ボタンがあるのでクリックしてください。
元になるテーマは基本的にサンプルテーマだけなので、そこからこのテーマを元に編集をクリックしてください。
以上の手順でDevelopersを起動できます！
何だか文字がいっぱいの画面が出てきて混乱すると思いますが、8割読めなくても大丈夫です(笑)
具体的な編集は次回から取り組みたいと思います。
それでは、今日はこの辺で
ありがとうございました！
入会申込
ログイン
