OBSでCSSをimportしたいって話だよ

注意

本記事は未完成です。

取り急ぎ公開したので、完成までお待ち下さい。

今回の記事について

今回、以下のようなマシュマロを貰いました。ありがとうございます！

質問の内容ですが、恐らく

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/board.css");

のように@importを使いたい、という質問だと思いますので、今回はその方法をご説明しますね！！

そもそも`@import` とは

MDN Web Docs

@import – CSS: カスケーディングスタイルシート | MDN @import は CSS のアットルールで、スタイルルールを他の有効なスタイルシートからインポートするために使用します。 @import ルールはスタイルシートの最上位で、他のアッ…

詳しい技術的な話は上の記事に書かれていますが、簡単に言うとCSSファイルをスタイルシート上でインポートできる機能ということですね。OBSで例えるならOBSのカスタムCSS上で、外部のCSSファイルをインポートし、利用する機能といった具合になるかと思います。

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/board.css");

上記の場合はhttps://yudukiak.github.io/ccfoliaCSS/CSS/にアップロードされたboard.cssをインポートしてるよ、という感じになっています。つまり、@importを使いたい場合はhttps://yudukiak.github.io/ccfoliaCSS/CSS/board.cssというCSSファイルのURLを作成する必要性がある、ということですね！！！

CSSファイルのURLを作成するには

CSSファイルのURLを作成したい場合はホスティングサービスが必要となります。

残念ながらfile:///C:/Users/akasaka/Downloads/main.cssのようなローカルファイルを指定するのはダメでした。

ホスティングサービスとは？

FTPサーバーやGitHubのようにオンライン上にファイルをアップロードできるサービスの事です。なお、DropboxやGoogleドライブのようなオンラインストレージサービスだと上手く動かないケースが多いので止めた方がいいです。大人しく無料なり有料なりのFTPサーバーをレンタルしたり、完全無料に使えるGitHubを使うのが楽です。

ローカルでしたいならXAMPPのような開発環境をインストールしてもいいですが、毎回起動しなきゃいけないし他の方と共有もできないのでオススメはしません。が、楽です。人によってですが……