画像なし投稿
Bloggerのテンプレート「QooQ」を使っているのですが、画像がない投稿だと、一覧で表示されたときに寂しい感じになってしまい統一感がありません。 |
左が画像なし投稿 |
毎回画像を用意するのも大変だと思ったので、画像がないときに自動で代わりになる画像を表示してくれる機能はないものかと探してみました。
デフォルト画像を自動で表示
そして発見！
新しく無料のテンプレート「QooQ」をカスタマイズする第1弾。 画像無しの記事でも、トップページにデフォルト画像が表示される様にした。
phoodev.blogspot.com気になる
ひとつ気になったのが、紹介されているやり方だと高さを固定値にしているので、画面のサイズが変わると一覧で表示されている画像の縦横比も変わってしまします。好みだとは思うのですが、同じ縦横比でできないものかと、もともとは高さの指定がないので外しても大丈夫なんじゃないかと思いやってみました。
.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;
}
代わりに表示した画像だけ他の投稿の画像と大きさが違ってしまいました。
なんとかならないものかとHTMLをみてみたり調べてみたりしましたが、解決方法はわかりませんでした。
ヒント
ヒントはないものかと「QooQ」公式ページのリリースノートを眺めているとv1.20
1.【通常版のみ】一覧の画像サイズを4:3から2:1に変更
とあるじゃないですか！
ここで思いつきました。
もしかして！！！
.list-item-img{
display: block;
width: 100%;
}
.list-item-img-def{
display: block;
width: 100%;
}
やってみると見事できました！
 |
右が画像なし投稿 |
0 件のコメント:
コメントを投稿