スポンサーリンク

2013年7月23日火曜日

Bloggerブログ CSS外部化する方法。ページ表示速度を高速化

新しい記事 以前の記事

よく、

CSS外部化などをしてサイトを軽くして、

ページ表示速度を改善する方法があります。

私のサイトももれなくJavaScriptなどを多用しているので、
重く表示速度が遅いです…。
(;´д`)トホホ…

それを、
少しでも改善する方法として、
CSS外部化をしてみました。




今回は、

BloggerブログにてCSSを外部化してページ表示速度が改善したので、

備忘録として残しておきます。



まず、
Google Driveを利用します。
公式web≫Host webpages on Google Drive

cf)
2013.02.05 から、
「Google Drive」でウェブページをホスティング出来るようになりました


『具体的方法』


まず、
該当ブログを普通に表示します。


その後、

ページのソースを表示にてCSSの該当部分をコピーします。

(以下画像のような部分です。)



そして、
コピーした内容をローカルにて、
(メモ帳)新規作成でコピーした内容を貼り付けます。


そのファイルの拡張子を.CSSとして保存します。
拡張子の前の名前は適当で構いません。


なお、
私のテンプレートにおいてはCSS部分が2つありました。


もう1つは、
以下画像部分。


そして、
ローカルに保存した○○.cssファイルを、
Google Driveにアップロードします。


アップロード後でもアップロ終了直後でも構いませんが、
アップロードした.cssファイルを
共有設定にします。


アップロード後の設定方法



画像のように、
該当の.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'/>


と記載して、
テンプレートを保存します。

こんな感じです。





※2つ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行分です。)




ページ表示速度も、

20%程度改善していました。


<参考URL>

GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる : たき備忘録
【Blogger】BloggerのCSSをGoogleDriveを使って外部ファイル化する | For Content Creator
Blogger テンプレート デザイナーの導入:CSSの外部ファイル化:南の島旅
スポンサーリンク



スポンサーリンク

この記事が気に入ったらいいね!
お願いします(#^.^#)

↓↓↓

最新情報をお届けします

言えないことはTwitterで!!


こんな記事も書いてます



関連性の高い記事


0 コメント:

コメントを投稿

次の投稿 前の投稿 ホーム
Related Posts Plugin for WordPress, Blogger...