Belong大規模メンテナンスのお知らせ

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

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

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

トップ以外の種のページでデザインバランスが悪いと感じましたので変更・修正を行いました。
新デザインについては Belond専用記事 の「DEMO」でご確認をお願いします。

ページ表示スピード自体はほとんど変化ありません。ごくごく僅かな改善のみです。

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

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

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

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

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

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

こちらもほぼ変わらず。

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

従来は 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

pxtoem.com

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

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

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

vanillaice000.blog.fc2.com