attention admin about comments trackbacks you may also like

定番テンプレート7作品メンテナンスのお知らせ

2018年01月15日
テンプレ不具合・修正など
-

以下のテンプレート7作に於いて大規模なメンテンナスを行いました。
公式配布ソースは修正済みです。
不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。

  • Sakura_daylight
  • Sakura_daylight2
  • Sakura_nightglow
  • Capricious
  • Ranchu
  • OnTheGround
  • Jingle
主な変更点
  • jQueryのバージョンを3.2.1にUPしました
  • html構造を若干変更しました
  • リセットCSSを見直し、最小限の内容に変更しました
  • floatレイアウトからflexレイアウトへ変更しました
  • 個別記事の記事タイトルをh1に昇格しました(トップページではh2)
  • フォントのサイズ指定にremを採用しました

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

CSSについて

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

ページ表示速度について

ページ表示スピードがごく僅かですがUPしました。
この7作はhtml内容がほぼ同じなので代表としてSakura_daylightの結果を掲載します。

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

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

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

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

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

別ページテスト結果(トップページ 56ページ目)
フォントの 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をご検討ください。
ご質問は 下記のリンク先専用ページで どうぞ。よろしくお願いします。

Sakura3パターン - FC2ブログテンプレート - テンプレート

Sakuraテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Capricious/Ranchu - FC2ブログテンプレート - テンプレート

Capricious/ Ranchuテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

OnTheGround - FC2ブログテンプレート - テンプレート

Crescentテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Jingle - FC2ブログテンプレート - テンプレート

Jingleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *