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
デザイン変更時に整形しやすいように…
圧縮前の 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 に赤文字で叱られます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