*Essence

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

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

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

ご利用の方には何度も更新して大変申し訳ないのですが、「genial_resp2c,3c」「ct_responsive2c,3c」「lace-al2,al3」の3種テンプレートの背景画像をCSS記述に変更致しました。
今までと見栄えは変わりませんが、こちらも先日(10/22)の更新同様に『サーバーへの画像リクエストを減らす』『エラー等で画像表示が出来ない場合』を考えて、CSSで表示可能なもの(この度は水玉とストライプ)を修正・更新致しました。
変更したスタイルは下記のようになっています。

- - - - - - - - - - - - - - - - - - - -

gn-50-50.jpg 「genial_resp2c,3c」
body::before{
background:#e7f7e7 url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色+背景画像 */
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

を下記のように変更

body::before{
/* ストライプの背景を他の画像にする場合は、ここから↓ */
background:-webkit-repeating-linear-gradient(
left, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 3px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 7px, rgb(255,255,255) 7px, rgb(255,255,255) 9px, rgba(255,255,255,0) 9px, rgba(255,255,255,0) 13px, rgba(255,255,255,.5) 13px, rgba(255,255,255,.5) 16px);
background:repeating-linear-gradient(
90deg, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 3px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 7px, rgb(255,255,255) 7px, rgb(255,255,255) 9px, rgba(255,255,255,0) 9px, rgba(255,255,255,0) 13px, rgba(255,255,255,.5) 13px, rgba(255,255,255,.5) 16px);
background-size: 16px 1px;
/* ↑ここまでを削除し、代わりにbackground-image:url(画像のURL);を入れる */

background-color:#e7f7e7; /* 背景色 */
background-position:center;
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

- - - - - - - - - - - - - - - - - - - -

ct-50.jpg 「ct_responsive2c,3c」
body::before{
background:#fff url(https://blog-imgs-123.fc2.com/s/o/r/sorauta1/wgg-st4-1.png) repeat center; /* 色+背景画像 */
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

を下記のように変更

body::before{
/* ストライプの背景を他の画像にする場合は、ここから↓ */
background:-webkit-repeating-linear-gradient(
left, rgb(255,255,255), rgb(255,255,255) 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px);
background: repeating-linear-gradient(
90deg, rgb(255,255,255), rgb(255,255,255) 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px);
background-size:6px 2px;
/* ↑ここまでを削除し、代わりにbackground-image:url(画像のURL);を入れる */

background-color:#dcdcdc; /* 背景色 */
background-position:center;
background-repeat: repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

- - - - - - - - - - - - - - - - - - - -

lal-50.jpg 「lace-al2,al3」
body::before{
background-image:url(https://blog-imgs-31.fc2.com/s/o/r/sorauta1/ssbg-p3.gif);
background-color:#e6b9b3;
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

を下記のように変更

body::before{
/* 水玉背景を他の画像にする場合は、ここから↓ */
background-image:-webkit-radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%), -webkit-radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%);
background-image:radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%), radial-gradient(#a3a6a7 10%, rgba(255,255,255,0) 18%);
background-size:20px 20px;
background-position: 0 0, 10px 10px;
/* ↑ここまでを削除し、代わりにbackground-image:url(画像のURL);を入れる */

background-color:#ebc3bb; /* 背景色 */
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}


上記のように変更しなくてもテンプレートに問題はございません。また、表示も体感する程の変化は有りません。
表示されない等のご不安が有る場合に、是非 画像からCSSへの変更をお願い致します。m(__)m


関連記事

Comment







管理者にだけ表示を許可

aki Re: 徳川たぬこ 様へ

いつもお手伝い頂き、有難うございます。m(__)m
きっとヤプミーのご友人様も、初見で制作者の所に来る事自体敷居が高いでしょうから、気持ち的に助かっているのではないでしょうか。
そして当方もとても助かっております。(説明下手なもんで…^^;)

ページの表示スピードは、載せるものによって随分左右されます。
サーバーが所以になってしまう部分はどうしようもないですが、表示する画像の量、画像自体の容量、サイドメニューのプラグインやウイジェット、バナーなどの量、読み込むリクエストやリンクの量、etc.… 自力調整する事で時間短縮できる部分は多くあります。

色々有ったら楽しいですが、表示に支障が出ない程度に抑える事でブログを見に来る方の離脱率が下がりますので、是非とも気を付けたいですね。^^;
(…って、ほぼ自分に言い聞かせ、です。)
2019-10-31-22:19 * aki [ 返信 * 編集 ]

報告です

本日、ヤプミー様のブログ開設に伴い、genial2clをダウンロードさせていただき、カスタマイズのお手伝いをいたしまして、
ページスピードインサイトを試してみたところ
モバイル99点、PC100点という驚きの数字がでました
すごい、めちゃめちゃ速いですよ(๑˃ᴗ˂)و♡ 思わぬところで体感できました
あとでhttps://gtmetrix.com/も試してみようかと思います笑
2019-10-30-23:11 * 徳川たぬこ [ 返信 * 編集 ]

aki Re: 徳川たぬこ 様へ

なるほど、略ですか。(^^)
PageSpeed Insights のスコアだと、時間帯にもよりますが(PCもモバイルも)90点超と優秀ですね。
ただ、『サーバー応答時間の短縮』はFC2のサーバー頼みですし、『オフスクリーン画像の遅延読み込み』は、色んな遅延読み込みのJSを試してみても診断結果に出るんですよね。^^;(なので、一番軽いJSにしています。)
まぁ、どちらも0.1~0.3秒程(?)なので、許容範囲かなと。m(__)m
同じくスピードテストの【 GTmetrix 】https://gtmetrix.com/ は試されましたか?(海外サイトなので夜中に試すとかなり待たされます。^^;)
こちらのスコアでも PageSpeed A、YSlowScore B になってますね。
YSlowScore B については、サーバー次第で自助努力出来ない部分が多いので、Bは優秀だと思います。(私もBですし、これ以上はちょっと難しいです。)

スコアが良いと、何回でも試してみちゃいますね。(;´∀`)
2019-10-27-19:43 * aki [ 返信 * 編集 ]

こんにちは(ᐥ꒳ᐥ )すみません

PSI、ページスピードインサイトをカッコつけて略してしまいました(^^;; 
https://developers.google.com/speed/pagespeed/insights/

私も10年目指して頑張ります(๑˃ᴗ˂)و
2019-10-27-12:46 * 徳川たぬこ [ 返信 * 編集 ]

aki Re: 徳川たぬこ 様へ

コメント頂き有難うございます。(^-^)
10年超、FC2ブログ運営してますが…まだ350件弱ですので、1000件超えるには更に10年超 いやもっと必要です…。^^;
今後、テンプレートを作るネタは切れても、日記ぐらいは書き続けて(亀更新ですが)1000件目指しますか。
たぬ子さんも頑張って『散歩日記』書いて下さいね♪

ところで、PSIって何ですか?不勉強でスミマセン。m(__)m
2019-10-27-02:04 * aki [ 返信 * 編集 ]

お疲れ様です

修正・記事更新お疲れ様です。体感的にもPSI的にも違いがわかりませんでしたが、いつか記事数が1000件を超えた時に体感できるのでしょうね^^ ぜひご一緒に体感しましょう


2019-10-27-01:13 * 徳川たぬこ [ 返信 * 編集 ]