アイキャッチ画像を大きくして四角にします
私は QooQ List版 を使ってブログを書いています。
そのホーム画面は下記の通りで、アイキャッチ画像が小さく丸く切り取られ、画像がよくみえません。
以前は QooQ 通常版 を使っていて画像も適当に貼っていました。
すると、下記のように写真サイズが一定でなく、どこまでが一つの記事なのかもわからない状況でした。
これも困ります。
トップページをリストのようにして、画像も大きくしたいと思います。
QooQのList版でアイキャッチ画像を四角に大きく変更
ホーム画面のアイキャッチ画像を四角に変更し、大きく表示できるようです。
① アイキャッチ画像を丸から四角に変更し画像を大きくする
HTML編集画面で list-item-img を検索
.list-item-img-box{
flex-shrink: 0;
flex-basis: 72px;
}
.list-item-img{
display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: cover;
を
.list-item-img-box{
flex-shrink: 0;
flex-basis: 180px;
}
.list-item-img{
display: block;
border-radius: 0%;
width: 160px;
height: 90px;
object-fit: cover;
}
に変更しました
大事な変更点
flex-basis: 72px の数字を大きくしたらアイキャッチ画像用のスペースが広くなる
border-radius: 50%; を0%にしたら四角になる
width: 72px; height: 72px; の数字を大きくしたらアイキャッチ画像用が大きくなる
私は 画像の横にスペースをおいて文字 にしたかったので下記のように設定しました。
パワポのスライドサイズ比率に合わせてアイキャッチ画像の大きさを設定しました。
これだと下記のようになります。
アイキャッチ画像の大きさ、文字との間隔はいいですが、画像が粗くてよく見えません。
ホーム画面のアイキャッチ画像をきれいに表示する
指定されるアイキャッチ画像のサイズを大きくすればいいようです。
ただ、サイズを大きくするとページの読み込みが遅くなるようなので、とりあえず、そこそこのサイズにしてしばらく続けてみることにしました。
HTML編集画面で img class を検索
<img class='list-item-img' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
を
<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 200, "9:16")'/>
に変更しました
200, "9:16" の200を大きくしたらサイズが大きく、画面がきれいになります。9:16は画像の縦横比率のようです。
参考にさせて頂きました。ありがとうございました。
まとめ
・QooQ List版 でアイキャッチ画像を四角に表示変更しました。
・アイキャッチ画像をきれいに表示するためにサイズを大きくしました。
画像が大きくなって少しは見やすくなったでしょうか。
そろそろアイキャッチ画像も統一させていこうと思います。
0 件のコメント:
コメントを投稿