BloggerのCSSを外部ファイル化する方法とJavaScript/CSS圧縮ツール

昨今は JavaScript 無しでは…

Web 閲覧もままならない…

ってか…正しくサイトが表示できない…

というほど JavaScript は必須アイテム化しています…

とは言っても閲覧する側からすれば…

情報検索などでは JavaScript だらけのサイトだと…

表示速度が遅くストレスが…

一方…管理側としてみれば…

自サイトはやはり好みのデザインで…

ってのが人情ですから JavaScript だらけに…

当サイトも御多分に漏れず…な状況です…

トップページなど…

Pagination のために全ページを読み込んでいますので…

自分でも思います…遅いッって…

(￣ー￣)邪笑

ってか…これでも工夫はしているんです…

今回はそんなお話し…

こちらの記事も合わせてお読みになることをお奨めします…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


CSS や JavaScript は…

あとで整形し直しやすいように…

改行やら空白やらインデントやらコメントアウトやら…

だらけになるでしょ

しかしこれらは…「見せる」だけなら全く必要ありません…

なので…圧縮して少しでも表示速度をアップさせましょう…

先ずはツールからご紹介…

そんなに頻繁に使うわけではないので…

オンラインツールで充分です…

Minify your JavaScript / javascript-minifier.com  

Minify your CSS / cssminifier.com  

「デザイン」「HTMLの編集」から…

デザイン変更時に整形しやすいように…

圧縮前の CSS を…

「メモ帳」に貼りつけて…

ローカルに保存しておきましょう…

<b:skin><![CDATA[
CSS 部分
]]></b:skin>

CSS 部分を…

上記ツールの「Code」にコピー＆ペースト…

File Type で「CSS」を選択して「Compress」をクリック…

圧縮されたコードが生成されますので…

CSS 部分と入れ替え…

「テンプレートを保存」して完了ですが…

さらに閲覧者のブラウザ毎に…

CSS を切り替えるなどのために…

外部ファイル化したい方は…

圧縮されたコードを「メモ帳」に貼りつけて…

「compress.css」など任意の名前で保存して…

「Google sites 」などにホストしておいて…

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」

 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa

<b:skin><![CDATA[
]]></b:skin>
<link href='圧縮 CSS の URL' media='screen' rel='stylesheet' type='text/css'/>

…と記述すれば OK です…

1行目と2行目の青太字の部分を削除すると…

Blogger に赤文字で叱られます…

Tips Header Sidebar Main Footer Current-Label : Universal