「LTG前面見出し」と「ページヘッダー設定」の画像は等倍で表示したい。
「LTG前面見出し」と「ページヘッダー設定」の画像は等倍で表示したい。
- このトピックには12件の返信、2人の参加者があり、最後に
により5年、 6ヶ月前に更新されました。
-
投稿
-
ウィジェットで「LTG前面見出し」使用しております。
画像がかなり拡大されて切られてしまうので
等倍にできませんか？とても気になります。
画像が極端にズームアップしているため、
回りの画像が切れてしまいます。ページヘッダー設定の
ページヘッダーも同様に画像が極端に
拡大表示されています。以上の拡大表示ために写真画像によっては
かなりボケてしまいます。トップページスライドショーのように
画像は等倍で表示してほしいです。
CSSなどで修正可能でしょうか。背景の画像サイズは、縦及び横のいずれかの画像サイズが途中で切れないように自動拡大しています。
例えばページヘッダーのエリアはかなり横長になるので、それに対して縦長の画像を設定されると、横幅が切れないサイズまで拡大します。パララックスの場合は移動する上下も含めて画像が途中で切れないサイズまで拡大されます。
ページヘッダーや全幅見出しのように横長なエリアには、それに近い縦横画像比率の画像をアップしてください。拡大を停止する場合は以下のCSSを記述ください。
.mainSection .widget_ltg_full_wide_title_outer, .page-header { background-size: inherit; }.mainSection .widget_ltg_full_wide_title_outer,
.page-header {
background-size: inherit;
}上記のCSSをテーマの編集、カスタマイズからCSS追加に
記述して試しましたが、
「LTG前面見出し」とページヘッダーも
画像拡大のままでした。
上記の方法で間違いないでしょうか。どうぞ宜しくお願い致します。
下記でよろしくお願いいたします。
.mainSection .widget_ltg_full_wide_title_outer, .page-header { background-size: inherit !important; }CSSをテーマの編集に記載しましたが、
・LTG前面見出しとページヘッダーの拡大表示を停止することが出来ませんでした。
・ページヘッダーの拡大停止されたページが1ページだけ存在しました。
・ページヘッダーは毎回、思った画像位置に画像表示できないため
無理でしたので諦めます。「ページヘッダーには、それに近い縦横画像比率の画像をアップしてください。」
とのことですが、縦横の理想的なサイズ・ピクセルなどをお伝え頂けますでしょうか。以上のサイズぴったりの画像を用意すれば、
CSS設定なしで拡大もせずに等倍表示可能という事で宜しいのでしょうか。
そうなると一番簡単だと思いました。どうぞ宜しくお願い致します。
追記：
・ページヘッダーの拡大停止されたページが1ページだけ存在しました。上記について、例え拡大されていない画像が配置できたとしても
現状は4:3の写真サイズの写真の上下が合わされてしまうので
真ん中に小さい画像が設置されてしまいます。ページヘッダーにはどんなサイズの画像でも
等倍で横幅がぴったりに配置出来て、
上下の隠れている画像が手動で上下に移動ができるだけで
希望の位置に設置できるのに。と思ってしまいます。そのような設定が出来れば楽なのにな。
と思う方たちも多いのでは？どうぞ宜しくお願いします。
・LTG前面見出しとページヘッダーの拡大表示を停止することが出来ませんでした。
→ 外観 > カスタマイズ の 追加CSSか ExUnit の CSSカスタマイズに書いてみてください。
「ページヘッダーには、それに近い縦横画像比率の画像をアップしてください。」
とのことですが、縦横の理想的なサイズ・ピクセルなどをお伝え頂けますでしょうか。自動で拡大・縮小する処理が効かせる都合上、小さいサイズにすれば画面が大きい時は画質が荒くなりますし、大きくすれば画質はきれいですが読み込みに時間がかかります。なので、画質を優先するのかファイルサイズを優先するのかはユーザーの方によって異なりますし、
ページヘッダー部分か、全幅ウィジェットなのか、スキンによったり写真の構図などによっても異なるので、具体的にいくつが推奨というのはありません。ただし、概ね横長の表示領域なので、高さに対して横幅が広い画像を使用してください。試しに 1200px × 200px くらいの画像を使ってみてください。
以上のサイズぴったりの画像を用意すれば、
CSS設定なしで拡大もせずに等倍表示可能という事で宜しいのでしょうか。いえ、現状画像表示サイズの自動調整指定がしてある以上、等倍表示にするのであればCSS指定を必ず別途記述しなくてはいけません。
画面サイズによって表示領域の広さは変動します。
表示領域の大きさに応じて、横または縦の画像が足りないという領域が出ないように画像表示サイズを調整する仕様になっています。ページヘッダーにはどんなサイズの画像でも
等倍で横幅がぴったりに配置出来て、表示領域（横幅）のサイズが変動する以上、等倍で横幅ピッタリにはなりません。
例えば1200×90pxの画像を用意したとします。
表示領域は縦はあまり変動しませんが横は大きく変動します。
1400pxの表示領域ならば画像より大きいので両サイドが切れてしまいますし、横幅500pxの画面サイズなら「真ん中しか表示されない」となってしまいます。だから画像が切れるエリアが出ずに縦または横がぴったりになるように自動調整しています。実際に閲覧している環境でCSSがどう効いているのか判断できませんので、
該当ページのURLあるいは同じ症状のテストサイトなどURLを記載いただけますでしょうか？以上のご対応頂き、誠にありがとうございます。
先ほどのCSS箇所に全て記載入れました。https://with-produce.co.jp/
トップページのカメラマンの
写真がかなり拡大されています。https://with-produce.co.jp/movie-photo/photo
この画像はPC画面上でプリントスクリーンで
ページヘッダー箇所をコピーして画像をはめ込みました。ページヘッダー設定に
1821px × 201px
の画像を設置して全表示が出来ました。
これより大きくても小さくても
等倍表示にはなりませんでした。
画像を小さくすると同じ比率でも
横幅に余白で出てきます。訂正します。
確認したところ等倍表示でした。
誠に失礼しました。https://with-produce.co.jp/
トップページのカメラマンの
写真は等倍でした。以上のご対応頂き、誠にありがとうございます。
先ほどのCSS箇所に全て記載入れました。一応本当は 「追加CSS」か「ExUnitのCSSカスタマイズ」どちらか１箇所に記載してあれば、自動調整ではなく等幅表示になると思います。
トップページのカメラマンの
写真がかなり拡大されています。今確認した限り拡大されているのではなく、 background-size: inherit !important; が効いているので、自動・拡大が動作しないで、元の画像サイズで表示されています。
background-size: inherit !important; を削除した自動サイズ調整の方が丁度よいサイズではないかと感じました。
これより大きくても小さくても
等倍表示にはなりませんでした。
画像を小さくすると同じ比率でも
横幅に余白で出てきます。自動調整ではなく background-size: inherit !important; が効いてしまっているので等倍表示になっています。
等倍表示になっている ＝ 自動で拡大してくれないので、画面サイズが大きくなったり、画像が小さいと左右に余白ができます。なので、やはり 等倍である background-size: inherit !important; は記述しないで、
現状の標準の仕様（自動拡大・縮小）の方が良いのかなと感じます。よろしくお願いいたします。
もしかしたら 等倍表示 という 言葉の意味が違うのかもしれません。
background-size: inherit !important;
を指定すると、画像を拡大・縮小する事なく、元の画像サイズでそのまま表示する
という意味で 等倍表示 という言葉を使っています。
- このトピックに返信するにはログインが必要です。
