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)

欲しいものリスト / 優先度の高いほしいものリスト / ☕を奢る
Donate 寄付 カンパ サポート 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."