QooQ 人気投稿のサムネイルに共通no-imageを設定【Blogger】
個別記事にアイキャッチを入れていない場合、トップの新着記事一覧の他にも人気投稿・関連記事にサムネイルが出ません。QooQでは画像がないとレイアウトが崩れてしまうので見た目がイマイチになります。
レイアウト崩れ防止のためには過去記事にアイキャッチを入れる事が基本ですが、修正がめんどくさい・記事にはアイキャッチを表示したくないという場合もあるかもしれません。
こんな場合の対処法は２つあります。
代替画像を自動挿入
私のように別に用意した「no-image専用画像」を自動挿入させたい方は、次のやり方でどうぞ。こちらは過去記事修正の必要がありません。テンプレート本体のHTMLを編集するだけで設定（指定画像の自動挿入）することができます。
※QooQのver.によってコードが変更されているので、該当箇所を見つけるのが大変かもしれません。
トップページ記事一覧のサムネイル
※QooQリスト版を使用しているので、カード版の場合はコードが少し違うと思います。また、トップ新着記事の画像サイズにカスタマイズを加えている場合などもコードが少しちがってきます。
まず<div class='list-item-img-box'>を検索。
<div class='list-item-img-box'>
<a expr:href='data:post.url'>
<img class='list-item-img'expr:src='data:post.thumbnailUrl'/>
</a>
</div>そのまますぐ下に、以下コードを追加。
<b:else/>
<div class='list-item-img-box'>
<a expr:href='data:post.url'>
<img class='list-item-img-def' src='https://no-imageの画像.JPG'/>
</a>
</div> もうちょっと範囲を広く見るとコードはこんな感じになります。マーカー部が追加したコード。
<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'/>
</a>
</div>
<b:else/>
<div class='list-item-img-box'>
<a expr:href='data:post.url'>
<img class='list-item-img-def' src='https://no-imageの画像.JPG'/>
</a>
</div>
</b:if>CSSは .list-item-img と同じ設定で .list-item-img-def を追記してください。
リスト版のトップページ記事一覧（新着記事）のサムネイルサイズのカスタマイズについては、別途記事を書いています。
8-stars.blogspot.com人気投稿のサムネイル
※レイアウトで人気投稿のガジェットを追加している場合に以下のコードが出てきます。
まずは、HTMLを編集より<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->を探します。
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails.-->
<div expr:class='data:showSnippets ? "item-content" :"item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 72, "1:1"):data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image' />
</b:with>
</a>
</div>
<b:else />
★この部分に以下の共通no-imageのコードを追加★
</b:if>
共通no-imageを自動挿入するコードはこちら。ちなみに当ブログでは、以下のようにしました。画像の表示サイズについては class='popular-posts-def' をつけて、CSSで調整しています。
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img class='popular-posts-def' src='共通no-image画像のURL'/>
</a>
</div>
CSSはこんな感じ。
.popular-posts-def {
display: block;
width: 72px;
height: 72px;
object-fit: cover; 
見にくいのですが、上記のビリヤードボール（画像上から2.4.5番目）が代替画像になり、これを他の記事サムネイルと合わせて72pxの正方形で表示するようにCSSを設定しています。
【Blogger / QooQ】ガジェット "人気の記事" の記事タイトルとサムネイルの表示
記事の下、関連記事のサムネイル
テーマ＞カスタマイズ＞HTMLを編集 より mrp-v1.04 を検索。すぐ下の行の "noneImage" 部分に、"https://～" と画像のURLを入れます。
//mrp-v1.04
var relatedAry=new Array;function mrp_input(e){for(var t=0;t<e.feed.entry.length;t++){var r=new Object,n=e.feed.entry[t];r.title=n.title.$t;try{r.thumbnail=n.media$thumbnail.url}catch(e){r.thumbnail="noneImage"}for(var
※以下省略関連記事はこれだけで共通サムネイルが表示されます。
ダミーアイキャッチ
もう1つの方法として「記事にはどうしてもアイキャッチを表示したくない」場合、各記事ごとにダミーアイキャッチを入れて「display:none」で非表示にすることで画像なしによるレイアウト崩れが防止できます。
記事作成時に都度設定する必要がある（過去記事の場合は再編集の必要があります）ので、アイキャッチのない記事が多い場合はあまりお勧めしないやり方です。
---
以上、共通画像の自動挿入については、全部で3か所（トップ新着記事一覧と人気投稿と関連記事）です。これを全て設定すると、各記事にアイキャッチがなくてもデザイン的に崩れることがなくなります。
当ブログ内、QooQカスタマイズ記事をまとめました
8-stars.blogspot.com
