GirlOnWireテンプレートのメンテンナスを行いました。
公式配布ソースは修正済みです。
今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。
不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。
- html構造を若干変更しました
- jQueryライブラリのバージョンを2.1.3から3.2.1にアップしました
- カルーセル・ドロワー(スマホのみ)のjQueryプラグインのバージョンをアップしました
- リセットCSSを見直し、最小限の内容に変更しました
- トップでの追記展開を廃止、追記以降を個別記事へのページ遷移に修正しました
- フォントサイズの指定に rem を採用しました
- floatレイアウトを廃し、flexレイアウトに変更しました
- 新着リストを削除しました(必要な方は代替としてサイドメニュー表示限定となりますが、公式プラグイン「最新記事 (サムネイル付)」のDLをお願いします)
- 記事下ユーザータグのリンク先指定を外部(FC2ブログポータル「ユーザータグ」ページ)から内部リンク(自ブログ内「タグ」ページ)に変更しました
- 個別記事ページの記事タイトルをh2からh1に昇格しました(トップページではh2です)
見た目が大きく変わることはありません。 今回のメンテナンスで ページ表示速度が若干改善されます が、元々 全文表示タイプ のテンプレートですので、個人設定・個人環境に大きく左右されますことをご承知おきください。
個人カスタマイズでjQueryプラグインを追加している方は動作不全が起こる可能性があります。
ご利用のプラグインが3系のjQueryに対応しているか確認をお願いします。
任意追加プラグインの修正のお手伝いは致しませんので、ご自身での管理をお願いします。
従来は「サムネイル対象画像がある場合の記事のみ」を抽出して表示していましたが、対象画像が無い記事もカルーセル表示するように変更しました。
本文内で画像を一枚も利用していないという方はカルーセルがあること自体に気づいていないこともあります。
今回の変更でNo imageがズラリと並ぶことになりますので、気づいて頂けるのかなぁ、と(笑)
そしてみなさん 不要なJSは削除を行なってください ね。
これまでは気づかずにそのまま、しかしJS内容の読み込みは行われているため無駄にページ表示負荷がかかっている、というパターンも稀に見かけることがありました。
本変更でなんぼなんでも気づくはずですので、不要ならばしっかりと削除を行って頂くということで。
カルーセルを削除するには以下をCtrl + F キー検索。
注)カルーセル不要の方ここから削除
全3箇所(html内2箇所、CSS内1箇所)あり、それぞれ番号が振ってありますのでガイダンスに従ってください。
リセットCSSを最小限にしましたので、項目を削除したhtml要素の見た目については各ブラウザの初期値に倣います。
どうしても必要であると思われるものだけを厳選してあります。
その中に <p> も含めています。
pタグはできればリセットをかけない方が良いのですが、結構みなさんどこかのサイトで取得してきたhtml内容をそのまま使用される方も多いようで。
pタグというのは非常に特徴的な見た目を有しているにも関わらず装飾に利用されることが多いんですね。
なので今回は外しませんでした。
記事を書く際にpタグを利用している方はすみません ^^;
リセット内容を含め、CSSソース内の一部を コンパイル(圧縮) しています。
ここは触って欲しくない、という部分と、ここはよほどのことが無い限りカスタマイズされることはない、と思われるものを圧縮しました。
もちろんページ表示速度を気にされる方は全て圧縮して頂いても構いません。ただし自己責任で。
展開をやめたこととJS内容を見直したことで速度が若干改善されています。
Bまでなんとか持って行きたかったのですが、無理でした 
画像で見るべきスコアは一番左のPageSpeedScoreです。
隣のYslowというのは Yahoo! Exceptional Performance team という、Yahoo!のエンジニアが提供しているオープンソースで、ページ速度を遅らせる原因の指摘と対策が行われているかの判定及び提案です。
対策が行われているとスコアが高くなります(FC2ブログでは不可能なサーバーサイドの対策含む)
全文表示タイプのテンプレートの場合、トップページでの表示負荷は 個人設定と記事の書き方に依存します。
本文に多くの画像や動画を貼っていれば重たくなりますし、ブログ環境設定でSNS関連ボタンを「表示」していると一気に表示が遅くなります。
できればSNS純正ボタンの利用は避けたいところですが強制は致しません。当然ですが。
リスト表示のページ(カテゴリなど)は元々A評価でしたが、少し点数が上がっています。
画像掲載などの少ないページではA評価です。
別ページテスト結果(トップページ 53ページ目)
従来は 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
floatからflexに変更したことにより、カラム入れ替えが超簡単にできるようになりました。
具体的な方法についてはGirlOnWireの専用ページ仕様表に記しておきます。
くれぐれも仕様の変更内容にご注意頂きましてから再DLをご検討ください。
ご質問は下記のリンク先専用ページでどうぞ。よろしくお願いします。
GirlOnWire - FC2ブログテンプレート
GirlOnWireテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
