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

スクリーンショット 2013 04 22 6 39

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


結論


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

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

では、やり方を。

1.GoogleDriveにCSSファイルをアップする


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

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

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

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

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


GoogleDrive1

2.CSSファイルを公開設定にする。


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


GoogleDrive2

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


ここがポイントです。

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

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


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

GoogleDrive3

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

GoogleDrive4

コピーした文字を

https://www.googledrive.com/host/

の後ろに貼り付けます。

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

https://www.googledrive.com/host/0BzuNIroprPqXb1hhNDl2VHNIYTQ

僕が何を間違えていたかと言うと、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が適用されます。

以上です。

0 件のコメント:

このページをブックマーク