画像なし記事に自動で画像表示する
<!-- markdown-mode-on -->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR1gy1kug5ibCfypXw0xvqruVkfQ-pwGC8LvwMgZKyNIvaNbBegIyKh2YuuHfiRw7V5bqOgDVdif1SZtWjbfnUCWT5MTaHK54ClKeryN7_ohiIyPGAsaPBLSajCpAYaC90YMNHoxu1gyFf8HIr-L1wz2wBD3BSkDLjNf2iAZJ-76Oek2M/s1600/Gemini_256_Image_rl3lk4rl3lk4rl3l.png" style="display:none;"/>
## **概要**
画像がない記事では、タイトル表示だけの記事一覧になり寂しいので、**自動で画像貼り付け**をしようという試みです。
はてなブログにはこの機能がありますが、今使っている**Jettheme**にはないので、この機能を追加します。
何がアイキャッチで、何がサムネイルなのかわかっていませんが、記事一覧に表示される画像を弄ってみます。
ここでの画像の呼び方の定義をしておきます。
* 記事一覧に小さく表示される画像：**サムネイル画像**
* 記事の中で最初に出てくる画像：**アイキャッチ画像**
* 記事に貼り付けた画像：挿入画像、埋め込み画像
特に記事HTMLで指定しない限りは、一般的には**アイキャッチ画像がサムネイル画像になる**と思います。
<a name="more"></a>
## 1. 固定の代替画像をサムネイル画像にする方法
BloggerのJetthemeで、サムネイル画像がない記事に自動で固有の代替画像を表示させるには、
1. Bloggerの管理画面から「テーマ」→「HTMLを編集」を選択します。
1. テンプレート内でサムネイル画像を表示している箇所探します。（F12で見つけた`list-item-thumbnail`の記述を遡って、サムネイル画像表示用のコードを見つけます。）
1. 次のコードを見つけました。投稿に`featuredImage`（注目画像）が設定されている場合に、その画像(`<img/>`タグ)を表示する仕組みになっています。
```html
<b:if cond="data:post.featuredImage">
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img expr:alt="data:post.title" expr:class="data:post.featuredImage.isYoutube ? "object-cover lazyload" : "lazyload"" expr:data-src="data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</img></div>
</div>
</b:if>
```
4. これをごっそり、条件分岐付きの次のコードに書き換えます。
* `あなたの代替画像のURL`には、Bloggerにアップロードした代替画像のアドレスを指定します。
```html
<b:if cond="data:post.featuredImage">
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img expr:alt="data:post.title" expr:class="data:post.featuredImage.isYoutube ? "object-cover lazyload" : "lazyload"" expr:data-src="data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</img></div>
</div>
<b:else></b:else>
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img alt="no image" class="object-cover lazyload" data-src="あなたの代替画像のURL" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</div>
</div>
</b:if>
```
* このコードは、オリジナルコードの`` の直前に `<b:else></b:else>` を追加して、`data:post.featuredImage` が `false`（画像が設定されていない）の場合に、`<b:else></b:else>` から `` までの間のコードが実行されます。
* そして、`<b:else></b:else>` の中に、代替画像を表示するための `<div>` 構造と `<img/>` タグを追加しています。
* `data-src='あなたの代替画像のURL'`：**ここをあなたのブログにアップロードした代替画像のURLに置き換えてください。**
* <span style="color:blue; font-size:120%;"><u>アイキャッチ画像のない記事のサムネイル画像に**URLで設定した代替画像**が表示されます。</u></span>
## 2. 複数の代替画像をランダムにサムネイル画像にする方法
代替画像を複数用意して、ランダムに割り振るために 代替画像のURL の部分をJavaScriptで動的に変更します。
### 代替画像のURLリストを作成する:
まず、使用したい代替画像のURLをJavaScriptの配列に格納します。Bloggerに画像をアップロードして、それぞれのURLを取得してください。
次のスクリプトを ``の前に置きます。
```js
<!-- ランダム画像選択スクリプト -->
<script>
/*<![CDATA[*/
var defaultImages = [
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_1', // 実際のURLに置き換える
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_2', // 実際のURLに置き換える
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_3' // 実際のURLに置き換える
// 必要に応じて追加
];
function getRandomDefaultImage() {
var index = Math.floor(Math.random() * defaultImages.length);
return defaultImages[index];
}
document.addEventListener('DOMContentLoaded', function () {
var imgs = document.querySelectorAll('.jt-random-default-thumbnail');
imgs.forEach(function (img) {
var randomUrl = getRandomDefaultImage();
img.setAttribute('data-src', randomUrl);
img.setAttribute('src', randomUrl);
});
});
/*]]>*/
</script>
```
### HTML
さきほどの [固定の代替画像をサムネイル画像にする方法](https://newprivatelibrary.blogspot.com/b/blog-preview#toc_headline_2) で書き換えたHTMLをごっそり次のHTMLに書き換えます。
**複数記事ループで動かすには？**
ループ内に複数の `<img/>` が存在する場合、つまり、一画面の記事一覧の中にアイキャッチ画像のない記事が複数ある場合には、
`<img>`のように画像を指定します。
```html
<b:if cond="data:post.featuredImage">
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img expr:alt="data:post.title" expr:class="data:post.featuredImage.isYoutube ? "object-cover lazyload" : "lazyload"" expr:data-src="data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</img></div>
</div>
<b:else></b:else>
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img class="jt-random-default-thumbnail object-cover lazyload" data-src="" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</div>
</div>
</b:if>
```
## 3. カテゴリ専用の代替画像をサムネイル画像にする方法
[複数の代替画像をランダムにサムネイル画像にする方法](複数の代替画像をランダムにサムネイル画像にする方法) に更なる付加機能を付けます。
特定のカテゴリに限っては、ランダムな代替画像の代わりに専用の代替画像を表示させます。
このときの代替画像についても、複数の画像をランダムに選択するようにしています。
### スクリプト
専用のカテゴリを**Blogger**とした場合のスクリプトです。`var categoryImages` が専用画像URLを格納する変数です。
```js
<!-- ランダム画像選択スクリプト -->
<script>
/*<![CDATA[*/
var defaultImages = [
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_1', // 実際のURLに置き換える
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_2', // 実際のURLに置き換える
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_3' // 実際のURLに置き換える
// 必要に応じて追加
];
var categoryImages = [
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_cat_1', // カテゴリ専用のURLに置き換える,
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_cat_2' // カテゴリ専用のURLに置き換える
// 必要に応じて追加
];
function getRandomDefaultImage() {
var index = Math.floor(Math.random() * defaultImages.length);
return defaultImages[index];
}
function getRandomCategoryImage() {
var index = Math.floor(Math.random() * categoryImages.length);
return categoryImages[index];
}
document.addEventListener('DOMContentLoaded', function () {
var articles = document.querySelectorAll('.item-post');
articles.forEach(function (article) {
var img = article.querySelector('.jt-random-default-thumbnail');
if (!img) return;
// 既にdata-srcが設定されていたらスキップ
if (img.getAttribute('data-src')) return;
var labelEl = article.querySelector('.item-tag a');
var label = labelEl ? labelEl.textContent.trim() : '';
if (label === 'Blogger') {
var categoryUrl = getRandomCategoryImage();
img.setAttribute('data-src', categoryUrl);
img.setAttribute('src', categoryUrl);
} else {
var randomUrl = getRandomDefaultImage();
img.setAttribute('data-src', randomUrl);
img.setAttribute('src', randomUrl);
}
});
});
/*]]>*/
</script>
```
### HTML
同様にHTMLをごっそり今回のHTMLに書き換えます。
```html
<!-- サムネイル画像のない記事向け代替画像 -->
<b:if cond="data:post.featuredImage">
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img expr:alt="data:post.title" expr:class="data:post.featuredImage.isYoutube ? "object-cover lazyload" : "lazyload"" expr:data-src="data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</div>
</div>
<b:else></b:else>
<div class="list-item-thumbnail">
<div class="jt-bg-light d-block ratio ratio-4x3 h-100">
<img class="jt-random-default-thumbnail object-cover lazyload" data-src="" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</div>
</div>
</b:if>
<!-- end of add thumbnail -->
```
## 4. 任意の複数カテゴリごとに専用画像を複数持たせられるように拡張
やりすぎ感はありますが、....
スクリプトの変更だけで対応できます。（HTMLはそのままで、変更なし。）
**注意**
カテゴリに、#（ハッシュタグ）付のタグ方式（例：#jettheme）は使えません。下記のスクリプトで設定した画像は表示されません。解決策がありません。
### スクリプト
```js
<!-- ランダム画像選択スクリプト（カテゴリ別対応版） -->
<script>
/*<![CDATA[*/
var defaultImages = [
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_1',
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_2',
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_3'
];
// カテゴリごとの専用画像を定義（必要に応じて追加）
var categoryImageMap = {
'Blogger': [
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_cat_1', // カテゴリ専用のURLに置き換える,
'https://blogger.googleusercontent.com/img/a/AVvXsEh_random_image_cat_2' // カテゴリ専用のURLに置き換える
// 必要に応じて追加
],
'Tech': [
'https://example.com/images/tech1.png',
'https://example.com/images/tech2.png'
],
'News': [
'https://example.com/images/news1.png'
]
};
// ランダムに1つ選ぶ関数
function getRandomImage(images) {
var index = Math.floor(Math.random() * images.length);
return images[index];
}
document.addEventListener('DOMContentLoaded', function () {
var articles = document.querySelectorAll('.item-post');
articles.forEach(function (article) {
var img = article.querySelector('.jt-random-default-thumbnail');
if (!img) return;
// 既にdata-srcが設定されていたらスキップ
if (img.getAttribute('data-src')) return;
var labelEl = article.querySelector('.item-tag a');
var label = labelEl ? labelEl.textContent.trim() : '';
if (label in categoryImageMap) {
var categoryUrl = getRandomImage(categoryImageMap[label]);
img.setAttribute('data-src', categoryUrl);
img.setAttribute('src', categoryUrl);
} else {
var defaultUrl = getRandomImage(defaultImages);
img.setAttribute('data-src', defaultUrl);
img.setAttribute('src', defaultUrl);
}
});
});
/*]]>*/
</script>
```
## 関連リンク
</img></div>