*Essence

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

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

「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_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);
}

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

　「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

当テンプレートをご利用頂き、誠に有難うございます。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

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

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

１）　要約表示時にサムネイル画像が無い場合の代替画像を 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で文字列化すると、データ転送量が通常の画像ファイルの場合と比べて大きくなる。
  
• 同じ画像を１ページ内で複数回使用する際、URLで画像を指定する場合のサーバーリクエストは1回で済むが、data URIを使っている場合は表示回数分のデコード（文字列から画像データに変換）が必要になる。
  
• data URIはブラウザにキャッシュされないので、毎回ページを訪れるたびに読み込みと処理が必要になる。

等が有るためです。
しかしこの度、ダミー画像から data URI に変更するのには理由が有ります。
例えば、画像の有るサーバーに何らかの不具合が起こり画像表示が完了できない場合。
あと、まだ考えてはいませんが…いつか私がFC2を退会してサーバーに画像リクエストが出来なくなった場合。
表示崩れを防ぐためにも、テンプレートを利用されている方がゼロで無いなら尚更、無下には出来ない理由です。
テンプレートをず～～～っと使うよ、という稀有な方は^^;、是非上記のように修正をお願い致します。m(__)m




２）　全記事一覧（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

台風19号が通り過ぎ、各地に多大な被害が出ております。
この記事を閲覧されている皆様、そしてお身内や周りの方々が、大きな被害に遭っておられませんように…。

私の住んでいる所も12日夕方からドシャ降りで、地域を広報車が「近くの避難所は○○小学校です～～」のようなアナウンスをしながら回っておりました。
坂の途中にある家屋の2階が住居なため、初めは心配はしていなかったのですが、2台のスマホで何度も鳴り響く『緊急速報』の警報音が恐怖心を煽り、距離4キロ程の所では川が溢れて浸水被害が！との速報も。
非難した方が良いのかなぁ…と、少しソワソワ。
…と、そうしているうちに、雨と風が止みました。
13日の0時過ぎ、だと思います。
少量の食料・飲料しか備えて無かったので、何事も無かったのは本当に幸いでした。

夜明けの頃はほんのりと朝焼けで、汚れたものを全部吹き飛ばし、洗い流したように爽やかな空気へ変わった気がしました。
（被害に遭われた方、例えを不快に感じられましたらお詫び申し上げます。）

台風一過、被害の大きさをTVやNetで報道しています。
本当に、清々しいくらいの快晴で、思わず空を仰いでしまいました。
日に映えた木々は段々と、夏から秋、そして冬へ移ろいで行きます。

↑　2019/10/13 16:15　（栃木県中央公園）

↑　2019/08/25 16:00　（同上）

…大変な現況をお過ごしの方もいらっしゃるのに、能天気な記事ですみません。
最近悲しい事が続きましたので、私の心も『台風一過』となれば良いなぁ、と。


【 おまけ 】
ウサギのいなばさんが亡くなった翌日（2019/09/21）、
色々片付けを終わった後の、猫のはなちゃんです。
いなばさんのケージ前に座り、この後も香箱座りになって暫し動きませんでした。
…何となく、泣けました。

