*Essence

昨日はさすがに雪降る予報でジョギングに出掛けられなかったので、連休中日、いつもの栃木県中央公園へ。
日は照ってても寒波が来てるから寒い寒い…
芝生の上には融け残ってる雪と、芝と枯葉と泥にまみれた雪だるま。^^;
しかも小さい奴があちこちに。
…何となく、雪見ると作っちゃうんだよね～。
作った誰かさん、私もその気持ち、分かるよ。



公園中央に有る『昭和大池』の水が抜かれておりました。
で、よく見ると（画像の左端を外れて）向こう側に居るのは…



スマホの拡大で画像が荒いですが…公園の池によく来るアオサギ。え？2羽？？
色の濃いのと薄いのと、2羽…グレーの薄い方も眼の上の方に黒いラインが入っていたからアオサギなんだと思うけど。

寒いけど、走りに来て良かったな。
彼らが2羽で、それもちょっと嬉しかった。(^-^)


オマケ↓


やっぱり日向が暖かくって良いよね♪

スポンサーサイト

テンプレート『al_responsive』をご利用頂き、誠に有難うございます。m(__)m
先日、要約表示時のアイキャッチ画像表示方法を修正・更新した『ct_responsive』と同様の更新を、『al_responsive』にも2月6日に行いました。

ct_responsive の修正・更新致しました。（for IE）
ct_responsive の修正・更新致しました。（3）

また、2，3カラム時のメニュータイトルを折り畳む事ができてしまう不具合を、ユーザー様である　【Super源さんの雑学事典】管理人のSuper源さん様にご指摘及び修正用 Javascript をご教示頂きました。
この不具合については、'19.01.23の記事 『al_responsive のカスタマイズ（エントリー全文表示②）』 のコメントのやり取りをご参照頂くと分かり易いと思います。^^;
（修正した箇所、修正済み Javascript も掲示されております。）

度重なる修正及び更新、ご利用の皆様には大変ご迷惑をお掛けしております。
申し訳ございません。
使い勝手が良く、不具合の（出来れば極力）無いテンプレートを目指しておりますので、
何卒 末永くお付き合い頂けます様 宜しくお願い致します。m(__)m

この度、色々とお教え頂きましたSuper源さん様が発信されている【Super源さんの雑学事典】は、面白くて為になる雑学と、使い勝手の良い『オンライン便利ツール』や『ブログパーツ』等々、とても有益で楽しいBlogです。是非♪訪れてみて下さいませ。(^-^)

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
1月28日の記事、トップページ要約表示方法を変更した修正・更新について、この修正をした際、IE（InternetExplorer）及び古いブラウザ（Firefox35, Opera12.15, Safari5.1.7）で、トップページ要約表示時の記事画像が無い場合に空のスペースが出来てしまう不具合を見付けました。
原因は「枠内に画像を綺麗に収めるための css "object-fit"プロパティ」が効かないIEやEdgeに 対応させるために入れた『object-fit-images』ライブラリ。


↑クリックで大きく表示

この『object-fit-images』は、記事内の画像や指定したアイキャッチ画像などを"object-fit"プロパティが使えないIEやEdgeで表示するために、そのままimgとしてではなく実質style属性のbackground関連プロパティで表示させるよう書き換えているようです。
そのため、ダミー画像をsrcで指定する先般の方法では非表示にならず、『object-fit-images』によってダミー画像が背景として表示されてしまう事になります。
なので、背景になった特定画像を非表示にするスタイルを追記しました。

28日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;
object-fit:cover;
font-family:'object-fit:cover;'; /*IE対策*/
border:1px solid #ddd;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}

30日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;
-o-object-fit: cover; /* 古いopera用ベンダー */
font-family:'object-fit:cover;'; /* IE対策 */
object-fit:cover;
border:1px solid #ddd;
vertical-align:middle;
}
.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; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}

赤い文字部分を追記する事により、IEでも意図した表示にする事ができました。
（.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"], の末尾に有るカンマ（ , ）を忘れずに。）



確認ブラウザ
PC表示
Firefox35, Opera12.15, Safari5.1.7, IE11, MS EdgeHTML17, GoogleChrome72.0
SP表示
android8.0 Chrome, iOS12.1.3 Safari Chrome

