FC2ブログ公式爆速テンプレート風?インラインCSS全部書きしてみた!

M

2019-02-28
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など
0 COMMENTS

FC2ブログ公式爆速テンプレート風?インラインCSS全部書きしてみた!


こんにちは。FC2ブロガーの管理人Mです。先日、FC2ブログから1通のメールが届きまして。内容を確認するとFC2ブログの公式テンプレートに「爆速」なるものが新登場したのだそうな(゚o゚;;


言葉通りに解釈すると、爆発的に速いテンプレートが開発されたということなのでしょうか?!現在では、いかに速くブログが表示されるかが重要視される時代ですから、もしそうなのだとすると、ユーザーにとってはとても興味深いですよね~


このFC2公式爆速」について、ボクの胃がんブログのテンプレートでお世話になっているFC2ブログのテンプレート製作者Akiraさんが記事に取り上げています。


公式「爆速」テンプレートが登場しました

あんたが宣伝してどーすんの、って感じですが。
公式テンプレート に 爆速 の名を冠するテンプレートが追加されたそうです。...


スポンサードリンク

FC2ブログ公式爆速テンプレートの特徴


Akiraさんの話しによると、公式爆速テンプレートの特徴として、次のような工夫がされているようです。


  1. スタイルシートは、HTMLのhead要素内にインラインCSSとして直書きしている。
  2. 画像をbackground-imageで表示させている。
  3. 余計な JavaScriptを多用せず、最小限の記述に留めている。
  4. いろんな機能を削り、最小限にしている。

要するに、テンプレのスピードを追求した結果、やっぱり究極の最終形態はシンプルイズベストということなんですね(^_^;)


「デザイン性とページスピード」選択の葛藤はブロガーにとって永遠のテーマ?


しかし、問題なのは、ページスピードばかりを追求した結果、格好の悪いブログになってしまう可能性があること。デザイン性というものを考えるとそれだけコードの記述も増える訳なんで、ある程度ブログが重くなるのはやむを得ないことなんですよね(汗)


デザイン性という見た目を取るのか、スピードという実利を取るのか…。


すなわち、真夏の暑い日に例えると、見た目を気にせずタンクトップ1枚で過ごすか、暑いのは我慢してジャケットを羽織って着飾るか、ということでしょうか?


これは、ブロガーにとって避けて通れぬ永遠のテーマ?とも言えますよね。


ボクなんかは、ブログは自分の個性を表現するプラットホームと考えているので、やっぱり見た目の方もカッコ良くしたいんです。


結局、少しだけ興味に惹かれたのだけれど、公式爆速テンプレートを使う気にはなれませんでした…


そもそも、このテンプレは編集できないようになってるっぽいし(汗)これじゃあGoogle AdSenseの広告が貼れません(^_^;)


ただし、「見た目にはこだわらないよ!」という方にはおすすめかも知れません。


HTMLのhead要素内にインラインCSSの全部書きをするのって問題ないの?!


結局、ボクのFC2ブログには、公式爆速テンプレートとのご縁がなかったようです。


しかし、ひとつだけ、今まで考えもしなかったことを教えてくれました。それは、爆速テンプレートの特徴として上記の1に書いたインラインCSS


インラインCSS自体は、ファーストビュー表示速度を速めるため、以前に自分でもやったことがあります。ただ、その時はあくまでファーストビューに関連するCSSコードだけをインライン化したのです。


でも、この公式爆速テンプレートは何だか全てのCSSをhead内に記述してるっぽいんですよね…


全部のCSSコードをhead内に記述するのって、何か問題は起こらないの?!(゚o゚;;


気になったので、自分で試してみることにしたのです。


【公式爆速テンプレート風】インラインCSSの全部書き!ボクのFC2ブログの場合


自分で試してみた、HTMLのhead要素内にインラインCSSの全部書きはこんな感じで行ないました。


①まず、テンプレートのバックアップを保存しておく。


②スタイルシート内のCSSコードをすべて選択→カットしてOnline JavaScript/CSS/HTML Compressorで圧縮する。


③圧縮したCSSコードを、HTMLのhead要素内にstyleタグを付けて貼り付ける。貼り付けた場所は、link relのstylesheetの所を削除してその部分に。


CSSコードを圧縮してしまうと、その後のカスタマイズがとても難しくなるので、何か手を加える時は、バックアップの方で行なったうえで、再度圧縮したCSSコードを貼り付け直すようにするつもり。


ドキドキしましたが、インラインCSSの全部書きをした結果、とくに不具合は起こりませんでした(・・;)


そして、ブログのページ速度チェックをしてみたら、何だか少しだけスピードアップしたみたいです(゚o゚;;


へぇ~!こんな方法があったなんて!!


しかし、良い子は決して真似しないで下さいね。あくまでウェブ知識ゼロのボクがやってみたことなんで責任は負いかねます(汗)


しかし、改めて感じさせられたことですが、ブログというものはとても奥深いものですね!


P.S.後からW3Cエラーチェックをかけてみたところ、どうしてもbodyfont部分のCSSコードがエラーになってしまう...(;´・ω・)いろいろ改善を試みたけど良くわからん(汗)結局、あきらめてこの部分だけスタイルシートに戻したら、エラーがでなくなった(´・ω`・)エッ?何でだろ。スタイルシートの場所でのみ許されている書き方なの?!


最終的に、「インラインCSS全部書き」ならぬ「インラインCSS99.9%」書きになりました(;^ω^)


ベストセラー1位- カテゴリ ダイレクト・マーケティング
Mr.S (著)
副業として人気が高いブログアフィリエイト。
多くの方が実践に取り組むも多くの方が挫折してきました。
その理由は「毎日記事を書くのが辛いから」。



スポンサードリンク

この記事が気に入ったら
シェア!

 シェア
FC2ブログFC2ブログ公式爆速テンプレートインラインCSS全部書きWebデザインCSS圧縮
関連記事

Comments 0

There are no comments yet.

コメントする

未分類 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5826)
胃がんブログ (247)
よりぬき 胃がんブログ (16)
胃がん闘病記・日記 (5514)
胃がん手術後の食事記録 (6)
胃切除後の料理など (33)
がん治療のクラウドファンディング (10)
胃がん History (83)
ステージ3B 多発性高度リンパ節転移胃癌 (57)
胃がん再発「転移性肝がん」で余命宣告 (25)
がん のこと(ガン情報全般) (432)
がんブログ (243)
がんニュース (189)
胃がん 障害年金ブログ (71)
障害年金 - 準備編 (23)
障害年金 - 審査から年金受給まで (12)
障害年金 - 審査請求・不服申立 (26)
障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (129)
Amazonセール (2)
📱kindleセール (126)
今日のエッセイ (63)
ニュース・芸能・話題 (638)
恋愛・人間関係 (20)
終活ブログ (10)
グルメ (44)
胃切除後の食事・レシピ (669)
ご飯・おかゆ・和食 (174)
おかず (138)
味噌汁・スープ (73)
カレー関係 (66)
パン・洋食 (63)
麺類 (113)
その他、簡単レシピなど (39)
ブログ (217)
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (182)
Google Adsense (アドセンス) (8)
趣味や将棋のこと (26)
ファッション (1)
司法書士 (26)
仕事・実務や登記のこと (1)
事件ファイル (25)
COLLECTION (28)
家電 (13)
ホーム&キッチン (4)
ビューティー&ケア (4)
QOLの改善&ヘルスケア (2)
お酒 (5)