Stoic(Blue/ Brown)大規模メンテナンスのお知らせ

Stoic(Blue/ Brown)大規模メンテナンスのお知らせ

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

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

主な変更点
  • html構造を変更しました
  • jQueryライブラリのバージョンを2.1.3から3.2.1にアップしました
  • リセットCSSを見直し、最小限の内容に変更しました
  • ヘッダーの形状変更 + パン屑リスト導入(schema.orgによる構造化マークアップ)
  • トップでの追記展開を廃止、追記以降を個別記事へのページ遷移に修正しました
  • フォントサイズの指定に rem を採用しました
  • 記事下ユーザータグのリンク先指定を外部(FC2ブログポータル「ユーザータグ」ページ)から内部リンク(自ブログ内「タグ」ページ)に変更しました
  • 個別記事ページの記事タイトルをh2からh1に昇格しました(トップページではh2です)

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

CSSについて

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

構造化マークアップ「パン屑リスト」の導入

構造化タイプはschema.orgを採用しています。
今回はパン屑リストのみの導入です。

ブログタイトル下の文言をカスタマイズする際には 構造化マークアップが壊れてしまう可能性がある ことを念頭に行なってください。

ページ表示速度について

追記展開型の取りやめ理由は以下の記事をご参照ください。

【重要】テンプレートについての予告です - 割と重要なお知らせ

リリース済テンプレートについて、順次メンテナンスを行う予定です。 主な内容や目的は以下の内容です。...

ページ表示スピードが若干ですがUPしました。

StoicBlue

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

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

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

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

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

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

カテゴリなどのリスト系ページはA評価で変化なし、スコアがアップ。

StoicBrown

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

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

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

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

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

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

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

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

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

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