Life-is大規模メンテナンスのお知らせ

Life-is大規模メンテナンスのお知らせ

テンプレ不具合・修正など
2017/12/22
vanillaice (Akira)
vanillaice (Akira)

Life-isテンプレートのメンテンナスを行いました。
公式配布ソースは修正済みです。
今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。
不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。

主な変更点
  • html構造を変更しました
  • jQueryライブラリのバージョンを2.1.3から3.2.1にアップしました
  • リセットCSSを見直し、最小限の内容に変更しました
  • フォントサイズの指定に rem を採用しました
  • 記事下ユーザータグのリンク先指定を外部(FC2ブログポータル「ユーザータグ」ページ)から内部リンク(自ブログ内「タグ」ページ)に変更しました
  • 個別記事ページの記事タイトルをh2からh1に昇格しました(トップページではh2です)

見た目が大きく変わることはありません。 表示速度については 全文表示タイプ のテンプレートですので、個人設定・個人環境に大きく左右されますことをご承知おきください。

CSSについて

リセットCSSを最小限の内容にすると同時に、変更してほしくない部分・カスタマイズされることがまず無いであろうと推測される内容について 圧縮 を行ないました。

ページ表示速度について

ページ表示スピードにはほとんど変化ありません。

トップページメンテナンス前
メンテナンス前

トップページメンテナンス後
メンテナンス後

画像で見るべきスコアは一番左のPageSpeedScoreです。
隣のYslowというのは Yahoo! Exceptional Performance team という、Yahoo!のエンジニアが提供しているオープンソースで、ページ速度を遅らせる原因の指摘と対策が行われているかの判定及び提案です。
対策が行われているとスコアが高くなります(FC2ブログでは不可能なサーバーサイドの対策含む)

全文表示タイプのテンプレートの場合、トップページでの表示負荷は 個人設定と記事の書き方に依存します。
本文に多くの画像や動画を貼っていれば重たくなりますし、ブログ環境設定でSNS関連ボタンを「表示」していると一気に表示が遅くなります。
できればSNS純正ボタンの利用は避けたいところですが強制は致しません。当然ですが。

リストページメンテナンス前
メンテナンス前

リストページメンテナンス後
メンテナンス後

こちらもほぼ変わりなし、どころかちょっと落ちちゃった。すみません(笑)

トップページの速度テストは私の所有ページで 最も条件が厳しいと思われるページ で行なっています。
画像掲載などの少ないページではA評価です。

別ページテスト結果(トップページ 55ページ目)
sample

フォントの rem という単位について

従来は px でのサイズ指定を行なっていましたが、rem (レム) という単位に変更しました。
迷いましたが思い切って切り替えました。
迷った理由はIEがバグを持っているからですが、それ言ってるとIEなんてバグの宝庫なのでもう無視することにします (´・ω・`)

remの特徴や多くあるメリットの説明はここでは省きますがメリットのうちでひとつだけ。
ページのフォントを 全体的に大きくしたい(または小さくしたい) という時がありますよね。
部分的にではなく、各フォントバランスは同じで全体的な拡縮をしたいとき。
pxはそういったことはできませんが、remは可能です。

デフォルトではフォントの基本サイズを 10px で統一しています。
10px = 62.5% = 1rem
こういう相関図です。
13pxなら 1.3rem、16pxなら 1.6rem ですね。
62.5% が1remを10px計算するための指定です。
該当箇所は以下の部分。

html {
  margin: 0;
  font-size: 62.5%;
}

基本を10pxでなく大きく or 小さくしたい場合は、この62.5%の数値を変更します。
remは相対単位ですので、基本数値を基に倍率計算されます。
各単位の対応表は以下のサイトでご確認ください。

PXtoEM.com: PX to EM conversion made simple.

Conversions based on 16px browser default size

くれぐれも仕様の変更内容にご注意頂きましてから再DLをご検討ください。
ご質問は 下記のリンク先専用ページで どうぞ。よろしくお願いします。

Life-is - FC2ブログテンプレート - テンプレート

Life-isテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。 設定ページ 更新履歴 2017.1.25 ・ SNSシェアリンクのUTF-8エンコード 参考記事 SNSシェアリンクのエンコード...

テンプレ不具合・修正など