【Blogger】記事一覧のサムネイル代替画像の背景色をラベルごとに変更する
投稿日：
更新日：
Blogger では記事中に画像が存在しない場合、基本的に記事一覧のサムネイルが表示されない。
そのため、画像がない記事でもサムネイルを表示させたい場合、以下のようなカスタマイズを行う必要がある。
当ブログでも上の記事と同じような方法で代替画像を表示させていたが、そもそも画像を貼っている記事が極端に少ないため、記事一覧に同じ代替画像がずらーっと並んでしまう。なんだか物悲しい。
かと言ってラベルごとに違う代替画像を用意するなんてことはしたくない。なんせ面倒だから。
ならば、背景を透過した画像を 1つ用意し、ラベルごとに背景色だけ変えればいいのではと思い付いた。
代替画像の背景色をラベルごとに変更する
代替画像サムネイルの構造はこんな感じ。
<div class='post-noimg' style='background: [背景色]'>
<img alt='アイキャッチ' class='post-img' height='60' loading='lazy' src='[画像 URL]' width='60'/>
</div>ラベルが増えるたびに背景色を CSS に追加しなければいけないのが面倒で、style 属性にそのまま埋め込んでしまった。attr() が早く使えるようになってほしい。
実際に Blogger に追加するコードは 3パターン考えた。
いずれの方法もラベルが増えたら手動でラベル名と背景色を追加しなければいけないので、ラベルをあまり細かく付けない＆変更しない人向け。
また、記事にラベルが複数付いていると、ラベルの順番が変わって思ったような背景色にならない可能性がある。
カスタマイズの前には必ずバックアップをとってください。
1. b:switch, b:case を使う方法
<div class='post-noimg'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<b:switch var='data:label.name'>
<b:case value='[ラベル名]'/>
<b:attr name='style' value='background: [背景色]'/>
<b:case value='[ラベル名]'/>
<b:attr name='style' value='background: [背景色]'/>
<b:default/>
<b:attr name='style' value='background: [背景色]'/>
</b:switch>
</b:if>
</b:loop>
<b:else/>
<b:attr name='style' value='background: [背景色]'/>
</b:if>
<img alt='アイキャッチ' class='post-img' height='60' loading='lazy' src='[画像 URL]' width='60'/>
</div>こっちのが行数は多いけど、ラベル名を指定する部分が見やすい。ラベルが増えたら以下の部分を <b:default/> の前に追加していけばオッケー。
<b:case value='[ラベル名]'/>
<b:attr name='style' value='background: [背景色]'/>2. ラムダ式を使う方法
<div class='post-noimg'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<b:if cond='data:post.labels any (l => l.name == "[ラベル名]")'>
<b:attr name='style' value='background: [背景色]'/>
<b:elseif cond='data:post.labels any (l => l.name == "[ラベル名]")'/>
<b:attr name='style' value='background: [背景色]'/>
<b:else/>
<b:attr name='style' value='background: [背景色]'/>
</b:if>
<b:else/>
<b:attr name='style' value='background: [背景色]'/>
</b:if>
<img alt='アイキャッチ' class='post-img' height='60' loading='lazy' src='[画像 URL]' width='60'/>
</div>ラムダ式を使ってみたくて作った。行数は少なくできたけど、ラベル名指定するところがごちゃごちゃしてあまり好きじゃない。
ラベルが増えたら以下の部分を 1個目の<b:else/> の前に追加していけばオッケー。
<b:elseif cond='data:post.labels any (l => l.name == "[ラベル名]")'/>
<b:attr name='style' value='background: [背景色]'/>そもそもラムダ式ってなに？ という方は、うまく説明できないのでこちらを読んでください。
3. どっちも使わない方法
<div class='post-noimg'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<b:attr cond='data:label.name == "[ラベル名]"' name='style' value='background: [背景色]'/>
<b:attr cond='data:label.name == "[ラベル名]"' name='style' value='background: [背景色]'/>
</b:if>
</b:loop>
</b:if>
<img alt='アイキャッチ' class='post-img' height='60' loading='lazy' src='https://1.bp.blogspot.com/-a_ykmzi6Udw/YuPG40yrcBI/AAAAAAAAQNY/cVVEVjl-NSUBnsH5JQS77LTKYOIXkraOgCNcBGAsYHQ/s240-c-e365/no-image.png' width='60'/>
</div>あとから思い付いて、これでよくね？ となったやつ。CSS でデフォルトの背景色を指定してる前提。
ラベルが増えたら以下の部分を 1個目の<b:if/> の前に追加していけばオッケー。
<b:attr cond='data:label.name == "[ラベル名]"' name='style' value='background: [背景色]'/>あとがき
記事一覧におんなじ代替画像ばかり表示されるのが嫌だったので、背景を透過した画像を使ってラベルごとに背景色を変えてみた。
記事にしてはみたものの誰が真似すんねんと思っている。たぶんここではそういう記事ばかり書く。