WORDPRESS レスポンシブデザインを維持したまま,PC表示のみトップページ画像の大きさを変えたい

Question

お世話になります。WODPRESSのトップページ画像の縦が長いため、縦サイズを半分の大きさに変更したいです。
お手数おかけしますが宜しくお願い致します。

やりたいこと

サイズで縦サイズを半分にしたいです。希望縦サイズ200PX

ためしたこと

1
まず画像自体を切れば短くなるのではないかと思い、縦200pxの画像をアップロードしましたが、
画像自体が現在の赤枠の大きさに引き伸ばされてしまうだけで、全く画像の大きさ自体は変わりませんでした。

２
F12を押して該当する箇所を探りました。

ruler .page-ruler-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    cursor: move !important;
    overflow: hidden !important;
}

importantが書かれており優先順位として高いものがこのclassなのだとわかりました。
1894ｘ424の424部分を200に変更しました。
しかし対象画像の縦の大きさが変わる事はありませんでした。

おしえてほしいこと

PCで縦方向が200ｐｘに変更するコードを教えて頂きたいです。
またレスポンシブデザインの為、さしつかえなければ、PCに加えて
iphone(この場合は6画面を想定)でのサイズ変更方法について教えて欲しいです。

PCで希望する縦の大きさは　200ｐｘです。　横は今と同じサイズを希望します。
iphoneはサイズは回答者様に教えて頂いあとにわたしの方で調整させて頂きますのでサイズは一旦
作業しやすいサイズでお任せいたします。

お手数おかけしますが宜しくお願い致します。

Answer 1

dfjileさんのサイトには <ruler>タグや .page-ruler-containerクラスは存在しません。

もしかして**Chromeの機能拡張「Page Ruler」**をお使いでしょうか。
この機能拡張で追加されたコードを拾ってしまっているようです。

「Page Ruler」をオフにして　正しいセレクタをご確認のうえ
スタイルの変更をお試しください。

Comments

[koikogarey]

まさにPage　Rulerを利用しておりました。削除しvw-full-page-link__linkがターゲットと考えております。調べてみると以下のようになっていました。またpaddingに433pxと記載しておりましたのでCSS上で433pxを検索しましたが、該当箇所を探すことができませんでした。

.vw-full-page-link__link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

[Sohaya]

https://imgur.com/f4m7tNv

「.vw-full-page-link__link」クラスのa要素ですが
値「433px」は「padding」属性ではなく「height」属性のものです。

また　この「height: 433px」は　値で指定されたものではなく
自動的に親要素いっぱいに広がってできたものです。
（a要素に「display: block;」を指定すると　このようになります。）

つまり　親要素の「height」に合わせて「height: 433px」になってますので
親要素「.vw-full-page-link__inner」のスタイルを編集する必要があります。
↑クラスを間違えたので修正しました。

[koikogarey]

ものすごいわかりやすい回答ありがとうございます。433pxで検索しても出なかったのですね。display: block;の解除と、縦方向の強制指定をするイメージでしょうか？スマホもある為、できれば縦pxというよりは現在の半分といった指定が希望です。ありがとうございました。

[Sohaya]

すみません、先ほどのコメントでクラス名を間違えましたので
修正いたしました。

>> display: block;の解除

a要素にテーマ「PRESSO」がデフォルトで設定しているスタイルではないでしょうか。
解除してしまうと　ほかのa要素に影響が出てレイアウトが崩れることが予想されます。

親要素のdivタグに設定されている「.vw-full-page-link__inner」クラスは
上下の「padding」も多いので　「height」とまとめて指定したほうが
編集箇所も少なく済みます。

[koikogarey]

＞修正いたしました。

了解しました。ご連絡ありがとうございます。

[koikogarey]

丁寧にありがとうございました。

ソースを以下のように変えてみました。400pxのところを500や600に変更すると、それに応じて画像サイズが大きくなります。やりたかったコトができました。しかしheightを200や100など小さく指定すると、画像は一切小さくなりません。他のclassが効いてる可能性がある事はわかりましたが、ここから進めない状況です。
.vw-full-page-link__inner {
height:400px;
align-items: center;
justify-content: center;
}

[Sohaya]

「.vw-full-page-link__inner」には
上下に合計192pxの余白を足す「padding: 96px 0;」と
タイトルとボタンが表示可能な縦方向最小サイズ「min-height: 350px;」が
設定されていますので　リセットのために
この2つの属性も指定する必要があります。

[koikogarey]

具体的にコードを教えて頂けますでしょうか？

[Sohaya]

> 希望縦サイズ200PX

高さ200px固定にしたい場合は
height: 200px; が必要なので新しく属性追加、
padding と min-height には
0 または initial か unset を指定してリセットしてください。

例）
変更　padding: 0;
変更　min-height: initial;
新規　height: 200px;

「min-height」は「最小値の指定」なので
指定があると　その値より小さくなってくれません。

[koikogarey]

丁寧にありがとうございました。Sohayaさんに教えて頂いた通りに設定してみた所、正常に高さが設定する事が出来ました。※現在は設定を戻しております。WORDPRESSを修正する事がすこしだけ楽しくなってきました。Sohayaさんが丁寧に教えて頂いた御蔭です。

今回もSohayaさんは
・丁寧な説明
・具体的なコードの解法
・回答までへの導き方
３点についてどれも素早く対応して頂いたため、ベストアンサーとさせて頂きます。
特に質問者からすると回答なき回答は残念な事が多いです。しかしSohayaさんからは具体的回答をいつも得ておりますので、説得力がとてもありました。本当にありがとうございました。