2022年3月1日火曜日

非レスポンシブ公式Bloggerテーマ等で画像が無い時にNo Image画像を表示させる

のコードを

Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO - Komunikasi Praktis
https://www.komunikasipraktis.com/2017/11/cara-membuat-template-blog-responsive-seo.html
ベースにアップデートさせたものになります

まずは画像が無い時に表示させるNo Imageの画像を用意します
NO IMAGE
YouTubeのサムネ限界480x360で作成(前に書いた通り)
良いフォントが見付かったのでとりあえず白黒でwebpでサイズを抑えてあります

コード
<!-- Auto Read More start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<div class='Image thumb'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 999, )'/></div></a>
<b:else/>
<a expr:href='data:post.url'>
<div class='Image thumb'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/a/AVvXsEiQ1RbOXykMbz1Li5TDFYrdD-5ab8T2mnTeGOp8sn1fRkLWdq2bIZHIPV6d_SfpZtpRstzKImwsh_A41QhCKdVOYRpFOev6jb78S8GeT09lBXzQn4Z4KYUud2koWdNB8PV5YunwZu5a92fQdnAqmZ8BrYXSH7hrLOILPcsIPB7yHrh4Eq--JyGZj8Ae?name=no-image.webp'/></div></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> </div>
</b:if>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<!-- Auto Read More end -->

拡張子のパラメーターはおまじない的に付けてみました
デモ
https://mbt-thumb.blogspot.com/

F(uriouz)

欲しいものリスト
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

コメントを投稿

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."