新しいブラウザでは問題無いようですが、IE、Edge、古いブラウザをご利用で表示に不具合が有りましたら、1月28日の記事と併せて上記の箇所を追記下さいませ。
例え減ったとは言え まだまだ利用者がいる IE（InternetExplorer）、出来るだけ新しいバージョンには対応しておきたいと思いますので、お手数ですが宜しくお願い致します。m(__)m

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
細かい修正で、何処を修正したのか見た目は全く分かりません。が、トップページ要約表示をされていて、記事内にサムネイル表示する画像が無い・設定していない場合の表示方法を少し変更しました。

『ct_responsive』の場合は、
<a href="<%topentry_link>"><img src="<%topentry_image_url>" alt="<%topentry_title>" onError="this.style.display='none'"></a>
のように、表示する画像URLが無い場合は onError="this.style.display='none'" で「エラーが有ったら表示しない」javascriptを入れておりました。
これでも問題無く非表示になり、要約文字のみ表示されます。
ただ、HTMLのソースを表示してみると、<img src="" alt="説明" onError="this.style.display='none'">のようにsrc内は空になっているので、Validator.nu (X)HTML5 Validator で 『Error: Bad value for attribute src on element img: Must be non-empty.』 というエラーをもらってしまいます。要するに、src属性が空になっているのはいけません、って事です。(^^;
このテンプレートを作った時から、ずっと考えていたんですよね。方法を。
（因みに、『al_responsive』の場合はサムネイル表示にFC2独自タグを使って表示しているので上記のようなエラーは有りません。が、画像に必須の alt タグが付けられない・画像比に満たない部分の背景が黒、という問題もありまして。。FC2に要望中ですが難しそうです。）
…今迄も色んな表示方法を試してみたのですが、この度 下記のような方法でエラーを出さない表示を考えてみました。

[HTML編集枠1/3程の所にある]
<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>

img src="" が空の時に取り敢えず容量の小さいダミー画像を空の部分に入れ、その画像を

[スタイルシート編集枠2/5程の所にある］
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}

cssで非表示にする、という方法です。
画像有り・無しで表示に問題無く、validatorでもエラーは無くなりましたので、この形で共有掲載しようと思います。
非表示の方法としてはあまりキレイでは有りませんが、例えばスタイルシート部分の記述をせず、HTMLの画像URLだけ入れておけば掲載画像が無い場合の『no image』表示として利用できます。
Read More に参考画像URLを掲載しましたので、気に入ったものがございましたらお使い下さい。

上記修正の件、もし何処か不具合などを見付けられましたら、何なりとお申し出下さいませ。
宜しくお願い致します。m(__)m

2019/01/31 『ct_responsive の修正・更新致しました。（for IE）』
上記の記事にて、本記事のスタイルシートを少し修正、及びテンプレートを更新致しました。
併せて記事をご覧下さい。

https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img4.jpg


https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img3.jpg


https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img2.jpg


https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img1.jpg

【 使い方 】
下記HTMLタグのオレンジ色の部分に、上記の画像URLを入れるだけで、no-image画像が表示されます。（トップページ要約表示のみ）勿論、ご自身で記事作成時に入れたアイキャッチ画像が優先表示されます。

<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>
Return <<

1月15日の更新で、レスポンシブテンプレート、al_responsive 3c（3カラム）, 2cr（2カラム右）, 2cl （2カラム左）の個別記事追記表示を折り畳みに変更致しましたので、トップページ全文表示用の変更HTMLも修正致します。（'19.01.15 以前にDLした al_responsive のトップページを全文表示にするカスタマイズは、『al_responsive のカスタマイズ（エントリー全文表示）』をご参照下さい。）
難しい変更箇所はございませんので、要約表示から全文表示にしたい方は、是非カスタマイズしてみて下さい。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →［al_responsive〇c］のHTML編集枠を開いて「トップページここから」という所までスクロールし、下画像のように変更して更新。

上画像の赤い部分を削除して下画像のように変更・更新します。
（クリックで大きく表示）



下のように変更後更新ボタンを押す。↓


↑画像は完了状態。HTMLソースをこの形にします。

下段の Read More を開いてHTMLをコピー&ペーストする場合は、テンプレートの設定→HTML編集枠をスクロールし、

<!-- トップページ ここから--> ～ <div class="entry_state">

までを貼り換えて下さい。
ここまでで2、3カラム時に全文表示になり、1カラムでは要約表示になります。
1カラムも全文表示にしたい場合は、スタイルシート編集枠3/4程スクロールした所に有る

/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){　という部分の
/* 要約表示時記事非表示 */
.kiji2{
display:none;
}
を display:block; に変更、その下に
.kiji1{
display:none;
}
を追加して下さい。

不具合が有った時のために複製を作成して作業すると安心です。