PR PR
宝島社
¥990 (2023/12/22 16:35時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

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

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年7月23日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

よく、

スポンサーリンク

スポンサーリンク

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の外部ファイル化:南の島旅

スポンサーリンク
タイトルとURLをコピーしました