【BASE】HTML・CSSを編集。オリジナルデザインのショップページを作成。

BASEとは、誰でもネットショップを開くことができるサービスです。

現時点でBASEを利用していない方で始めてみたいという方は、こちらの記事を参考にしてください。

誰でも簡単にネットショップをオープン！BASEの始め方。１から開設方法を説明。

BASEで初めてオンラインショップをオープンしたい方向けに解説しています。アカウント登録について一つずつ丁寧に画像付きで説明。誰でもすぐにオンラインショップをはじめことができるBASE。売りたいものがある方は、まずはBASEではじめてみてはいかがでしょう。

adocal-blog.com

BASEでは、様々なデザインフォーマットを無料で利用することができます。また、有料デザインもあり、購入することでより多くのデザインフォーマットを使用することができます。

BASEデザインマーケットはこちらから。

この記事は、BASEサイトを自分でデザイン編集したい方に向けて説明をしていきます。

編集を行うにあたり、HTML・CSSの知識が必要になります。未経験の方が編集するとぺージデザインが崩れる可能性がありますので、ご注意ください。

HTML編集アプリを追加する

編集するためには、BASEが提供しているアプリを追加する必要があります。

ご自身のBASEにログインし、メニューから「Apps」をクリックし、「HTML編集」をインストールしてください。

インストールボタンがありますので、クリックしてください。完了すれば、編集する準備ができました。

HTML編集を利用する

BASEにログインした状態でメニューから「デザイン」をクリックし、次に画面左下の「HTML編集」ボタンをクリックします。

画面中央くらいに「＋テーマを作成する」ボタンから「新規作成」をクリック。

そうするとアルファベットの羅列した画面が出てきます。

この画面から編集を行えばオリジナルのデザインを作成することができます。

実際にHTML・CSSを編集してみよう

先ほどの編集画面上部の「プレビュー」をクリックしてください。

そうすると、web上でどのように見えているかの表示がされます。

メニューの背景色を変更してみよう

今回はメニューボタンを実際に編集してみます。初期状態はこのようになっています。

とてもシンプルなメニューボタンです。

現在、メニューの背景色は白となっていますが、黒へ変更してみます。

まずはメニューを表示させている「HTML」を確認すると「body.shop #shopHeader nav」となっていました。

これに「CSS」の設定をこのように追加します「background-color: rgb(0, 0, 0);」

この状態で再度プレビューを確認してみます。

そうすると真っ黒なバー状態になっています。
背景を黒にはできましたが、文字も黒の設定だからです。今度は文字を白に変更します。

文字の色を変更してみよう

メニューの背景色と同化しているテキストの色を白に変更します。

該当のHTML・CSSの箇所は「body.shop #shopHeader nav ul li a」となっています。

ここに「color: #ffffff」を追加します。

実際にどのように変更できたか確認します。

無事に文字が白で表示することができました。

まとめ：HTML・CSSを編集すれば自分だけのオリジナルデザインを制作することができる。

BASE内の「HTML編集アプリ」を利用すれば、自分だけのオリジナルショップをデザインすることが可能となります。

今回はメニューの背景色・文字色を変更したのみですが、もっと大きな変更も可能になります。そこについては、少しずつ記事にしていこうと思います。

また自分で編集することができなくても、BASEデザインマーケットを利用すれば、誰でもおしゃれなページを設定することも可能です。ただし、有料となっていますのでご注意ください。

それでも自分で編集して、自分だけのオリジナルデザインを作成したい方は「HTML」と「CSS」を学ぶ必要があります。

参考書籍をいくつかご紹介します。