記事に画像が無い時、ラベル別にサムネイル割り当て-朱夏の酔狂者

　私はBloggerで、QooQリスト版をテーマとして使用している。
　トップページはシンプルそのもの。各記事のタイトルの左に記事内の画像がサムネイルとして表示される。だが記事に画像が無いと、タイトルが左にズレた表示となる。ふぞろいでは、ある。

　当然これを回避すべく「記事に画像が無い時に、代替画像をサムネイルにする」のを解説してる記事も複数存在する。知ってはいるけど、私は行っていない。
　何となくね、代替画像って１種だけじゃん。できればラベル（私はカテゴリとして使用）別に代替画像を分けたいと思うんだ。まあ、そのうちにと思ってたんだが、ちょっとやる気になった。
　なったが、調べてもそれに相当する改造ページが見つからない。Bloggerの独自タグなのかな？　『ラベルが〇〇の時、この画像にする』ってのを入れればいいんだよなぁ、などと考えながら旧Twitterで、
「ラベル別にサムネイル画像を自動で入れる」ってどうやるんだろ？
と、Bloggerのハッシュタグ付きで、つぶやいてみる。多分、誰かから情報あると思うんだ。
　すると素早く、ふじやんさんからDMが来た。ありがたく使用させていただく。本当にいつもありがとうございます。お世話になってばかりだ。

　まず、いつもながらに管理画面のテーマ＞下向き三角＞HTMLの編集。

<div class='list-item-img-box'>

↑この行を検索する。で、出てきた下記の部分がサムネイル画像を指定している。『記事に画像があれば、それをサムネイルにしろ』という命令。

<b:if cond='data:post.thumbnailUrl'>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img class='list-item-img' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
    </a>
  </div>
</b:if>

　これを以下のように変更する。

<!-- ラベル別サムネイル割当て -->
<b:if cond='data:post.thumbnailUrl'>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img class='list-item-img' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
    </a>
  </div>
<b:elseif cond='data:post.labels any (label => label.name == "ラベル1")'/>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img src='ラベル1用の画像URL' height='72' width='72'/>
    </a>
  </div>
<b:elseif cond='data:post.labels any (label => label.name == "ラベル2")'/>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img src='ラベル2用の画像URL' height='72' width='72'/>
    </a>
  </div>
<b:elseif cond='data:post.labels any (label => label.name == "ラベル3")'/>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img src='ラベル3用の画像URL' height='72' width='72'/>
    </a>
  </div>
<b:else/>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img src='その他のラベル用の画像URL' height='72' width='72'/>
    </a>
  </div>
</b:if>
<!-- サムネイル割当てここまで -->

　赤文字部分を自分の好きなように入力して。より多くラベル指定したいのなら、ラベル3以降に同様のタグを入れればいい。
　緑色の部分は、不要なら削除で。

　複数のラベルを同じサムネイルにしたい時は、

<b:elseif cond='data:post.labels any (label => label.name ==(l => l.name in {"ラベル1","ラベル2"})'/>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img src='ラベル1とラベル2用の画像URL' height='72' width='72'/>
    </a>
  </div>

　なお、私はすでにオリジナルからサムネイルの形をCSS改造している。HTMLの「記事一覧」の箇所、以下のように。

.list-item-img{
	display: block;
	border-radius: 10%; /* 50%から変えた*/
	width: 72px;
	height: 72px;
	object-fit: cover;
}

　ゆえに今回の改造では、画像指定の部分はクラスを足して、こうなる。

<img class='list-item-img' src='ラベル用の画像URL'/>
</a>

　ラベルが複数ある場合は、最初の方（左側）が適用される。上の画像で言えば「テスト」と「頁サンプル - 夏目漱石」の２つのラベルに別の画像を割り当てているが、「テスト」の方が適用されている。
　また、このサムネイル割り当てはあくまでも「ブログ表示の時」なので、管理画面（ダッシュボード）では表示されない。↓

　ちなみに、サムネイルと記事タイトルがくっつきすぎの気がするので、少しcssも直した。

list-item-title

で検索して、

.list-item-title{font-size: 100%;}

を以下に変えた。

.list-item-title{font-size: 100%;padding-left:10px;}

Bloggerの画像のURL

　この記事を読む人で、Bloggerの画像のURLを知る方法を知らないって事は無いとは思うけど、一応書いておく。

　自分でゴチャゴチャしないように「新しい投稿」でダミー記事を作る。
　　↓
　そこに使いたい画像を入れる。公開する必要は無い。
　　↓
　HTMLビューにして、https://blogger.googleusercontent.com/img/ から表示されているURLを、テキストファイル等にコピーアンドペースト。
　URLアドレスは、やたらと長い。最後の.jpg なり、.png なり、拡張子まで忘れずに。
　　↓
　コピーしたら、その記事は削除しちゃってもいい。

もしも、上手くいかない場合

　大丈夫！　私も最初は改造しても画像が表示されなかった。オリジナルのQoQリスト版で試したところ問題無くできたので、多分、今まで色々と改造をしてきたせいだと思った。
　HTMLのコードをじっくり見て、いままでの改造箇所を調べよう。
　私の場合は、他の改造コードの中に今回のコードが入ってしまっていた。サムネイル割当てのコードを、移動させて成功した。