Blogger でテンプレートを好みのデザインにするため…
JavaScript を多用すると…いかに非同期読み込みにしようとも…当然ながら…
ページのロードスピードは低下して行きます…これは我慢できません…
しかしながらデザイン優先でやっていますから…
JavaScript との兼ね合いでバランスを取る事になる訳です…
…で…他の…様々な読み込み遅延の原因を調べて…
Remove the following redirect chain if possible:
…とか叱られムカツキながらも…
ページのロードスピードを少しでも速くするため個別に対応して行く訳ですが…
その過程の中で必ず行き当たるのが…
Blogger から自動的に付与されてしまう「widget css bundle」です…
仕様だからと…サイト開設から３年以上放置して来ましたが…
朗報は…突然舞い込みました…
「How to remove blogger CSS reset stylesheet (widget bundle) / Damzaky」
素晴らしい …長年の懸案事項が…いともアッサリと
このチュートリアルのおかげで外部 ファイル化していた自前の CSS を元に戻しても…
読み込み速度が…１秒以上改善されました…
上記サイトでは…中身をカラにして直下に自前の CSS を記述していますが…
中身をカラにしなくても問題無さそうですので…一応…手順を記載しておきます…
ちゃんと…バックアップしてから作業して下さいな…
「デザイン」「HTMLの編集」から…
「Ctrl + F」で「<b:skin><![CDATA[」を検索すると…該当部分は…
…ってな感じになっていますので…
- <b:skin><![CDATA[
- ご自身のスタイルシート
- ]]></b:skin>
黄文字部分を以下のように書き換えます…
「プレビュー」でサイトが正常に表示されたら…
- <style type="text/css">
- <!-- /*<b:skin><![CDATA[*/
- ご自身のスタイルシート
- ]]></b:skin>
「テンプレートを保存」して完了です…
サイトを表示してページのソースを見てみると…
…ってな感じに…CSS が２つコメントアウトされています…
- <style type="text/css">
- <!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' />
- <link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=ご自身のブログID"/>
- <style id='page-skin-1' type='text/css'><!--
- */
- ご自身のスタイルシート
- --></style>
ブラボー～～
2013.08,10 追記
コメントで…universe さんにご指摘いただいた通り…テンプレートデザイナー対応の CSS ではカラム落ちします…
CSS を独自に構築して下さい…ｍ(＿ ＿;)ｍ
17 Comments :
View Comments :: Click!!
17 Comments :
はじめまして、
とても艶やかなサイトですね(^^♪
ちょっと伺いたいのですが、
bundleCSSのコメントアウト化ですが、
私のBloggerブログにおいてですと、
skin内を空にしてもskin内があっても…。
skin部分を投稿内に記述されている
『<style type="text/css">
<!-- /*<![CDATA[*/』
に変更しても、
プレビューで正常に表示されません…。
また、
一応バックアップを取ってから、
テンプレートを保存後に、
通常表示させてみてもできませんでした。
(´;ェ;`)ウゥ・・・
一応、
自動でbundleされる２つのCSS以外は、
Googleドライブへ外部化してはあります。
何かお分かりでしたら、
何卒ご教授願います。
m(._.*)m
>universe さん
書き換える黄文字部分の記述は文字化けではありませんので…
１行目・２行目をそのままコピペして下さい…
保存するとBlogger側でuniverse さんがコメントで記述した形に…
勝手にコメントアウトしてくれるという事です…
説明不足で申し訳ありません…
お褒めいただきありがとうございます…
解決しない場合引き続きコメントで質問どうぞ…
passer-by198さん、
ご返信ありがとうございます。
コメント内に記載したコメントアウト化の記述は、
変換されているようですね…。
投稿内にありますように、
エンティティ変換後の記載で実施しております。
それで前回のコメントのように、
うまくいかない状態です。
テンプレートによってうまく行ったりいかなかったりするものなのでしょうか？
度々のコメントで申し訳ありませんが、
ご教授願えましたら幸いです。
>universe さん
ご自身で書いたCSSがちゃんと構築されていれば…
問題ないと思われますが…
「widget css bundle」を削除すると…
何かしら不足しているから…
エラーを吐くのでは？
passer-by198さん、
ご返信ありがとうございます。
早速ですが、
私が使用している同じテンプレートにて、
新しくBloggerブログを作成して
bundleCSSのコメントアウト化を実施してみました。
以下URLです。
http://bundlecss.blogspot.jp/
ご覧いただけますように表示が崩れてしまいます…。
(;´д｀)ﾄﾎﾎ…
勝手にbundleされてしまう２つのCSSのコメントアウト化は、
できているようですが…。
なぜでしょう…。
大元のテンプレートから１つの投稿のみしてみた状態です。
該当URLもしくは、
現在公開中の以下URLにて
http://sekirarablog.blogspot.jp/
何か改善もしくは追加（修正）するようなものがありましたら、
ご教授願えませんでしょうかm(._.*)m
何卒よろしくお願い申し上げます。
m(__)m
>universe さん
ざっとソースを見てみると…
width: 100%;
しか指定されていないかと思われますが…
カラム指定部分のスタイル指定が不要かと…
直書きで良いのでは？
passer-by198さん、
返信ありがとうございます。
m(__)m
bundleCSSのコメントアウト化は諦めます…。
何となくおっしゃっていることは分かりそうな分からなそうな…。
という感じです…。
なので、
具体的にどこをどうすれば良いのかわからない状態です。
(w＿－; ｳｩ･･
(;´д｀)ﾄﾎﾎ…
(____△____;)モ・モウダメポ・・・
度々のコメントすみませんでした。
(w＿－; ｳｩ･･
>universe さん
残念です…
<style type="text/css"><!--
「カラムレイアウトを指定しているuniverse さんのスタイルシート」
--></style>
ってなっていますので…
「カラムレイアウトを指定しているuniverse さんのスタイルシート」
の上下が不要かと…
passer-by198さん、
コメントありがとうございます。
m(__)mm(__)m
だけれど…、
わからないです…。
(;´Д`)×
o(><*)o
よろしければ以下にテスト用のブログURL内のCSS記載部分をすべて書かせて頂きます
m(._.*)mペコッm(._.*)mペコッ
その内、
どこを削除すればよいのか教えて頂けましたら、
本当に幸いです。
また、
passer-by198さんの
前コメントは、
--------------------ここから-----------------------
<style type="text/css"><!--
「カラムレイアウトを指定しているuniverse さんのスタイルシート」
--></style>
ってなっていますので…
「カラムレイアウトを指定しているuniverse さんのスタイルシ>ート」
の上下が不要かと…
---------------ここまで-----------------------------------
は、
テスト用のブログソースの事をおっしゃっていらっしゃるのでしょうか？
それとも、
公開中の方
（http://sekirarablog.blogspot.jp/）
の
ソースの事をおっしゃっていらっしゃるのでしょうか？
以下は、
テスト用のブログ内のCSS記述部分すべてです。
（すべてと思われます。）
<style type="text/css">
<!-- /*_<)…。
長文になってしまい、
誠に申し訳ありません。
m(._.*)mm(._.*)m…
あれっヽ(~～~ )
CSS部分の記述内容が消えてしまっている…。
CSS部分は、
エスケープしてもコメントできないんですねm(__)m。
上下と記載されていらっしゃいましたので、
思わしき部分を削除して、
プレビューしては見ましたが…。
やはり、
表示が崩れたり色が異なったりしてしまいました(>_<)…。
長文になってしまい、
誠に申し訳ありません。
m(._.*)mm(._.*)m…
>universe さん
無問題ですよ…
テストブログです…
479行目と526行目を削除して…
挟まれたCSSを477行目に插入で…いかがでしょう？
蛇足ですが…
「Variable」指定での「$」もオススできません…
そもそも「Variable」指定する程の頻度とも思えませんし…
カラム記述などは…width: 100%;を…
後から上書きしようとしている訳ですから…
「body」から始まる１つのCSSにバラして…
レイアウトを確認してから「widget css bundle」を…
コメントアウトしたほうが…
passer-by198さん
早速のご返信ありがとうございます。
記載して頂いた行数の部分を削除して、
そこに挟まれていたCSSを477行目に挿入してみたのですが…。
---------------ここから-----------------------
479行目と526行目を削除して…
挟まれたCSSを477行目に插入で…いかがでしょう？
蛇足ですが…
「Variable」指定での「$」もオススできません…
そもそも「Variable」指定する程の頻度とも思えませんし…
カラム記述などは…width: 100%;を…
後から上書きしようとしている訳ですから…
「body」から始まる１つのCSSにバラして…
レイアウトを確認してから「widget css bundle」を…
コメントアウトしたほうが…
---------------ここまで-----------------------------
やはり、
表示が崩れてしまいます。
(;´д｀)ﾄﾎﾎ…
「Variable」指定での「$」…。
というのもご指摘頂いたとおりなのだと思いますが、
正直、全く意味がわかっていません…。
ｍ(＿ ＿;)ｍ
先に記載していただいたように、
479行目と526行目の削除をし、
477行目に挿入してもうまくいかないのは、
『Variable』
っていうのが関係しているのでしょうか…？
(ノ_-;)ハア…
>universe さん
私もテストブログを作成してみましたが…
テンプレートデザイナー対応のテンプレートでは…
同じようにカラム落ちしますね…
Bloggerの独自規格が邪魔をするのでしょう…
やはりCSSを独自に組むしかないようです…
無駄な時間を費やさせたようで…
申し訳ありません…ｍ(＿ ＿;)ｍ
passer-by198さん、
とんでもありません。
こちらこそお忙しい中、
テストブログまで作成して検証して頂きまして、
ありがとうございます。
passer-by198さん、
お久しぶりです。
こちらの記事の方法でカラム落ちしない解決策？を記事にしました。
明確には、
解決策か否かはわかりませんが２つの元凶はコメントアウト化されてカラム落ちもしないようにできました。
一応URLを記述しておきますね。
http://sekirarablog.blogspot.jp/2014/07/bloggerbundlecss.html
１ヶ月位前に気づいたのですが、
記事にするのに時間がかかってしまいました。
とスケジュール機能にて投稿にしてありましたので投稿後に報告をと思いまして…。
コメントさせて頂いています。
もし、
間違いや不都合がありましたらご指摘ください。
>universe さん
1日…最低…2回は覗かせてもらっています…(￣ー￣) 邪笑
解決策としてリンクを入れさせてもらおうか悩みましたが…
CSSを独自に組んでいる当サイトでは無問題ですし…
zerippeさんのサイトでも同様のようですので止めました…
ただ…逆転の発想として…素晴らしいです！！
あと…余計なお世話…なんですが…
レスポンシブデザインの記事でナビゲーションに触れられていましたが…
ドロップダウンナビゲーション下のアドセンスは…
以前…誤クリック誘発で…Google先生に…
叱られた経験がありますので…注意が必要かと思われます…
それと…やっぱり…ナビゲーションマニアとしては…
「・」…気になっちゃいます…σ(^_^;)
わざわざ…お知らせをいただき…リンクまで入れていただいて…
ありがとうございました…ｍ(＿ ＿;)ｍ
passer-by198さん、
当ブログへのコメントもありがとうございます。
>1日…最低…2回は覗かせてもらっています…(￣ー￣) 邪笑
↑
ホントですかぁw(゜o゜)w
ハズカシイ…。
(*´艸｀*)
zerippeさんのところで、
>単純に無効化すると表示が崩れます。Widgetに対するCSSを全て自分で書く必要があります。
と言われたのですが、
自分でcssなんて書けないし…。
(´;ェ;`)ｳｩ･･･
と思ったのと同時に、
当初は言っている意味があまりわかりませんでした…。
が、
こういうことなのかな？
と思って、
この度やってみたところ成功した次第です（＾u＾）
このことをおっしゃられてたのかなぁ。
と…。
違うかもしれませんが…。^^;
>「・」…気になっちゃいます…σ(^_^;)
やはり、気になっちゃいますかぁ。
&誤クリック誘発はそうですね。
修正しなくてはですね。
アドバイスありがとうございます。
Post a Comment :: Click!!
コメントを投稿