*Essence

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

Top Page › Template › テンプレ修正等 › テンプレートの修正・更新致しました。10/22
2019-10-22 (Tue)

テンプレートの修正・更新致しました。10/22

当テンプレートをご利用頂き、誠に有難うございます。m(__)m
少々遅れての事後報告記事ですが、10/22(CSS記述更新日は10/21になっています)に申請済みレスポンシブテンプレートの更新を致しました。

[該当テンプレート]
genial_resp2c,3c
serene_resp2c,3c
ct_responsive
al_responsive
candy-2c3c
green-2c3c
lace-al2,al3
dt21_ryo,ryo_2c

更新の内容は以下になります。
1) 要約表示時にサムネイル画像が無い場合の代替画像を data URI に変更。
2) 全記事一覧(Titlelist)のHTML記述部分を下部に移動。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの Ctrl と F を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)



1) 要約表示時にサムネイル画像が無い場合の代替画像を data URI に変更。
更新前では(トップページ要約表示時の)画像遅延処理、画像無しの記事用表示、及びIE対策用表示はダミー画像を使用していましたが、data URI に変更致しました。

【 青文字部分を赤文字部分のように変更(HTML)】
[ 検索する文字列 ] <div class="left">

<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><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>
</div>

<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';"></a>
</div>

【 青文字部分を赤文字部分のように変更(CSS)】
[ 検索する文字列 ] .left img[src

.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"],
.left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}

.left img[src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="],
.left img[style*="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}

Webページで画像を表示する場合、src属性に画像がある場所のURLを指定し、サーバーにリクエストをして画像データを取得します。
ただ、サーバーにアクセスする回数が増えるとページの表示にかかる時間も増えるので、HTMLに data URI で直接書く事で(サーバーから返事が返ってくるのを待つ必要が無くなり)ページの表示速度が速くなる可能性があります。
『早くなる』と断定できないのは、デメリットとして
  • 画像をBase64で文字列化すると、データ転送量が通常の画像ファイルの場合と比べて大きくなる。
  • 同じ画像を1ページ内で複数回使用する際、URLで画像を指定する場合のサーバーリクエストは1回で済むが、data URIを使っている場合は表示回数分のデコード(文字列から画像データに変換)が必要になる。
  • data URIはブラウザにキャッシュされないので、毎回ページを訪れるたびに読み込みと処理が必要になる。
等が有るためです。
しかしこの度、ダミー画像から data URI に変更するのには理由が有ります。
例えば、画像の有るサーバーに何らかの不具合が起こり画像表示が完了できない場合。
あと、まだ考えてはいませんが…いつか私がFC2を退会してサーバーに画像リクエストが出来なくなった場合。
表示崩れを防ぐためにも、テンプレートを利用されている方がゼロで無いなら尚更、無下には出来ない理由です。
テンプレートをず~~~っと使うよ、という稀有な方は^^;、是非上記のように修正をお願い致します。m(__)m




2) 全記事一覧(Titlelist)のHTML記述部分を下部に移動。
更新前までも「表示が遅い」等のクレームはもらった事無いのですが…(^^;
HTML内の記事表示カラムの上部に記述していた『全記事一覧』の部分を記事カラムの下部へ移動致しました。

表示を確認する際、自身の記事数(現時点で350件程)では遅いとまでは感じないのですが、1000件超の方がテンプレートをご利用頂くようになり(他方からFC2へお移りの方、有難うございますm(__)m)、全記事一覧ページの表示が遅いように思われます。(1ページに1000件を抽出表示するので)
抽出が完了するまで他の部位も表示が滞ってしまっているのは、偏に当方のHTML記述位置が良くないためもあります。
「表示が遅い」とお感じの方、大変お手数ですが 下記のように記述位置を変更してみて頂きます様お願い致します。

各テンプレートのHTML編集枠内に有る下記の部分
[ 検索する文字列 ] <!-- 全記事リスト開始 -->

<div class="archive">
<!-- 全記事リスト開始 -->
<!--titlelist_area-->
~~ 省略 ~~
<!--/titlelist_area-->
<!-- 全記事リスト終了 -->
</div>


(al_responsive, lace-al は<!-- 全記事リスト開始 --> から <!-- 全記事リスト終了 --> まで)

上記部分を切り取って、下記の部分に貼り付け
[ 検索する文字列 ] <!-- 固定リンク画面の下段に表示 -->

この部分に全記事一覧を貼り付け
<!-- 固定リンク画面の下段に表示 -->
<div class="menu3">



以上、この度の更新です。
不具合を見付けられましたら、何なりとご連絡下さいませ。m(__)m

関連記事

Comment







管理者にだけ表示を許可

aki Re: y 様へ

こちらこそ宜しくお願いします。(^^)
2019-10-28-19:40 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-10-28-00:37 * - [ 返信 * 編集 ]

aki Re: y様へ

解決済みとの事ですが、一応、そちらにお返事致しました。…というか、入れ違いになってしまいました。^^;
スミマセン。。

またお寄り下さいね。(^-^)
2019-10-28-00:29 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-10-28-00:12 * - [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-10-27-22:27 * - [ 返信 * 編集 ]

aki Re: どなるど 様へ

いつもご確認頂き、有難うございます。(^-^)
うちのテンプレートでは最大3つの画像使ってるものが有りますが、配布するなら、あまり画像を使用しない方が良いのでしょうね。
(エラーで表示されなくてもおかしな表示にならないようには制作しております。)
軽く作るのって、難しいです。^^;
2019-10-27-01:28 * aki [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

何度も修正・更新をお願いして申し訳ございません。
初めから修正不要のものを共有申請出来れば良いのですが、後で色々不備に気が付くもので…。

使い勝手の良いテンプレートを目指しております。
お気付きの点がございましたらお教え下さいませ。m(__)m
2019-10-27-01:02 * aki [ 返信 * 編集 ]

修正完了

akiさん、こんにちは(^-^)
修正&更新お疲れさまです。
複製作って、上記の部分だけコピペしてみました。
今のところ問題もなく表示されてますm(_ _)m
2019-10-26-15:14 * どなるど [ 返信 * 編集 ]

No Subject

お疲れさまでした。
早速訂正工事をしました
2019-10-26-10:19 * 呑兵衛あな [ 返信 * 編集 ]