はてなブログのCSSをGitHubやBitbucketからインポートできないときの対処法
GitHubなどにCSSをアップロードしたあと、RawのURLを
@import (http://~~~~.css)
みたいに記述して読み込もうとしたら失敗したんですが、GitHubのURLを@importで読み込めるように変換してくれるサイトを見つけたので紹介します↓
raw.githack.com(Bitbucket用)
上のサイトにアクセスしたら、上の欄にインポートしたいCSSのRawのURLを貼ると、下2つにインポートできるようになったURLが生成されるので、それを@importで読み込みます。
注意点
左(in production)は、GithubなどでCSSを編集する度に同じサイトでURLを変換しなければいけないのですが、サイトへ過度にアクセスがあっても制限されません。
右(for development)は、GithubなどでCSSを編集するとURLを再生成しなくても反映してくれますが、サイトへ過度にアクセスがあるとCSSを読み込んでくれなくなります。
そのままだとインポートできない理由
実は僕もよく分かってないんですが、GitHubなどのサイトでRawを開くとContent-typeが「text/plain」という形式になっているらしく、それが「text/css」形式でないとブラウザがCSSとして解釈してくれないらしいです。
で、上にあるサイトが読み込んだサイトのContent-typeを「text/css」に変えたURLを出力してくれるらしい。
他のインポート方法
Dropboxなどに.cssをアップロードして、アップロードしたURL(直リンク)をhtmlに<link>で読み込む方法があるらしいです。正直こっちの方がかなり手っ取り早い気がする。