BASEのHTML編集appでネットショップ制作時に独自CSSを外部管理する方法

BASEのHTML編集appでネットショップ制作時に独自CSSを外部管理する方法

https://arrown-blog.com/base-html-app-caution/

以前、BASE(ベイス)のHTML編集appでネットショップを制作する際の注意点についてまとめたブログを書きました。

その時のブログの中で、「CSSやJavaScriptも1つのHTML内に記述しなければならない」という内容を書いたのですが、実際1つのHTML内にCSSもJavaScriptも編集していかないといけないのは、かなりソースコードの管理が手間ですよね・・・

ということで、BASEの外部にCSSやJavaScriptを置いてソースコードを管理する方法の1つをご紹介したいと思います。

手順1:GitHub上に作ったリポジトリにソースコードをPUSH、つまり置いておく

まずはGitHub上に作ったリポジトリにソースコードをPUSH、つまり置いておきます。
こうすることで、外部にCSSやJavaScriptのソースコードを置いておく状態が完成します。

https://arrown-blog.com/git-begin2/

ちなみに、GitHub上にソースコードを置いておく方法については、上述したGit入門2 – SourceTreeでリモートリポジトリを絡めたGit操作を理解する-で紹介していますので、ぜひ参考にしてみてくださいね!

手順2:RawGitを使用して、GitHub上においたコードを、ソースコードとして読み込みできる状態にする

GitHub上にソースコードを置くところは先ほどまでの工程でできました。
しかし、GitHub上に置いたコードは、このままではソースコードとして読み込んで利用することができないのです。

https://rawgit.com/

ここで出てくるのが、RawGitというサービス。
RawGitを利用することで、GitHub上に置いたCSSやJavaScriptのコードをソースコードとして利用し、外部読み込みすることができるようになります。

RawGitのトップページ画面

RawGitの使い方は簡単。
一番上にあるところにGitHubに置かれたソースコードのURLを入力すると、左下のテキストボックスに、外部読み込み用としてGitHub上のソースコードを利用するためのURLが出てきます。

このURLをコピペして貼り付けるだけ!

これで一連の手順としては終了です!

まとめ

ということで今回は、BASEのHTML編集appでネットショップ制作時に独自CSSを外部管理する方法の一例についてご紹介いたしました!

なお、この方法は公式の方法ではないので、万が一何かあっても、当ブログでは保障いたしかねます。
あくまで方法の1つとしてこんな方法があるみたいですということをご紹介させていただいただけなので、ご了承ください!

BASEでネットショップ制作Tipsシリーズ

無料でECサイト・ネットショップを制作することができるWebサービス「BASE」を使った制作におけるTips集です!