FANBOX開設のお知らせ詳細はこちら

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

注意

本記事は未完成です。

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

Index

今回の記事について

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

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

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

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

そもそも@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のような開発環境をインストールしてもいいですが、毎回起動しなきゃいけないし他の方と共有もできないのでオススメはしません。が、楽です。人によってですが……

FTPサーバーを利用する

こんな感じにFTPサーバーにCSSをアップすると、URLにすることができます。

わたし

後日詳しく書きます…… 今日はこれで力尽きました😢

GitHubを利用する

こんな感じにGitHubへCSSをプッシュして、かつGitHub Pagesを有効にするとURLにできます。

わたし

めちゃくちゃ技術的な話になりそうなので別記事にします🥺

XAMPPを利用する

こんな感じです。ローカルサーバーを建ててURL化できます。

わたし

ヒマだったら書きます。
XAMPPインストールして、Apache起動して、xampp\htdocsにCSSファイル置けばhttp://localhost/なんたら.cssでアクセスできます。

最期に

力尽きて申し訳ないです。来週中には完成させますのでお待ち下さい…… 🙏🙏

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

紅坂柚月(あかさかゆづき)です。
フレ石編成的ななにか DiSpeak の作者。

バ美肉VTuberやってます。
お酒ください。

コメント

コメントする

CAPTCHA


Index
閉じる