JetThemeでトップページ・関連記事・ガジェット等の画像なし記事に専用のサムネイルを表示する【Blogger】

2025/3/19

本サイトには、広告あるいはアフィリエイトプログラムによるアソシエイトリンクが含まれる場合があります。

JetThmeでは、画像のない投稿記事に関して、トップページの投稿一覧や記事検索画面、サイドバーの新着記事・人気の投稿ガジェット、記事下の関連記事セクションなどでサムネイル画像が表示されないため、レイアウトに若干崩れが生じる場合があります。

画像の有無に関係なくレイアウトの統一感を保つため、画像がない投稿には専用の代替サムネイル（No Image画像）を自動で表示するカスタマイズ方法を紹介します。

テンプレートファイルの編集を行うため、事前にバックアップすることを推奨します。

以降の掲載コードおよびテンプレート内の行数は素のJetTheme v2.9のものです。既にカスタマイズ済みの場合、行数は目安としてください。また、筆者はHTMLやJavaScriptについては素人・勉強中です。筆者環境で動作確認はしていますが、コードに間違いや非効率的な部分などあるかもしれません。

トップページ・人気の投稿ガジェットのNo Image対応方法
関連記事・最新記事のNo Image対応方法
参考リンク

トップページ・人気の投稿ガジェットのNo Image対応方法

トップページ系（記事一覧ページやアーカイブページ、記事検索・ラベル検索結果画面など）と人気の投稿ガジェットの二つはBlogger制御タグの編集によって対応できます。

トップページ系（記事一覧・アーカイブ・記事検索結果など）

<b:includable id='JetArchive' var='post'>で検索し、その少し下1940行目付近にある

<b:if cond='data:post.featuredImage'>
<div class='item-thumbnail'>
<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>  
<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ?  &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</a>
</div>
</b:if>

の部分を以下のコードで置き換えます。

<div class='item-thumbnail'>
<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>  
<b:if cond='data:post.featuredImage'>
<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ?  &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
<b:else />
<img expr:alt='data:post.title' class='lazyload' expr:data-src='【NoImage用画像のURL】' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</b:if>
</a>
</div>

【No Image用画像のURL】部分については、ご自身で用意したBlogger内画像URLに書き換えてください。JetTheme内のJavaScriptによりBlogger画像URLのパラメータに準拠して書き換えられサイズ調整されるため、必ずBloggerにアップロードした画像のURLを使ってください。

変更点の解説

トップページおよび人気の投稿のどちらもBloggerの制御タグを使って同じような分岐をさせています。

元のコードでは<b:if cond='data:post.featuredImage'>によって投稿内画像の有無を判定し、存在する場合にのみdivタグやaタグを含むサムネイル要素を出力する設定となっています。

一方、改修したコードでは<b:else />を追加し、投稿内に画像がない場合には【NoImage用画像のURL】を含む方のimgタグを出力するよう追記しています。また、投稿内画像のあるなしに関わらず<div class='item-thumbnail ～>等の画像関連のタグを出力するように<b:if ～>～</b:if>で囲む箇所を変更しています。

<b:if cond='data:post.featuredImage'>
	data:post.featuredImageが真（投稿内に画像がある）の場合に出力されるimgタグ
<b:else />
	それ以外（投稿内に画像がない）の場合に出力されるimgタグ
</b:if>

また、「data:post.featuredImageが真（投稿内に画像がある）の場合に出力されるimgタグ」について、expr属性と三項演算子を用いて投稿内の最初の画像がYouTubeのサムネイルかBlogger内画像か判定し、それに基づいて画像URLや遅延読み込み用のクラスを動的に変更しています。この条件部分と値を変更することで<b:else />を使う代わりに以下のように書くこともできます（この場合は前後の<b:if cond='data:post.featuredImage'>および</b:if>も不要になるので削除してください）。

<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ?  &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : (data:post.featuredImage ? data:post.featuredImage : &quot;【NoImage用画像のURL】&quot;)' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>

関連記事・最新記事のNo Image対応方法

ブログ記事下部の関連記事セクションおよびサイドバーの最新記事ガジェットに関してはJavaScriptを修正して専用サムネイルを表示させます。

function related_temp(e)で検索し、2686行目付近の以下のコードを

