どうも。
Bloggerの無料テーマQooQのカスタマイズです。
そのままでも優秀なテーマなので手を加える必要が無いですが。
そこはね、個性を出して行きたいと。
続く日付やタイトルが繰り上がって表示され、トップページの統一感が失われてしまいます。
そこで画像が無い記事が投稿されても、トップページ上画像が無い事を示すサムネイル画像（no imageなど）が表示されるように変更したいと思います。
該当の箇所には条件分岐タグ<b:if>が使われているので、今回は<b:else/>を追加して条件が負の場合の処理をさせます。
つまり、記事内に画像があれば最初の画像をサムネイルとし（真の処理）、無ければ用意された画像をサムネイルとする（負の処理）ように処理をさせます。
使用する画像は一般的な"no image"など、シンプルで記事に画像が無い事を閲覧者に対して明示出来る画像が良いと思います。
自身で作成しても良いですが、フリー素材として提供頂けるサイトもありますので、そちらを流用しても良いと思います。
*フリー素材の利用にあたっては所有者の利用規約に従って下さいませ。
Bloggerの無料テーマQooQのカスタマイズです。
そのままでも優秀なテーマなので手を加える必要が無いですが。
そこはね、個性を出して行きたいと。
画像無しの記事の時に空白回避
さて、投稿した記事に画像が貼り付いていない場合、トップページの記事一覧では空欄になり続く日付やタイトルが繰り上がって表示され、トップページの統一感が失われてしまいます。
そこで画像が無い記事が投稿されても、トップページ上画像が無い事を示すサムネイル画像（no imageなど）が表示されるように変更したいと思います。
該当の箇所には条件分岐タグ<b:if>が使われているので、今回は<b:else/>を追加して条件が負の場合の処理をさせます。
つまり、記事内に画像があれば最初の画像をサムネイルとし（真の処理）、無ければ用意された画像をサムネイルとする（負の処理）ように処理をさせます。
画像を用意
HTMLを変更する前に表示される画像を用意します。使用する画像は一般的な"no image"など、シンプルで記事に画像が無い事を閲覧者に対して明示出来る画像が良いと思います。
自身で作成しても良いですが、フリー素材として提供頂けるサイトもありますので、そちらを流用しても良いと思います。
*フリー素材の利用にあたっては所有者の利用規約に従って下さいませ。
HTMLの変更します。
*テンプレートを変更します。必ずバックアップを取りましょう。
変更は自己責任で行なって下さい。
Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、HTMLの編集ウィンドウにカーソルを置き、Ctrl＋fで検索入力フィールドが表示されます。
<img class='list-item-img'>と入力して該当箇所を検索します。
以下青字を追加します。（</b:if>の前に）
変更は自己責任で行なって下さい。
Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、HTMLの編集ウィンドウにカーソルを置き、Ctrl＋fで検索入力フィールドが表示されます。
<img class='list-item-img'>と入力して該当箇所を検索します。
以下青字を追加します。（</b:if>の前に）
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "4:3")'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img class='list-item-img-def' src='画像のＵＲＬ'/>
</a>
</b:if>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img class='list-item-img-def' src='画像のＵＲＬ'/>
</a>
</b:if>
<b:/else>以降に記述する内容が、記事に画像が無かった時の処理となります。
'画像のURL'の部分には保存されている画像のURLを記述しますが、Bloggerではサーバー上に画像を保存する事は出来ません。
一旦GoogleフォトにアップロードしてからURLを確認して、'画像のURL'の部分に記述する事になります。
一旦GoogleフォトにアップロードしてからURLを確認して、'画像のURL'の部分に記述する事になります。
ＣＳＳを変更します。
以下青字を追加します。
.list-item-img{
display: block;
width: 100%;
height: 270px;
object-fit: cover;
}
.list-item-img-def{
display: block;
width: 100%;
height: 270px;
object-fit: cover;
}
display: block;
width: 100%;
height: 270px;
object-fit: cover;
}
.list-item-img-def{
display: block;
width: 100%;
height: 270px;
object-fit: cover;
}
上記は.list-item-img一部追加と新規に.list-item-img-defを追加します。
両クラス共イメージの高さはheight: 270px;で固定値にしています。
object-fit: coverは、画像の縦横のうち小さい辺を基準に縦横比を維持したままボックスのサイズに拡大または縮小してトリミングしています。
当ブログは変更適用済なので、画像を貼っていない記事は、デフォルトの画像が記事一覧のサムネイルとして表示されている事が確認出来るかと思います。
両クラス共イメージの高さはheight: 270px;で固定値にしています。
object-fit: coverは、画像の縦横のうち小さい辺を基準に縦横比を維持したままボックスのサイズに拡大または縮小してトリミングしています。
当ブログは変更適用済なので、画像を貼っていない記事は、デフォルトの画像が記事一覧のサムネイルとして表示されている事が確認出来るかと思います。
以上、些細な変更でした。