*Essence

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

Top Page › Template › テンプレ修正等 › ct_responsive の修正・更新致しました。(3)
2019-01-28 (Mon)

ct_responsive の修正・更新致しました。(3)

テンプレート『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)
上記の記事にて、本記事のスタイルシートを少し修正、及びテンプレートを更新致しました。
併せて記事をご覧下さい。

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

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

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

no-img1
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>
関連記事

Comment







管理者にだけ表示を許可