[ 解決済 ] ヘッダー画像のモバイル画像が左右切れてしまう。
[ 解決済 ] ヘッダー画像のモバイル画像が左右切れてしまう。
- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 9ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
バージョン 5.9.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
バージョン: 14.17.5■ Pro Unit のバージョン
バージョン 0.17.1■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
ヘッダー画像にパソコン用、モバイル用設定したのですがモバイル用の画像が切れて表示されてしまいます。パソコン用、モバイル用共にちゃんと表示させたいです。■ 自分で試した事
最小高さを変更してみてもどちらかが切れたりします。■ 症状が発生するブラウザ
スマートフォンでのブラウザ■ 実際の症状
ヘッダー画像にパソコン用、モバイル用設定したのですがモバイル用の画像が切れて表示されてしまいます。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
すみません。詳しくないのですがどこから編集したらよいのでしょうか
機能としてはありませんので、CSSでカスタマイズする形になります。
このページのページヘッダー画像だけを調整したいということですよね。
でしたら、プラグイン VK All in One Expansion Unit にCSSカスタマイズ機能で、特定のページにのみ出力するCSSを書く事ができます。
編集画面から該当の固定ページをひらき、ページの下の方にある「VK All in One Expansion Unit」の設定から「カスタム CSS」を開いて、そちらに以下のCSSを添付してください。.page-header {
background-size: contain;
}min-heightの数字も変わると思いますので、その辺りは調整して、追加で記述してみてください。▼CSSのカスタマイズに関しましては、以下を見ると分かりやすいのでぜひご確認お願いいたします。
ご連絡いただきありがとうございます。
試してみたのですが切れることはないのですがパソコンの画面の全幅に合わせるとスマホの方が上下余白がかなりできてしまいます。何かいい方法はございますか？よろしくお願い申し上げます。* 該当記事編集画面の「Lightningデザイン設定」からページヘッダーを非表示にして、本文欄内最上部に普通に画像を配置
* PCとモバイル２つ画像を配置して、該当画像ブロックの非表示設定で画面サイズを指定の方が早いと思います。
ご回答いただき有難うございます。
そちらの方法は試したのですが、全幅表示させたいのでOuterブロックで試したのですが、2カラムなのでサイドと被って表示されてしまうのです。トップページと同じように表示したいのですがよい方法ございますでしょうか。ご連絡いただきありがとうございます。
試してみたのですが切れることはないのですがパソコンの画面の全幅に合わせるとスマホの方が上下余白がかなりできてしまいます。何かいい方法はございますか？よろしくお願い申し上げます。背景画像ですので min-heightをブレイクポイントごとに出しわけする必要があるとおもいます。
例えばこんな感じです。@media (max-width: 991.98px){
min-height: 〇〇px;
}
@media (max-width: 767.98px){
min-height: 〇〇px;
}
@media (max-width: 575.98px){
min-height: 〇〇px;
}でも少しめんどうなので、石川さんの方法がいいなと思ったのですが、ページが2カラムということで、
石川さんのやり方でいくなら、1カラムにしてカラムブロックで2カラムにして、サイドメニューは手動でブロックなどで入れるとかでしょうか、、？
- このトピックに返信するにはログインが必要です。
