JetTheme 関連記事のカスタマイズ
<!-- markdown-mode-on -->
# **概要**
<figure class="blogcard b-link"><a aria-label="記事詳細へ(別窓で開く)" href="https://www.plz-reference.com/2022/09/blogger-jettheme.html#____" rel="noopener noreferrer" target="_blank"><div class="blogcard-content"><div class="blogcard-image bi-link"><div class="blogcard-image-wrapper biw-link"><img alt="【Blogger】JetThemeの導入とカスタマイズ - plz-reference-blog" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jjs15fII5y7ad90D7Jb8fH4JU7kpgsICjSGqFawjEsXsi7j8v1IQamhV8SsSt-oYpwCycenCUy7fQekQlHL7gfZl--2SlXEMLf6RCgq64MuR0xYLXX1waLBOxBc0hFxQEDM2bVyGbcY5K-Czzpgvhr0_OaoK5La9S7084Mbts7-MwJ4QCQh8B-Fy/w400-h210/jettheme.png" width="100"></div></div><div class="blogcard-text"><p class="blogcard-title bt-link">【Blogger】JetThemeの導入とカスタマイズ - plz-reference-blog</p><p class="blogcard-description bd-link">Blogger用のシンプルかつ高速でおしゃれなJetThemeの導入方法と、カスタマイズをいくつかまとめてみました。</p></div></div><div class="blogcard-footer bf-link"> <img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.plz-reference.com/2022/09/blogger-jettheme.html#____" width="16">www.plz-reference.com</div></a></figure>
この記事を適用して、スマホで2列、PCで3列表示にしています。さらに、マージンやパディングも紹介されたものに合わせています。「筆者」と「投稿日」を削除しているので、とてもすっきりした印象です。
自分の覚えとして、ここのカスタマイズを整理しておきます。
<a name="more"></a>
## シンプルな表示にする
### 「筆者」と「投稿日」を削除する方法
まず、`function related_temp(e) {` を探します。探したオリジナルコードはこれになります。
薄い背景色のコードを削除すると、引用先で示していたように<b>「筆者」と「投稿日」が削除</b>されます。
<pre style="white-space: pre-wrap;"><code class="language-html">
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 gx-2'>" + e.posts.map(function (data, i) {
return "<article class='mb-3 px-2'><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-2'><h2 class='item-title fs-7 mb-2' itemprop='headline'><a class='text-reset' href='" + data.url + "'>" + data.title + "</a></h2><span class='highlight'><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></span></div></div></article>";
}).join("") + "</div>";
}
</code></pre>
Mermaidを導入したので使ってみます。コードをフローチャートで表します。
```mermaid
graph TD;
classDef noImage fill:#f4cccc,stroke:#000,stroke-width:1px;
Start["開始"] --> CheckTitle["タイトルのチェック"]
CheckTitle -->|タイトルあり| DefineTitle["title 変数を定義"]
CheckTitle -->|なし| SkipTitle["タイトルなし"]
DefineTitle --> InitLoop["投稿データのループを開始"]
SkipTitle --> InitLoop
InitLoop --> CheckImage["data.img の確認"]
CheckImage -->|存在する| UseImage["変数 imgSrc = data.img を定義"]
CheckImage -->|存在しない| NoImage["画像なし処理（スキップ）"]
UseImage --> GenerateHTML["HTML要素を生成"]
NoImage --> GenerateHTML
GenerateHTML --> AddMetadata["著者・日付の情報を追加"]
AddMetadata --> End["処理終了"]
class NoImage noImage;
```
<style>
.highlight {
background-color: #4a4a4a !important; /* よりグレーに近い色 */
padding: 2px 4px;
border-radius: 4px;
}
code {
white-space: pre-wrap !important;
}
</style>
### 「筆者」を削除する方法
薄い背景色のコードを削除すると、<b>「筆者」が削除</b>されます。
<pre style="white-space: pre-wrap;"><code class="language-html">
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 gx-2'>" + e.posts.map(function (data, i) {
return "<article class='mb-3 px-2'><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-2'><h2 class='item-title fs-7 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'>" + <span class='highlight'>(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>" : "") + </span>"<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>";
}
</code></pre>
### 「投稿日」を削除する方法
薄い背景色のコードを削除すると、<b>「投稿日」が削除</b>されます。
<pre style="white-space: pre-wrap;"><code class="language-html">
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 gx-2'>" + e.posts.map(function (data, i) {
return "<article class='mb-3 px-2'><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-2'><h2 class='item-title fs-7 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>" : "") + <span class='highlight'>"<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>" + data.date + "</small></span></div></div></div></article>";
}).join("") + "</div>";
}
</code></pre>
## スマホでの表示
PCでは3列、スマホでは2列表示にします。CSSのメディアクエリを活用するのが簡単な方法です。
`data-shuffle='3'` とデフォルトの値を3に設定したまま、スマホサイズの画面では2件のみ表示されるようにCSSで制御できます。
直接 `.row.row-cols-md-3` の 直下の `article` 要素に適用します。
```css
/* スマホ関連記事 */
@media screen and (max-width: 576px) {
.row.row-cols-md-3 > article:nth-child(n+3) {
display: none;
}
}
```
### 補足：JeteThemeでの関連記事の設定
**条件**：
`<b:includable id='JetRelatedPost' var='post'>` で始まるコード
**動作**：
`function related_temp(e) {` で始まるコード
## 画像のない関連記事に画像をつける方法
[「アイキャッチのない記事で、固定画像をサムネイル画像として表示する」](https://newprivatelibrary.blogspot.com/2025/05/blog-post_25.html) で画像の無い記事にもサムネイル画像を表示するようにカスタマイズしました。同様のことを**関連記事**にも行います。
<svg width="24" height="24" ><use xlink:href="#i-chatgpt"></use></svg><span style="font-size:12px;"> </span>ChatGPT で導きだした成果です。
### 動作解析
`function related_temp(e) {` で始まるコードでは下記のようになっています。
```js
(data.img ?
"<div class='item-thumbnail'>...</div>"
:
""
)
```
つまり：
* `data.img` がある → サムネイル表示
* `data.img` がない → `""`（何も表示しない）
このため「No Image画像」が表示されません。
---
**「No Image画像」を表示させる**ためには、
`data.img` が存在しない場合には、**No Image画像のURLを使って代わりに表示する**ようにします。
---
### 修正コード
以下が修正後の `related_temp` 関数です：
```javascript
function related_temp(e) {
const noImageUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGufis0idCDqb29dBvyQCx5M5dHTE4bpc52w6WGtcdKpsQImJUUvWSFYn5k_IDsn1TjOhyfzw51TgvvabIrVAYjxasRmPjGTPdSKudZTYD6JA5DLW2rm-9fkahTfV4Cmn-GjsDaiCDnJ5/w250-h150-n-e365/noimg.jpg";
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 : noImageUrl;
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-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>";
}
```
---
### 変更点まとめ
| 内容 | 修正前 | 修正後 |
| -------- | --------------- | ----------------------------------- |
| 画像なしの処理 | 表示しない (`""`) | `No Image` を表示するURLを設定 |
| サムネイルURL | `data.img` のみ使用 | `data.img` がなければ `noImageUrl` に切り替え |
### オリジナルコードのフォーマット（見え方）
前述したものと同じですが、見え方をオリジナルの`function related_temp(e) {` と同じにしたものです。薄い背景色の部分がオリジナルとの違いです。
<pre style="white-space: pre-wrap;"><code class="language-html">
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 gx-2'>" + e.posts.map(function (data<span class='highlight'>) {
const imgSrc = data.img ? data.img : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGufis0idCDqb29dBvyQCx5M5dHTE4bpc52w6WGtcdKpsQImJUUvWSFYn5k_IDsn1TjOhyfzw51TgvvabIrVAYjxasRmPjGTPdSKudZTYD6JA5DLW2rm-9fkahTfV4Cmn-GjsDaiCDnJ5/w250-h150-n-e365/noimg.jpg";</span>
return "<article class='mb-3 px-2'><div class='h-100 overflow-hidden rounded position-relative border jt-border-light bg-archive shadow-sm'>" <span class='highlight'>			</span>+ "<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='" + <span class='highlight'>imgSrc</span> + "' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/></a></div>" <span class='highlight'>		</span>+ "<div class='item-content p-2'><h2 class='item-title fs-7 mb-2' itemprop='headline'><a class='text-reset' href='" + data.url + "'>" + data.title + "</a></h2></div></div></article>";
}).join("") + "</div>";
}
</code></pre>
```mermaid
graph TD;
classDef defaultImage fill:#ffe599,stroke:#000,stroke-width:1px;
Start["開始"] --> CheckTitle["タイトルのチェック"]
CheckTitle -->|タイトルあり| DefineTitle["title 変数を定義"]
CheckTitle -->|なし| SkipTitle["タイトルなし"]
DefineTitle --> InitLoop["投稿データのループを開始"]
SkipTitle --> InitLoop
InitLoop --> CheckImage["data.img の確認"]
CheckImage -->|存在する| UseImage["変数 imgSrc = data.img を定義"]
CheckImage -->|存在しない| UseDefaultImage["変数 imgSrc にデフォルト画像を設定"]
UseImage --> GenerateHTML["HTML要素を生成"]
UseDefaultImage --> GenerateHTML
GenerateHTML --> End["処理終了"]
class UseDefaultImage defaultImage;
```
### No Image画像をランダムに選ぶ
[「アイキャッチのない記事で、固定画像をサムネイル画像として表示する」](https://newprivatelibrary.blogspot.com/2025/05/blog-post_25.html) と同様にランダムな画像表示を行います。そこでのスクリプトで設定したNo Image画像のURLを呼び出しているので、このコード単独では動作しません。
<pre style="white-space: pre-wrap;"><code class="language-html">
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 gx-2'>" + e.posts.map(function (data<span class='highlight'>) {
function getRandomImage(images) {
var index = Math.floor(Math.random() * images.length);
return images[index];
}
const imgSrc = data.img ? data.img : getRandomImage(defaultImages);</span>
return "<article class='mb-3 px-2'><div class='h-100 overflow-hidden rounded position-relative border jt-border-light bg-archive shadow-sm'>" + <span class='highlight'>			</span>"<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<span class='highlight'> jt-random-default-thumbnail' data-src='" + imgSrc</span> + "' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/></a></div>"<span class='highlight'>		</span> + "<div class='item-content p-2'><h2 class='item-title fs-7 mb-2' itemprop='headline'><a class='text-reset' href='" + data.url + "'>" + data.title + "</a></h2></div></div></article>";
}).join("") + "</div>";
}
</code></pre>
```mermaid
graph TD;
classDef randomImage fill:#c9daf8,stroke:#000,stroke-width:1px;
Start["開始"] --> CheckTitle["タイトルのチェック"]
CheckTitle -->|タイトルあり| DefineTitle["title 変数を定義"]
CheckTitle -->|なし| SkipTitle["タイトルなし"]
DefineTitle --> InitLoop["投稿データのループを開始"]
SkipTitle --> InitLoop
InitLoop --> CheckImage["data.img の確認"]
CheckImage -->|存在する| UseImage["変数 imgSrc = data.img を定義"]
CheckImage -->|存在しない| UseRandomImage["関数 getRandomImage(defaultImages) を呼び出し"]
UseImage --> GenerateHTML["HTML要素を生成"]
UseRandomImage --> GenerateHTML
GenerateHTML --> End["処理終了"]
class UseRandomImage randomImage;
```
## 関連リンク