PC表示時のタイトル画像（アイキャッチ自動表示）が大きすぎる

HIROKO-M commented 3 weeks ago

要件

PC表示の時に、各投稿記事においてタイトル画像が大きいため、サイズを小さくしたい例）https://sensitive-skin.real-cosme.net/?p=53814 ![image][sensitive-skin.real-cosme.net__p=53814.png]

・画像サイズを1250pxに修正・画像は <article class="p-article"> 内て左右中央に配置する

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

@松田寛子内容確認いたしました。よろしくお願いします。

HIROKO-M commented 3 weeks ago

@松田寛子お疲れ様です。修正に関して、「画像サイズを1250pxに」とのことですが、1250pxに修正いたしますと、元の画像サイズより大きくなってしまいます。上記の画像を参照させていただくと900pxくらいがちょうどいいかなと思います。開発環境にて実装いたしましたのでご確認よろしくお願いいたします。

HIROKO-M commented 3 weeks ago

@湊拓実お疲れ様です。

修正に関して、「画像サイズを1250pxに」とのことですが、1250pxに修正いたしますと、元の画像サイズより大きくなってしまいます。

すみません。。「元の画像サイズより大きくなってしまう」というのが理解できていないです。（元画像のサイズは 2555 x 2555 ピクセルの認識）元のサイズとはどこを指していますか？

修正いただいた内容を確認しましたが、以下を追記した理解で合っていますか？

.p-article__header-image {
    width: 900px;
    height: 900px;
    margin: auto;

上記のように width と height でそれぞれサイズを固定してしまうと、画面サイズが小さくなった（例えばスマホ）時にもサイズ変更れずに固定になってしまうので、以下のようにmaxで指定するのがいいかと思います。

.p-article__header-image {
    max-width: 1200px;
    height: auto;
　margin: auto;

※修正したら、必ず画面サイズを各サイズに切り替えて、期待する表示になるか確認してみて！

どうぞよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

@松田寛子

修正に関して、「画像サイズを1250pxに」とのことですが、1250pxに修正いたしますと、元の画像サイズより大きくなってしまいます。上記の画像を参照させていただくと900pxくらいがちょうどいいかなと思います。開発環境にて実装いたしましたのでご確認よろしくお願いいたします。

こちら自分の勘違いでした。申し訳ございません。

.p-article__header-image { max-width: 1200px; height: auto; 　margin: auto;

こちらの方法で修正いたしましたが、PC表示ではうまく表示されましたが、スマホ表示に変更した際拡大されてしまい縦長の表示となってしまいました。（https://i.gyazo.com/c08f23824a8d6a3eb8a20f262a89cccb.jpg）引き続き修正方法の検討を行っていきます。

HIROKO-M commented 3 weeks ago

@湊拓実上記実装ありがとうございます！そしてスミマセン！要件を再度確認しましたら画像サイズを1250pxに修正という事ですので、以下記述だけ私の方で修正させていただきました。

.p-article__header-image {
max-width: 1200px;　→　1250px

@肥田麻乃お疲れ様です。上記の通りdev環境で修正完了しましたのでご確認をお願いいたします。問題なければ、引き続き本番環境へCSSを反映させていただきます。

https://dev-sensitive-skin.real-cosme.net/?p=53814

HIROKO-M commented 3 weeks ago

@松田寛子おつかれさまです。上記ご対応ありがとうございます。

dev環境にて確認させていただきましたところ、【現行サイトもdev環境も見た目としての違いはない】という認識なのですが、こちら寛子さんの方でも同様の見た目で間違いないでしょうか？

お手隙きの際にご確認をお願い致します。

例）現行：https://sensitive-skin.real-cosme.net/?spec=82368 ![image][現行サイト.png]

dev環境：https://dev-sensitive-skin.real-cosme.net/?spec=82368 ![image][dev環境.png]

HIROKO-M commented 3 weeks ago

@肥田麻乃お疲れ様です。

【現行サイトもdev環境も見た目としての違いはない】という認識なのですが、こちら寛子さんの方でも同様の見た目で間違いないでしょうか？

すみませんが、ご質問の意味が理解できておりません。上記でおっしゃられている「見た目」とは何を指していますでしょうか？この課題では、要件に従い、PC表示の時に各投稿記事においてタイトル画像サイズをmax1250pxに制限しております。

肥田さんの環境下では、画面サイズが改修されていないという判断ですか？画像サイズは1250pxということでしたので、ご確認いただくPC画面のサイズは1600px以上であれば以前の画面との違いをご確認いただけると思いますがいかがでしょうか？

どうぞよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

@松田寛子

上記でおっしゃられている「見た目」とは何を指していますでしょうか？

見た目＝修正いただいた箇所の画面サイズです。修正前（現行）、修正後（dev環境）とまったく画面サイズは変わっていないです。（※一つ前のコメント内に比較キャプチャあり）

n＝2 MacBook Air (M1, 2020) Googlechrome・Safari

寛子さんの方ではdev環境の方は画面サイズ変わっていますか？変わっているようでしたら、お手数ですがキャプチャいただけますでしょうか？

寛子さんの方で、私の送ったキャプチャと同じということでしたら、今回ご指定させていただいた1250pxという数値自体が私共の想定した画面サイズと違っていたのだと考えます。

ご確認どうぞよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

@肥田麻乃お疲れ様です。ご返信ありがとうございます。私の環境下では以下の通り、dev環境で最大1250pxに固定されます。 ![image][画像サイズ.png]

HIROKO-M commented 3 weeks ago

@松田寛子先程はミーティングありがとうございました。

お話にも上がりました通り、現段階の修正内容で本番環境へ反映をお願いいたします。

後日サイズ修正をした際は、都度ご報告させていただきます。

引き続きどうぞよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

@肥田麻乃承知しました。よろしくお願いいたします。

HIROKO-M commented 3 weeks ago

@肥田麻乃お疲れ様です。本番環境へ、現段階までの改修済みカスタムCSSコードを反映しました。ご確認のほどよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

@松田寛子お疲れ様です。修正反映を確認いたしました。ご対応ありがとうございました。

HIROKO-M / Test_002

PC表示時のタイトル画像（アイキャッチ自動表示）が大きすぎる #164

要件