（旦那さん曰く、「これからここは俺の縄張りだニャ」と言っている。(^^;）

実は今日、10/08は私の誕生日だったりします。(^-^;
いつもと変りなく…夜が更けていってます。
増えて嬉しい歳でも無いので、お祝いはケーキの代わりに
『ヤマザキの ごろっとさつまいもスティックケーキ』
しかも【おつとめ品￥68】、お得でしょ～？
十分美味しかったし、満足です。

さて、秋のイメージにテンプレート[serene_resp]の優しい色合いで本とコーヒー…に変更！も良いかもしれません。が、この度は[genial_resp]を秋の紅葉画像で彩ってみようと思います。
方法は簡単。スタイルシートを6ヶ所、変更して頂くだけで出来ます。（2カラム・3カラム共通です）


↑クリックで見本を表示

先ず、テンプレートの管理画面下段の [ genial_resp〇c ] のスタイルシート編集枠内を上から少しずつスクロールします。
青文字の部分を赤文字に変更して下さい。

- - - - - - - - - - - - - - -
スタイルシート編集枠内、ほんの少し下がった所

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:#fff3d8 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);
}

- - - - - - - - - - - - - - -
CSS枠全体の1/8程下にスクロール

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:35.63%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/park.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

を下記のように

/* トップ画像 */
.topimg {
position:relative;
overflow:hidden;
padding-top:35.63%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-131.fc2.com/s/o/r/sorauta1/momiji.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat: o-repeat;
background-size:cover;
}

- - - - - - - - - - - - - - -
CSS枠全体の1/5程下にスクロール

.tape{
position:absolute;
top:-5px;
right:10px;
margin-left:25px;
background-color:#e3f1ff; /* 日付部背景色 */
border:1px solid #d5ebff; /* 日付部枠線色 */
box-shadow: 0 1px 3px rgba(0,0,0,.3);
border-radius: 0 0 5px 5px;
padding:0 1.0em;
}

を下記のように

.tape{
position:absolute;
top:-5px;
right:10px;
margin-left:25px;
background-color:#fff3d8; /* 日付部背景色 */
border: 1px solid #ebddbc; /* 日付部枠線色 */
box-shadow: 0 1px 3px rgba(0,0,0,.3);
border-radius: 0 0 5px 5px;
padding:0 1.0em;
}

- - - - - - - - - - - - - - -
CSS枠全体の1/4程下にスクロール

/* メニュー部分 */
.entry_title h2,
.menu_title{
margin:10px 10px 5px;
padding:0px 10px 2px;
color:#005860; /* タイトル、メニューの文字色 */
font-weight:bold;
line-height:1.5em;
border-bottom:solid 2px #87ceeb; /* タイトル、メニュー下の青ボーダー */
position:relative;
}

を下記のように

.entry_title h2,
.menu_title {
margin:10px 10px 5px;
padding:0px 10px 2px;
color:#005860; /* タイトル、メニューの文字色 */
font-weight:bold;
line-height:1.5em;
border-bottom:solid 2px #85c770; /* タイトル、メニュー下の青ボーダー */
position:relative;
}

- - - - - - - - - - - - - - -
最後に枠内一番下の

.author-comment{
background-color:#f7fffa;
}

を下記のように

.author-comment{
background-color:#fffbf3;
}

後は更新ボタンを押して完了です。
作業をする場合は『複製』を作って作業すると安心です。

- - - - - - - - - - - - - - -
さて、云十云年前のもうすぐ、私が生まれます。（23：25生まれなので。）


最近、ちょっと嫌な事が続いたけど、
これからの一年が有意義なものになりますように。
お誕生日おめでとう♪　私！

先程、FC2からのメールを受信致しまして、コメントの編集が出来るようになったのを自ブログで確認致しました。
不具合の有ったユーザー様も、キチンと編集ができるかをご確認下さいませ。
…結局、障害情報のアナウンスは無かったな…
以下、FC2からのメール内容です。

===
いつもFC2をご利用いただきありがとうございます。
FC2ユーザーサポート○○と申します。

このたびは、ご迷惑をおかけいたしまして申し訳ございません。

お問い合わせいただいた件につきまして、
システムの調整を行いました。

お手数をおかけいたしますが、
お客様のご利用環境下でも正常に動作・表示されるかどうかを
ご確認くださいますようお願いいたします。

なお、ブラウザーに古い情報が残っている場合、
正常に動作・表示されないことがございます。
その際は、キャッシュの削除をお試しください。

▼クッキー・キャッシュの削除
https://help.fc2.com/requirements/SolutionCheckCk

今後ともFC2をよろしくお願いいたします。
===

直って良かったです。