function related_temp(e) {
  return (e.title ? "<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>" + e.title + "</span></div>" : "") + "<div class='row row-cols-sm-2'>" + e.posts.map(function (data, i) {
    return "<article class='mb-4'><div class='h-100 overflow-hidden rounded position-relative border jt-border-light bg-archive shadow-sm'>" + (data.img ? "<div class='item-thumbnail'><a class='jt-bg-light d-block ratio ratio-21x9' href='" + data.url + "'><img alt='" + data.title + "' class='object-cover lazy-" + data.grup_id + " lazyload' data-src='" + data.img + "' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/></a></div>" : "") + "<div class='item-content p-4'><h2 class='item-title fs-6 mb-2' itemprop='headline'><a class='text-reset' href='" + data.url + "'>" + data.title + "</a></h2><div class='item-meta text-secondary d-flex flex-wrap fw-light'>" + (data.author != "Unknown" ? "<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-user'/></svg>" + data.author + "</small>" : "") + "<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>" + data.date + "</small></div></div></div></article>";
  }).join("") + "</div>";
}

まるまる以下のコードで置き換えます。

// 関連記事NoImage対応
function related_temp(e) {
  return (e.title ? "<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>" + e.title + "</span></div>" : "") + "<div class='row row-cols-2 row-cols-md-3'>" + e.posts.map(function (data, i) {
    const imgSrc = data.img ? data.img : "【NoImage用画像のURL】";
    return "<article class='mb-3 px-2'><div class='h-100 overflow-hidden rounded position-relative border jt-border-light bg-archive shadow-sm'>" + "<div class='item-thumbnail'><a class='jt-bg-light d-block ratio ratio-21x9' href='" + data.url + "'><img alt='" + data.title + "' class='object-cover lazy-" + data.grup_id + " lazyload' data-src='" + imgSrc + "' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/></a></div>" + "<div class='item-content p-2'><h2 class='item-title fs-7 mb-0' itemprop='headline'><a class='text-reset' href='" + data.url + "'>" + data.title + "</a></h2><div class='item-meta text-secondary d-flex flex-wrap fw-light'>" + "<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>" + data.date + "</small></div></div></div></article>";
  }).join("") + "</div>";
}

【NoImage用画像のURL】は他と同様にBloggerにアップロードした画像URLを指定してください。

変更箇所について

関連記事・最新記事ともに同様の変更を加えています。

もとのコードでは、data.imgに値があればimgタグやそれに関連するdivタグ・aタグを生成し、data.imgが空ならそれらを生成しない、という動作でした（(data.img ? "<div ～ </div>" : "")の部分）。

改修したコードでは、専用画像を利用するための変数imgSrcを用意し、data.imgに値があればその画像を、画像がない場合は【NoImage用画像のURL】をimgSrcに格納するよう変更しました（const imgSrc = data.img ? data.img : "【NoImage用画像のURL】";の部分）。サムネイルにはimgSrcの画像を表示し、記事内に画像がない場合でも常に表示するので、関連する条件分岐を削除しimgタグなどが常に生成されるように変更しました。

参考リンク

Blog

#Blogger #HTML #JavaScript #JetTheme

namimori

namimori（なみもり）と申します。歌やギター、弾き語り等の音楽関係の他、Androidスマホ、フリーソフト等を用いたPC活用などが趣味。X: @namimori37

JetThemeでトップページ・関連記事・ガジェット等の画像なし記事に専用のサムネイルを表示する【Blogger】

トップページ・人気の投稿ガジェットのNo Image対応方法

トップページ系（記事一覧・アーカイブ・記事検索結果など）

人気の投稿ガジェット

変更点の解説

関連記事・最新記事のNo Image対応方法

関連記事

最新記事ガジェット

変更箇所について

参考リンク

namimori

ブログ内検索

カテゴリ

タグ

月別アーカイブ

【AD】弓木奈於さん応援中

最新記事

人気記事

トップページ・人気の投稿ガジェットのNo Image対応方法

トップページ系（記事一覧・アーカイブ・記事検索結果など）

人気の投稿ガジェット

変更点の解説

関連記事・最新記事のNo Image対応方法

関連記事

最新記事ガジェット

変更箇所について

参考リンク

namimori

ブログ内検索

カテゴリ

タグ

月別アーカイブ

【AD】弓木奈於さん応援中

最新記事

人気記事

自作の麻雀集計表を公開：スプレッドシートでPC・スマホから管理

コンパクトなデュアルフットスイッチ自作

麻雀スコア集計スプレッドシートを改良しました

DVD styler とImgBurnで二層DVDにDVDビデオを焼く方法：レイヤーブレークの設定

回らなくなった日立製掃除機のブラシを最低限の分解で直してみた