あなたの興味を広げる話題を。

鍋ヶ滝©熊本県(Licensed under CC BY 4.0

ボクにとってFC2ブログのテンプレート変更はとても大変なんです

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

FC2ブログ テンプレート イメージ画像

FC2ブロガーのMです。ボクは「新し物好き」なので、FC2ブログで新しいテンプレートが公開されるたびについつい乗り換えてしまうクセがあります。

少し前にも、FC2ブログのテンプレート製作者であるAkiraさんが発表されたばかりで、とても素敵なデザインに魅入られたボクは、すかさずまたテンプレートを変更したのです(^_^;)

しかし、FC2ブログのテンプレートを変更する場合、ただ箱を替えればそれでお終いというワケにはいきませんよね。一応、箱の中身はいつものブログと同じスタンスを維持しなきゃならないわけで。

昔のように、単純な記事ばかり書いていた頃は身軽だったので、テンプレートを替えればそれではい終わりという世界でした。ところが、今ではそういうワケにもいかなくなりました(汗)

そこで今回は、FC2ブログのテンプレートを変更する際にいつもボクが苦労することを書き記しておこうと思います。

著しいWebデザインの進化

最近、Webデザインの進化は著しく、スマホ閲覧に対応したレスポンシブデザインも当たり前の時代となりました。話しについていくだけでも精一杯です。

そのため、FC2ブログのテンプレートを変更するといっても、今まで維持してきたブログクオリティを続けていくためには、新しく仕様変更されたWebテクにも精通する必要があるので、とてつもない苦労をともなうこともしばしば…。

それでも、素人のボクなりには何とか頑張っているつもりです(笑)

今までとかけ離れたデザインのテンプレにするのは危険がともなう

FC2ブログには公式、共有それぞれに魅力的なテンプレートが一杯♩だからといって、今まで使ってきたものとあまりにもデザインがかけ離れたものに手を出すのは危険です。

白ベースの背景に黒のテキスト。これをずっと続けてきたブログが突然、今流行りのダーク色のテンプレに変更したらどうなるか?

FC2ブログは記事ごとに文字の装飾などが出来ますが、真逆のデザインに変更したことでさまざまな不具合が生じる危険性があるのです。

例えば、文字テキスト。白背景だとテキスト色は黒が基本。しかし、ダーク色のテンプレは背景が黒ですから、記事単位で黒に装飾したテキストが存在する場合には悲劇が起こります。

そうです。画面全体が真っ黒で、テキストが判別できなくなるのです(゚o゚;; ボクのブログのように、9300回以上もブログ更新していたら、いちいち記事を個別にチェックすることは至難の業です(汗)

ですから、テンプレを変更する際は今までの記事を思い出し、不具合が生じないか検討することが大切です。

ページの表示スピードはテンプレートが変わっても同じにすべき

テンプレートの変更によって、今までよりブログが重くなったりするのも本末転倒です。

ブログのページ表示はこれまでと同じスピードを維持するべきで、デザインの装飾にただ惹かれたというだけでそれに乗り換えるのはやめたほうがいいです。

公開された共有テンプレートのなかには「レスポンシブデザイン」と謳っていても、お粗末な技術で作られたものも少なからず存在します。

したがって、テンプレートを選択する際にはよく比較検討したうえで、製作者さんがブログでアフターフォローしているかなどもチェックしてみて下さい。

テンプレート変更で一番大変なのはCSSのインライン化

ボクがテンプレートの変更でいつも苦労する一番大変な作業は、やっぱりCSSのインライン化のためにおこなうクリニカルレンダリングパスの最適化ということになりますでしょうか…。

なぜ大変かと申しますと、次のような感じになります。

  • ①FC2ブログではいつも「記事要約タイプ」のテンプレートを使用している
  • ②テンプレートの構成がWebデザインの進化によって複雑化している
  • ③クリニカルレンダリングパス最適化の便利ツールとFC2ブログは相性が良くない

そもそも、ボクがCSSのインライン化をする理由は、ページ読み込みの遅延を少しでも解消するためです。

ファーストビュー(ブログを開いたとき、最初に表示される部分)にかかるCSSを抽出してheadに記述。残りのCSSコードはJSを使って遅延読み込みさせることで、ページの読み込み速度が全然違ってくるのですヨ♩

しかし、毎回この作業にはウンザリするほどの手間を必要とするわけでして(汗)その理由としては、上に掲げた3つが関係してくるのです。

まず①。FC2ブログで「記事要約タイプ」のテンプレートを使用していると、トップページと個別記事ページとではファーストビューのCSSが異なりますよね。だからそれぞれのページを見ながらCSSを抽出するわけで、普通よりも2倍の手間がかかるわけです。

②は、レスポンシブデザインやグローバルナビゲーション、画像の遅延読み込みなど、Webデザインの進化にともない使用するCSSも多くなっている。該当するコードを探すのもひと苦労です。

③は、①とも関連するのですが、クリニカルレンダリングパスを最適化する便利なツールは存在するのです。例えば、「Critical Path CSS Generator」というサイト。

こちらでは、ブログで一番多く見られるページのURLと全体のCSSを入力するだけでファーストビューに関するCSSを簡単に抽出してくれます。

しかし、そうすると①の問題が障害になってくるんです。トップページと個別記事ページで2回繰り返してみると、それぞれ抽出したCSSコードがどうしても重複してしまう。

その場合、「Online JavaScript/CSS/HTML Compressor」というサイトで圧縮すれば無駄な重複部分も解消されるのだけれど、これを使うとCSSの記載順序がバラバラになってしまうんです。実際、圧縮されたCSSコードを実装してブログを表示させてみると、どうも上手くない(汗)

今回も便利ツールで簡単に♩というわけにはいかなかったのが残念です。

おわりに

結局、ボクは便利ツールで2つのCSSを抽出した上で、実際に使うことはせず、それを参考にしながら手作業でおこないました。

この画像を見てもらえばおわかりだと思いますが、膨大な量を手作業でおこなうのはかなり大変でしたヨ( ;´Д`)

ファーストビューのCSSを実装したイメージ画像.jpg

しかし、なぜそこまでしてテンプレートを変更するのか?やっぱりブログが好きだからなんでしょうね♡


 ベストセラー1位  - カテゴリ ホームページ入門書
関連記事

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5887)
┣  胃がんブログ (258)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5553)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (457)
┣  がんブログ (255)
┗  がんニュース (202)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (135)
┣  Amazonセール (2)
┗  📱kindleセール (132)
おもしろグッズ (10)
今日のエッセイ (92)
ニュース・芸能・話題 (717)
┗  転職・キャリアアップ (7)
恋愛・人間関係 (21)
終活ブログ (10)
グルメ (61)
┣  低糖質レシピ (5)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (212)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (173)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (4)
iPhone の使い方・アプリなど (30)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (26)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (4)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)