【Blogger】BloggerのCSSをGoogleDriveを使って外部ファイル化する

BloggerのCSSを外出ししてみました。
サーバはGoogleDriveを使ってやってみます。

結論

リンクのURLの書き方にちょっとしたコツが必要でした。
これ、すごくちょっとしたことなのですが、読み込みの速度がこれを間違えるとかなり違いました。

遅いと言っても1秒程度なのですが、サイトの表示でCSSのせいで1秒も遅延するのは、ちょっといただけません。

では、やり方を。

１．GoogleDriveにCSSファイルをアップする

一応Mac用のクライアントアプリあるのですが、これが非常に使えない。

MacのGoogleDriveにファイルを入れても全く同期されません。
いや、正確には同期はされるのですが、非常に遅いし、そのタイミングが良くわからない。

一度同期を停止して、再開すれば同期される事もあるのですが、必ず同期されるとは限らない。

非常にストレスなので、僕はMacクライアントを消してしまいました。
普通に、Webでアップしたほうがずっとストレスなく出来ます。

と言う事で、ファイルをアップします。

２．CSSファイルを公開設定にする。

Bloggerから読み込みが出来るように、CSSファイルを公開設定にします。

３．CSSファイルを読み込むためのURLを取得する。

ここがポイントです。

僕はずっとこのURLを間違えていて、読み込みが非常に遅かったです。

まず、対象のCSSファイルを開きます。


次に共有ボタンをクリックします。



この時に表示されるURLの〇〇部分をコピーします。



コピーした文字を


の後ろに貼り付けます。

僕の場合は、こんな感じ。


僕が何を間違えていたかと言うと、URLがわからなかったので、無理やりindex.htmlを作ってそれを表示させて、このURLのindex.html部分を、mystyle.cssに変えたURLで読み込みしていたのです。

理論上は、読み込み出来るのですが、これが非常に遅い。
Chromeの開発ツールで確認して頂くと、倍くらい遅い。


ここまでで、一般公開されるCSSが用意出来たら、Bloggerに取り込んでみます。

   <link href='https://www.googledrive.com/host/0BzuNIroprPqXb1hhNDl2VHNIYTQ' rel='stylesheet'/>  </head>

みたいに、「/head」の上あたりに入れておきましょう。

CSSは基本的に一番下で読み込んだものが適用されるので、これで変更をかけていけばCSSが適用されます。

以上です。