よく、
スポンサーリンク
CSS外部化などをしてサイトを軽くして、
ページ表示速度を改善する方法があります。
私のサイトももれなくJavaScriptなどを多用しているので、
重く表示速度が遅いです…。
(;´д｀)ﾄﾎﾎ…
それを、
少しでも改善する方法として、
CSS外部化をしてみました。
今回は、
BloggerブログにてCSSを外部化してページ表示速度が改善したので、
備忘録として残しておきます。
まず、
Google Driveを利用します。
公式web≫Host webpages on Google Drive
cf）
2013.02.05 から、
「Google Drive」でウェブページをホスティング出来るようになりました
『具体的方法』
ページのソースを表示にてCSSの該当部分をコピーします。
アップロード後の設定方法
ここで、
一番上の『ウェブ上で一般公開』に
チェックし保存します。
その後、
さらに以下画像のような画面になります。
ここで表示されるURLを、
コピーしておきます。
この作業を、
.cssファイルが2つある場合は2回行います。
そして、
Bloggerブログのテンプレート設定にて、
『HTMLの編集』
にて、
<b:skin>…</b:skin>
内を削除します。
こちらは中の、
<![CDATA[]]>
は削除しません。
※削除してしまうと、
Googleさんに叱られます。
保存出来ませんし、プレビューもできません。
2つある場合は、
<b:template-skin>…</b:template-skin>
内も削除します。
そして、
Google Driveにアップロードした.cssファイルのURLを、
コピーしておいたと思います。
そのURLのままでは使えません。
ここがミソなのですが、
Google DriveでのURLは、
https://googledrive.com/host/**************/
です。
********は固有IDです。
共有設定した際の、
https://docs.google.com/file/d/0ByGfTGP3BREvcTFKMUtYX2xFMjA/edit?usp=sharing
の
https://docs.google.com/file/d/*****************/
************部分になります。
この場合ですと、
黄色の部分になります。
この黄色の部分をGoogle Driveの、
URL：https://googledrive.com/host/
の後に、
固有ID部分を結合します。
具体的にはこんな感じです。
https://googledrive.com/host/0ByGfTGP3BREvcTFKMUtYX2xFMjA/
これが、
.cssの公開URLになります。
ですので、
このURLへのリンクを、
Bloggerブログの『HTMLの編集』にて、
<header>～</header>内に、
<link href='https://googledrive.com/host/0ByGfTGP3BREvcTFKMUtYX2xFMjA/' media='screen' rel='stylesheet' type='text/css'/>
もしくは、
<link href='https://googledrive.com/host/0ByGfTGP3BREvcTFKMUtYX2xFMjA/' rel='stylesheet' type='text/css'/>
と記載して、
テンプレートを保存します。
こんな感じです。
※２つCSSファイルがある場合は、
該当の固有IDを、
https://googledrive.com/host/
の後に結合（くっつけて）して、
2つのCSSファイルへのリンク記述をします。
<link href='https://googledrive.com/host/******************/' rel='stylesheet' type='text/css'/>
もしくは、
<link href='https://googledrive.com/host/*****************/' media='screen' rel='stylesheet' type='text/css'/>
黄色部分が固有IDです。
上記リンク記述方法で、
media='screen'
が、
あるか否かの違いですが、
表示自体はどちらでも問題ありませんので、
どちらのリンク先記述方法にするかはお好みによります。
この作業をした後のブログを表示して、
『ソースの表示』にてソース内容を確認すると、
見事何行にも渡って記載されていたCSS内容が、
たったの1行になりました。
（私の場合は、2つのCSSがあったので2行分です。）
ページ表示速度も、
２０％程度改善していました。
<参考URL>
≫GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる : たき備忘録
≫【Blogger】BloggerのCSSをGoogleDriveを使って外部ファイル化する | For Content Creator
≫Blogger テンプレート デザイナーの導入：CSSの外部ファイル化：南の島旅
コメント