記事中に画像がない場合のサムネイルを設定する【Blogger/QooQカスタマイズ】

この記事はQooQ list版というテンプレートをもとに作成しています。

初期状態だと記事中に画像がない場合サムネイルが表示されないため上の画像のように表示が異なります。

今回はこれを改善したいと思います。

導入方法

この手順ではテンプレートのHTMLを編集するためテンプレートのバックアップを取ることを推奨します。

トップページのサムネイルの変更方法

まずはトップぺージのサムネイルの表示を変更していきます。

テンプレートの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'/>
    </a>
  </div>
</b:if>

付近に上記のコードがあるのでこれを下記のコードに書き換えます。

<b:if cond='data:post.firstImageUrl'>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img class='list-item-img' expr:src='data:post.firstImageUrl' alt='サムネイル'/>
    </a>
  </div>
<b:else/>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img class='list-item-img' src='画像のURL' alt='サムネイル'/>
    </a>
  </div>
</b:if>

画像のURLとなっているところは記事中に画像がない場合にサムネイルとして表示させたい画像のURLを指定してください。

これでトップページのサムネイルが表示されるはずです。

関連記事のサムネイルの変更方法

次は関連記事のサムネイルの表示を変更していきます。

今度はテンプレートのHTMLを編集する画面から

r.thumbnail="noneImage"

を検索して探します。

このコードの

noneImage

というコードを表示させたい画像のURLに書き換えてください。

これで関連記事のサムネイルが表示されるはずです。

まとめ

今回は記事中に画像がない場合のサムネイルを設定する方法を紹介しました。

間違っているところや質問があれば気軽にコメントもらえると嬉しいです。