どうも。
素人ながらブログの環境を少しづつではありますが手を加えています。
今回はトップページについて少し手を加えてみましたよ。
その横にタイトルとスニペットが表示される、見栄えの良いトップページです。
私もこの表示が良くてVaster2を使わせて頂いています。
しかし、ブログを見ると表示された画像がオモシロ画像に！
表示領域内に収まるようにアスペクト比を調整して表示されてしまいますので、画像の高さが表示領域より大きい場合などは、潰れて表示される為、オモシロ画像になってしまう事があります。
記事の最初の画像だけサイズを統一すれば問題ありませんが、なかなか面倒です。
また、表示領域のサイズを変えるのも限界があります。
固定された表示領域にアスペクト比を変え無いで画像全体を表示（リサイズ）するか、アスペクト比を変えて全体を表示する等の対応をしてみたいと思います。
値を指定する事により表示領域に対して画像の大きさを変更する事ができます。
セット出来る値は5つあります。
以下の元になる画像がどんな感じに表示されるか確認して見ました。
サンプルはcontainに合わせ表示されています。
高さが長い画像は高さに合わせていますので幅に余白が出ます。
画像の見栄えは良いが、レイアウトは不格好って感じでしょうか。
高さがある画像は全てが収まっていませんが、アスペクト比は変化してませんので、そんなに見栄えが悪くありません。
両プロパティセットとも表示領域をもう少し小さくしてもいいかと。
まぁ個人的な意見ですが。
object-fit: cover;で表示したほうが、高さのある画像は部分の表示となりますが、幅x高さ共にアスペクト比は変らず、レイアウトの統一感はあります。
object-fit: cover;に変更しまぁす。
Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.article-list imgの部分を探します。
（HTML編集画面でCtrl＋fで.article-list imgを検索。）
数行下にpadding-right:20pxがあるので、この部分をobject-fit: cover;に変更します。
合わせて表示領域をサイズもか変更しました。
width:250px; height:200px;に変更。保存して完了です。
ブログを開くと、以下の表示になります。
なかなか良い感じだと思います。
但し、このままだとpaddingによる右側余白を排除した為、タイトル等々との間隔がありません。（赤線の部分）
この修正については、別途行います。
*以下の記事で対応しました。
Vaster2 カスタマイズ #2 トップページのカスタマイズの続き
＜＜ご注意＞＞
変更する場合は、必ずテンプレートのバックアップを取りましょう。
また、変更した項目にはコメントを追加したほうがいいですよ。念の為。
私は、変更前の情報を入れています。以下の感じで。
object-fit: cover; /* change 2017.3.28 padding-right:20px; */
素人ながらブログの環境を少しづつではありますが手を加えています。
今回はトップページについて少し手を加えてみましたよ。
Vaster2 トップページのサムネ画像はアスペクト比が変更されてしまう
トーマスイッチさん作Vaster2では、画像添付して作成された記事を投稿した場合、トップページにサムネ画像が表示されます。その横にタイトルとスニペットが表示される、見栄えの良いトップページです。
私もこの表示が良くてVaster2を使わせて頂いています。
しかし、ブログを見ると表示された画像がオモシロ画像に！
表示領域内に収まるようにアスペクト比を調整して表示されてしまいますので、画像の高さが表示領域より大きい場合などは、潰れて表示される為、オモシロ画像になってしまう事があります。
バランス良く表示するには…
記事に貼り付ける画像も別のサイトから引用目的で利用する画像や、自分で撮影した写真を貼る場合などで幅高さのサイズはバラバラになる場合があります。記事の最初の画像だけサイズを統一すれば問題ありませんが、なかなか面倒です。
また、表示領域のサイズを変えるのも限界があります。
固定された表示領域にアスペクト比を変え無いで画像全体を表示（リサイズ）するか、アスペクト比を変えて全体を表示する等の対応をしてみたいと思います。
プロパティ「object-fit」を使ってみる。
画像のアスペクト比に作用するプロパティで、値を指定する事により表示領域に対して画像の大きさを変更する事ができます。
セット出来る値は5つあります。
- fill
- contain
- cover
- none
- scale-down
object-fitの各値の違い
各セットがどんな感じになるのか確認です。以下の元になる画像がどんな感じに表示されるか確認して見ました。
 |
| 上野動物園のハシビロコウ |
object-fit: fill;
初期値です。表示領域にリサイズして、領域いっぱいに表示します。アスペクト比は変更されます。
ハシビロコウさんが潰れていますね。
ハシビロコウさんが潰れていますね。
 |
| object-fit: fill; |
object-fit: contain;
幅or高さの長い方が表示領域に合わせられ、リサイズされます。
アスペクト比は維持されます。
サンプルは高さに合わせリサイズされています。
アスペクト比は維持されます。
サンプルは高さに合わせリサイズされています。
 |
| object-fit: contain; |
object-fit: cover;
幅or高さの短い方が表示領域に合わせられ、リサイズされます。
アスペクト比は維持されます。
サンプルは幅に合わせリサイズされています。
アスペクト比は維持されます。
サンプルは幅に合わせリサイズされています。
 |
| object-fit: cover; |
object-fit: none;
元のサイズ
 |
| object-fit: none; |
object-fit: scale-down;
contain or noneの短い方を表示サンプルはcontainに合わせ表示されています。
 |
| object-fit: scale-down; |
他の記事のサイズが違う画像が一緒に表示された場合を考慮
幅x高さが違う画像が一覧に表示された時の見栄えを考慮して、以下のプロパティセットのどちらかにしたいと思います。object-fit: contain;の場合
幅が長い画像は特に問題無し。高さが長い画像は高さに合わせていますので幅に余白が出ます。
画像の見栄えは良いが、レイアウトは不格好って感じでしょうか。
 |
| contain |
object-fit: cover;の場合
幅が統一されレイアウト的には良しと。高さがある画像は全てが収まっていませんが、アスペクト比は変化してませんので、そんなに見栄えが悪くありません。
 |
| cover |
両プロパティセットとも表示領域をもう少し小さくしてもいいかと。
まぁ個人的な意見ですが。
object-fit: cover;で表示したほうが、高さのある画像は部分の表示となりますが、幅x高さ共にアスペクト比は変らず、レイアウトの統一感はあります。
object-fit: cover;に変更しまぁす。
記事イメージ部のCSSを変更します。
変更対象はCSS内.article-list imgで記述されてます。Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.article-list imgの部分を探します。
（HTML編集画面でCtrl＋fで.article-list imgを検索。）
数行下にpadding-right:20pxがあるので、この部分をobject-fit: cover;に変更します。
合わせて表示領域をサイズもか変更しました。
width:250px; height:200px;に変更。保存して完了です。
ブログを開くと、以下の表示になります。
なかなか良い感じだと思います。
 |
| object-fit: cover;に変更しました。 |
但し、このままだとpaddingによる右側余白を排除した為、タイトル等々との間隔がありません。（赤線の部分）
この修正については、別途行います。
*以下の記事で対応しました。
Vaster2 カスタマイズ #2 トップページのカスタマイズの続き
＜＜ご注意＞＞
変更する場合は、必ずテンプレートのバックアップを取りましょう。
また、変更した項目にはコメントを追加したほうがいいですよ。念の為。
私は、変更前の情報を入れています。以下の感じで。
object-fit: cover; /* change 2017.3.28 padding-right:20px; */
