Question
PCおよびタブレットでのヘッダー表示について
- A Anandi Tarot
-
いつもお世話になっております。
問題となるページ : anandi-tarot.com
現在、ヘッダー表示について挙動で困っている点があり、ご相談です。
【現状】
・ヘッダー設定は「カスタム」で縦サイズ600pxに設定
・使用画像サイズ：2400×850px
WordPressバージョン：6.9.1
macOS Tahoeバージョン26.2
iPadOSバージョン18.7.3
① パソコン表示について
フル画面時は問題なく表示されますが、
ブラウザの横幅を縮小すると、画像が比率に合わせて縮小されるのではなく、
ヘッダー画像の両サイドが切れた状態で表示されます。
画面幅に応じて画像全体が縮小表示されるようにする方法はありますでしょうか。
② タブレット表示について
現在、タブレットではPC用ヘッダーが適用されているため、
両サイドがカットされた状態で表示されています。
タブレットにはスマホ用ヘッダー画像を適用したいと考えておりますが、
そのような設定は可能でしょうか。
設定方法がありましたらご教示いただけますと幸いです。
どうぞよろしくお願いいたします。- WP 6.7.1
- PHP 8.3.x
- JIN:R 1.4.0
- さくらのレンタルサーバ
- GoogleChrome
- その他（トピック内容に記載してください。）
お世話になっております。
2026/02/19 22:25情報のご共有ありがとうございます。
①につきまして
こちらのマニュアルはご覧いただいていますでしょうか。
https://jinr.jp/manual/header-img/
かなり横長の画像なので、「オリジナル比率」設定をお選びいただくのが良いと思います。
②につきまして
設定区分が「PC（タブレット含む）」と「スマホ」の2種類になりますので、標準仕様では設定項目のご用意がありません。
独自でカスタマイズしていただくか、現在お使いの画像の縦横比を調整する形になるかと思います。
両サイドが切れてしまう点については、①の設定を変更いただくことで、全体が表示されるはずので、一度お試しいただけますでしょうか。
（ただし、バランス的に画面領域の上側に詰まって表示されると思いますので、上記の縦横比の調整をご提案させていただきました）
お手数おかけしますが、ご確認よろしくお願いいたします。
早速のご回答、ありがとうございます。
2026/02/20 15:20「オリジナル比率」に設定したところ、ご指摘のとおり画像が上部に寄り、直下の記事との間に余白ができてしまいました。
現在のデフォルトのヘッダーは縦幅がやや大きいため、
画面の半分程度の高さに調整したいと考えております。
このような高さのカスタマイズは、追加CSSで対応可能でしょうか。
もし推奨の設定方法がございましたら、ご教示いただけますと幸いです。
どうぞよろしくお願いいたします。
ご確認ありがとうございます。
2026/02/20 22:59>> 現在のデフォルトのヘッダーは縦幅がやや大きいため、
画面の半分程度の高さに調整したいと考えております。
申し訳ありません。こちらの内容について把握できず、再現したいイメージの具体的な画像などをご共有いただくことはできますでしょうか。
お手数おかけしますが、よろしくお願い申し上げます。
このたびは何度もご対応いただき、ありがとうございます。
2026/02/21 01:26改めて設定を見直したところ、「オリジナル比率」の調整で希望どおりの表示に変更できました。
あわせて、タブレットでもサイドが切れることなく表示されることを確認しております。
こちらの確認不足により、大変お手数をおかけいたしました。
今後ともよろしくお願いいたします。