横か縦か正方形か
ブログに載せる写真は「横」「縦」「正方形」のうちどれが見やすいのかのテスト。
2016/09/26 追記修正
写真の方向を「横」「縦」「正方形」かかわらず、記事のコンテナ内の範囲ではみ出さず表示する方法をネット検索で見つけたので記事を追記修正。
Blogspotのテンプレート編集画面の上級者向けの設定で下記CSSを追加する。
「max-widht: 100%」の100%の数値は好みに合わせて変更したほうがいいと思います。ちなみに僕は90%に設定。
img{
max-width: 100% !important;
height: auto !important;
}
BloggerのカスタマイズやCSSのことはよくわからないけれど、以下のCSSでもいいみたい。
.post-body img{
max-width: 100% !important;
height: auto !important;
}
追記修正ここまで
まず横方向の写真。
次は正方形にトリミングした写真。
次は縦方向に回転させた写真。
ごく一般的なパソコンの解像度(1366x768)では写真を見るのにスクロールしないといけなくなるので見難くなってしまいますね。
パソコンで見る場合、スマートフォンなどの携帯端末で見る場合を考えると横方向か正方形の写真を記事の枠一杯まで拡大してサムネイル表示するのが最善かも知れないですね。
2016/09/26 追記修正
写真の方向を「横」「縦」「正方形」かかわらず、記事のコンテナ内の範囲ではみ出さず表示する方法をネット検索で見つけたので記事を追記修正。
Blogspotのテンプレート編集画面の上級者向けの設定で下記CSSを追加する。
「max-widht: 100%」の100%の数値は好みに合わせて変更したほうがいいと思います。ちなみに僕は90%に設定。
img{
max-width: 100% !important;
height: auto !important;
}
BloggerのカスタマイズやCSSのことはよくわからないけれど、以下のCSSでもいいみたい。
.post-body img{
max-width: 100% !important;
height: auto !important;
}
そしてブログの投稿編集画面で画像の挿入サイズを「元のサイズ」にする。ただし挿入する画像のサイズが大きい場合は読み込みに時間がかかり閲覧者の負担になってしまう場合があるので、レイアウトが崩れていないのであれば特大くらいにする方が良いと思います。
まず横方向の写真。
次は正方形にトリミングした写真。
次は縦方向に回転させた写真。
ごく一般的なパソコンの解像度(1366x768)では写真を見るのにスクロールしないといけなくなるので見難くなってしまいますね。
パソコンで見る場合、スマートフォンなどの携帯端末で見る場合を考えると横方向か正方形の写真を記事の枠一杯まで拡大してサムネイル表示するのが最善かも知れないですね。
2016年09月25日 公開
2019年02月23日 更新
コメント
0 件のコメント :
コメントを投稿