*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

TOP >  Template >  テンプレ修正等 >  al_responsive、ct_responsive を更新致しました。

al_responsive、ct_responsive を更新致しました。

テンプレート『al_responsive』、『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
本日、表示等は変わりありませんが、HTMLソース内に記述している、

1) jQuery のバージョンを新しいものに変更
2) トップページ要約表示時の画像遅延ロードscript追加

上記2点のテンプレート更新を致しましたのでご報告致します。

1) jQuery のバージョンを新しいものに変更
昨日('19.2.27)までのテンプレート使用 jQuery のバージョンは、古いブラウザ対策用に 1.12.4 というものでしたが、現行('19.2)で一番新しい 3.3.1 でも問題無く動いたので(確認PCブラウザ IE9, IE10, Opera12, Firefox35, Safari5 。勿論、新しいブラウザは動きます。)、この度変更致しました。
とは言ってもCDN(Contents Delivery Network ソースファイルをインターネット経由で使える仕組み)経由なので、古いバージョンでないと動かないようなプラグイン等をお持ちの場合は、scriptタグのsrc(url)で指定している数字の部分を変更すれば過去のバージョンにする事も出来ます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

赤い文字部分がこの度の変更箇所です。
更新前テンプレートをご利用の方も、赤文字部分のように直して頂けば新しいバージョンになりますので、是非ご利用下さい。
記述箇所は、HTML編集枠をかなり下までスクロールしてフッターメニューの数行下に有るjavascript群に有ります。(群の中では上の方です。^-^; )


2) トップページ要約表示時の画像遅延ロードscript追加
トップページ全文表示や個別記事ページでの画像遅延ロードは、記事作成時にHTMLコードの入力が必要になったり、他テンプレートへの変更時に遅延ロードのscript記述が必要など(他の遅延ロードscriptに変更する際も)色々面倒なので、トップページ要約表示でのみ FC2の変数を使って出力されたアイキャッチ画像を遅延ロードするようにscriptを導入しました。
そのため、(カスタマイズを含む)トップページ全文表示、及び(要約表示でも)トップページ以外では画像遅延表示になりませんのでご了承をお願い致します。
ただ、全文表示や個別記事のページでも、bodyタグにフワッと表示するopacityプロパティを付けているので、少しは遅延ロードっぽく見える…かもしれません。^^;
他の画像遅延読み込みライブラリも幾つか検討してみましたが、シンプルなJavaScriptで実現できる下記の記事を使用させて頂きました。m(__)m
参考 : Pure JavaScriptで画像の遅延ロード

方法は、先ず img src=にloading時用透過png(10pxtp.png)をセットし、data-src=にアイキャッチ画像で表示するFC2の変数を入れます。
編集箇所は、HTML編集枠1/5から1/4(テンプレートによる)程下にスクロールした所に有る
<!-- トップページ ここから--> より下9行程(若しくはその辺り)
<div class="left">
<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>
</div>


を下記のように書き換え

<div class="left">
<a href="<%topentry_link>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>
</div>

('19.03.06 にテンプレートHTML修正・更新のため不要。下記のように書き換えして下さい。m(__)m)
<a href="<%topentry_link>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></a>

次に、1)で記述したjQueryのscriptタグの下にJavaScriptを追加

<script>
[].forEach.call(document.querySelectorAll("img[data-src]"),function(a){a.setAttribute("src",a.getAttribute("data-src"));a.onload=function(){a.removeAttribute("data-src")}});
</script>


最後にスタイルシート編集枠内の上段付近に有る
html{
font-size:80%;
overflow-x:hidden;
}

の下に下記cssを追加

body{
animation:fadeIn 0.5s ease 0s 1 normal;
}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
img {
opacity: 1;
transition: opacity 0.5s;
}
img[data-src] {
opacity: 0;
display:none; /*('19.03.06 の更新で追加しました) */
}


後は更新ボタンを押して適用して下さい。

上記アイキャッチ画像表示部分のHTML修正については、'19.03.06 の記事をご覧下さいませ。
今迄のテンプレートでも何ら表示に問題は有りませんが、画像遅延ロードをする事でトップページの表示を少しでも早くしたい方におススメです。
カスタマイズをされる場合は、不具合が有った時のために複製を作成してからの作業が安心です。m(__)m

関連記事
[ Tag ] * 修正・更新

コメント







管理者にだけ表示を許可