attention admin about comments trackbacks you may also like

アイキャッチ画像Webp表示

2020年01月28日
ブログいじり
0

前回の記事は、トップページに表示される記事紹介のアイキャッチ(サムネイル)画像は、webp形式で表示しています。

FC2以外に画像をアップしているので、紹介しにくい部分はありますが・・・

過去記事の中には、アイキャッチ(サムネイル)画像が有れば、無いのもあります。

アイキャッチ(サムネイル)画像が無ければ、「No Image」が表示されるので、当ブログでは、その部分を表示しない仕様にしました。

アイキャッチ(サムネイル)画像が無い場合の写真

なぜ、そうしているかと言うと、過去記事では、アイキャッチ(サムネイル)画像が無い記事が大半です。そうすると「No-Image」だらけになるので、それを避けています。

で、ここを利用しました。

記事で、アイキャッチ(サムネイル)画像がある場合はそのまま表示。

アイキャッチ(サムネイル)画像が無くて、その記事の記事番号をファイル名としたWebp形式の画像が有れば表示、

Webp形式の画像が有った場合の写真

無ければ、今まで通りの、アイキャッチ(サムネイル)画像が表示されない表示になります。

アイキャッチ(サムネイル)画像が無い場合の写真

マウスオーバーで右下がめくれ、ファビコン画像を表示していますので、一部、背景色を透明にしています。(苦肉の策)

<!--body_img_none-->
<section class="grid-item" style="background-color:rgb(51,51,51);box-shadow: none;">
<div class="tira-favi">
<div class="tira" style="background-color:rgb(31,31,31)">
<a href="<%topentry_link>">
<picture class="loading">
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-srcset="https://onga.sakura.ne.jp/gazou/<%topentry_no>.webp">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="https://onga.sakura.ne.jp/gazou/<%topentry_no>.jpg" alt="<%topentry_title>" onerror="this.style.display='none'">
</picture>
</a>
<div class="grid-content" style="background-color:rgba(0,0,0,0.0)">
<h2 class=grid-title>
<a class=grid-title-anchor href="<%topentry_link>"><%topentry_title></a>
<script>nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')</script>
</h2>
<a class=grid-category-anchor href="<%topentry_category_link>"><%topentry_category></a>
<svg class="svg-inline-stroke svg-margin" viewBox="0 0 24 24" role=img><use xlink:href=#inline-comment></use></svg> <%topentry_comment_num> <time class=grid-datetime datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>/<%topentry_month>/<%topentry_day></time>
</div>
</div>
</div>
</section>
<!--/body_img_none-->
関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(0)

There are no comments yet.