ワードプレス ヘッダー画像の件についておたずね致し

質問

ワードプレス　ヘッダー画像の件についておたずね致します。

ワードプレスの「ONE PRESS」無料版のテーマを利用しています。

カスタマイズにてヒーローセクションにてキービジュアル（ヘッダー画像）を1920×1238pixのサイズを設置しました。

ヘッダー画像の確認で、PC画面では問題なく表示されているですが、スマホで確認をした際にヘッダー画像の左右が切れて画像の中心部のみ表示されます。

テーマのカスタマイズの設定をいろいろ確認しましたが、スマホ用に画像を切り替えるような設定欄は見当たりません。
ネットでも調べてみましたが、キービジュアル（ヘッダー画像）をスマホに切り替えるような説明をしているサイトも見当たりませんのでお手上げ状態です。

このような場合、スマホにあわせた画像サイズでキービジュアルを作成して、その後CSSなどをカスタマイズにて追記することで対応できるのでしょうか？

もしそれで対応できるのであれば、その際に追記するCSSのコードを教えて頂けましたら助かります。

それともPHPなどを直接さわらないといけないのでしょうか？

ちなにみWPに関してはあまり詳しくはありません。

具体的なやり方を教えて頂けますと非常に助かります。

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

回答No.1

ngwaver · ベストアンサー

「ONE PRESS」の詳細は把握しておりませんが、メディアクエリでスマホ表示のときだけ適用されるCSSを書けば良いのではないでしょうか。

お礼

ありがとうございました

補足

こんにちは。

ご回答ありがとうございます。
メディアクリエを今調べて見ました。
ちょっと私には敷居が高いようです(^_^;

頂きましたアドバイスは大切に受け止めます。
できるかどうか分かりませんが、まずは理解できるよう努めてみます。

ありがとうございました！

回答No.2

JI-SUI

参考URLに張ったテンプレートですよね？
結論から申し上げますと、PCとSP両方対応する画像を作ったほうがよいです。
HERO部分の切り替えをやるために結構面倒なことをやっているので、結構慣れている人じゃないと修正は難しいです。
CSSのbackgroundとかでやってるのではなく、JSで画像を持ってきて計算してHERO部分にはめ込んでます。ちなみに1個1個計算してるので、画像が縦横比バラバラでも中央に配置してくれてますね。
切り替えしないのであれば、このHERO部分を1から自分で作ったほうがまだ早いくらい。

参考URL：

https://demos.famethemes.com/onepress/

お礼

ありがとうございました！

補足

ご回答ありがとうございます。
残念ながらHERO部を自分で作り直すスキルは現在のところ持ち合わせておりません。
画像をスマホ用に体裁良く見せるのは結構難しそうですね。
もう少し自分なりにも調べてみます。
アドバイスありがとうございました。