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

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

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 (著)
副業として人気が高いブログアフィリエイト。
多くの方が実践に取り組むも多くの方が挫折してきました。
その理由は「毎日記事を書くのが辛いから」。



関連記事

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

 シェア
M
Posted by M
FC2ブロガー/ファッション研究家/企業家/投資家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/2011年38歳の若さでほぼ末期の胃がん宣告/奇跡的に生還!/人生なんて気持ち次第!!きっとなんくるないさ~
FC2ブログオフィシャルおすすめブログ認定バナー

Comment 0

There are no comments yet.

コメントする