Q&A
HTMLの構造が違うので、CSSでの対応は難しく、テーマをいじる必要があるのではないかと思います。
kanaePinkさんにできそうですか？
お世話になります。
ワードプレス上で掲載した写真の大きさがずれてしまう問題について解決したくこの度質問をさせて頂きました。
お手数おかけしますがよろしくお願いいたします。
今回の為に環境を設定いたしました。
お手数おかけしますが以下URLをご確認ください。
対象となる画像 2000ｐｘ ｘ 1200ｐｘ
１：投稿ページの詳細ページになります。
http://waww.wp.xdomain.jp/2019/07/03/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e6%8a%95%e7%a8%bf/
２：トップページになります。
http://waww.wp.xdomain.jp/
対象画像は以下になります。
http://waww.wp.xdomain.jp/2019/07/03/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e6%8a%95%e7%a8%bf/
実現したいこと
１のページをひらきchrome検証からレスポンシブデザインをチェックしました。
画像内にある赤いラインがずれる事なく、縮尺も変更せずレスポンシブデザインでも表示されています。
つまり通常に画像全てが表示されています。
２のページをひらきchrome検証からレスポンシブデザインをチェックしました。
すると画像がどんどん小さくになるにつれて表示方法が変わっていきました。具体的に言うと赤い線が上下それぞれ縮尺によってみえなくなります。この挙動をなくし全画像常に表示させたいです。
２のトップページでも１と同じ挙動をしたいと思っています。
つまり１のようにレスポンシブデザインでも縮尺がなくどの携帯でも画像がずれない設定です。
ためしたこと
１と２の該当箇所をソースを調べて比較しました。
１：投稿ページの詳細ページのCSS該当部分
.img-responsive { display: block; max-width: 100%; height: auto; } img { width: 100%; height: auto; } img { vertical-align: middle; } img { border: 0; } { overflow-wrap: break-word; } { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img[Attributes Style] { width: 2000px; height: 1200px; }
２：トップページのCSSになります。
element.style { background-image: url(http://waww.wp.xdomain.jp/wp-content/uploads/2019/07/0001.jpg); } main .wrap .thumbnail a { width: 100%; height: 300px; } .thumbnail a { position: relative; display: table; width: 100%; height: 100px; background-size: cover; background-position: center center; background-repeat: no-repeat; } a { color: #337ab7; text-decoration: none; } a { background-color: transparent; } * { overflow-wrap: break-word; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
実際にソースを変えてためしたこと
そこで違いである以下をためしましたが画面は変わりませんでした。
.img-responsive { height: auto;
どのようにすれば詳細ページの画像と同じ挙動をトップページでも実施する事ができるのでしょうか？
トップページで画像を全て表示させレスポンシブでも全ての画像位置を表示
させたいです。つまり１詳細ページと同じ挙動をさせたいです。
どうぞよろしくお願いいたします
ご連絡ありがとうございます。確かにHTML構造は違いますがなぜCSS対応が難しいのでしょうか？phpができるのでテーマファイルをいじる事はできますが具体的にコードで解決策を提示して頂かないとこれ以上話がすすまないと思います。宜しくお願いします。
なるほど、ご自分でテーマファイルを変更できるとのこと、安心しました。
> なぜCSS対応が難しいのでしょうか？
2は、autoで高さを決めることができないからです。高さを定めるためには、background-imageではなく、img要素を内包する必要があるでしょう。
返信ありがとうございます。まずコードで解決策を提示して頂けないとこれ以上すすまないと思います。その為、Lhankorさんから教えて頂いた私が考えたコードを以下に示しました。あとコメントを質問への追記・修正の依頼ではなく下のコメントから記載をお願いします。
２に以下CSSを入れる。autoで高さを決められないとはどういう意味でしょうか？１でautoで私がしたい挙動はしています。具体的に言うと高さはどのスマホでも同じように表示されます。
img {
width: 100%;
height: auto;
}
宜しくおねがいいたします。
> まずコードで解決策を提示して頂けないとこれ以上すすまないと思います。
CSSでの解決は難しい、と申し上げましたとおり、解決策はないため提示できません。
> 「下のコメントから記載をお願いします。」
下のコメント、とはどちらのことでしょう？
> autoで高さを決められないとはどういう意味でしょうか？
height: auto; の挙動はなかなか複雑です。
内容物の高さに合わせることになりますので、内部にimg要素がない2の場合は、背景画像の高さと一致せず、1の場合は内部にimg要素があるため画像と高さが一致します。
繰り返しになりますが、HTMLの構造を変えることをおすすめします。
例えば対象となる画像 2000ｐｘ ｘ 1200ｐｘ以外は使わないとした場合トップページで全て表示できる方法はありますか？HTML構造を変える事はできますが具体的にphpの中をどう変えるのでしょうか？
> 例えば対象となる画像 2000ｐｘ ｘ 1200ｐｘ以外は使わないとした場合トップページで全て表示できる方法はありますか？
試してみないとわかりませんが、おそらく可能かと思います。レイアウトに融通がきかなくなるため、個人的にはおすすめしかねますが……
> 具体的にphpの中をどう変えるのでしょうか？
私のプロフィールを見ていただくとわかるのですが、PHPのスキルは初心者以下だと自認していますので、その方面にはご期待なさらないでください。（一応、テーマファイルの改造などはしてみたことはありますが……）
kanaePinkさんに「テーマファイルの変更を自分でできるか」とお尋ねしたのは、そのような理由です。スキルをお持ちのとことで、大変安心いたしました。
他の回答者をお待ちになるのであれば、その旨を質問に追記して変更すべき部分のPHPのコードをご提示いただいたほうが、回答がつきやすいでしょう。
マルチポストです。
https://teratail.com/questions/198953
teratailではマルチポストは推奨されていません。
https://teratail.com/help#posted-otherservice
どちらかの質問に削除依頼を出してください。
Lhankorさんと話してもこれ以上解法がないのでもう結構です。それと削除依頼もう出してます。ありがとうございました。
回答1件
0
ベストアンサー
height ではなく padding-top で高さをもたせてみてください。
css
1main .wrap .thumbnail a { 2 width: 100%; 3 padding-top: 60%; 4}
60% は画像の縦横比（1200 / 2000 * 100%)になります。
投稿2019/07/06 06:10
総合スコア1011
大変丁寧な回答ほんとうに本当にほんとうにありがとうございます。いますぐ試してみますね。YukiYamashinaさんありがとう！
Yukiさんの言う通りに設定する事でとても悩んでいた事が解決する事ができました。土曜日で貴重なお時間を頂きありがとうございました。もちろん答えが出せていない中途半端な回答では一切ありませんでしたのでベストアンサーとさせて頂きます。Yukiさんに回答頂いて本当に嬉しいです！ありがとうございますっ
あなたの回答
tips
プレビュー
