[ 解決済 ] アートボード幅の設定をしたいです。
[ 解決済 ] アートボード幅の設定をしたいです。
- このトピックには11件の返信、3人の参加者があり、最後に
により2年、 1ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.0.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
14.23.4■ Pro Unit のバージョン
0.23.2■ スキンの種類
プレーン■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
背景画像を「全幅」で設定したいのですが、そうしてしまうと、大きなスクリーンでも無制限に広がってしまいます。コンテンツ幅のように、スクリーンの大きさに応じてアートボード幅の上限を設定したいのですが可能でしょうか?
CSSで設定する必要があるのでしょうか?
どうぞよろしくお願い致します。
■ 自分で試した事
・カスタマイズ→背景画像→画像サイズを画面に合わせる
→結果、背景画像が無制限に広がる・VK blok pro→Outer→画像→配置を変更→幅広または全幅
→結果、背景画像が無制限に広がる■ 症状が発生するブラウザ
Chrome■ 実際の症状
背景画像のサイズが一定であるため、画面表示サイズを変更すると「command & + （または-) 」、他の要素とのバランスが崩れてしまう添付画像ファイルが、Upload Errorsになっております。
添付画像があったほうが回答がつきやすいかもしれませんので、
もし差し支えなければアップできるサイズにしてもう一度アップしていただくことはできますか・VK blok pro→Outer→画像→配置を変更→幅広または全幅
→結果、背景画像が無制限に広がるちょっとあまり理解できていないかもしれないので、見当違いのことを言っていると思いますが、、、
背景画像の寸法は
background-size: cover !important;で指定しています。
▼background-sizeについて
https://developer.mozilla.org/ja/docs/Web/CSS/background-sizebackground-size: contain !important;にするとイメージに近いのでしょうか、、？.vk_outer-width-full { background-size: contain !important; }良い方法がわかる方がいらっしゃいましたらぜひご回答よろしくお願いいたしますmm
ベストアンサーに選ばれますと500ポイント付与されますうなこ様
ご回答ありがとうございます!
.vk_outer-width-full {
background-size: contain !important;
}
を子テーマのstyle.cssに書き写してみましたが、思うようにはいきませんでした。背景画像を「全幅」で設定すると、どのスクリーンサイズでも「全幅」で表示されるので、デスクトップの大きいスクリーンだと、おそらく画面いっぱいに広がってしまい、他のパーツとのバランスがおかしくなってしまいそうです。
できれば上限を設定できるといいなと思っているのですが。
どうしたいのか文面だけだと理解し辛いので、画面に赤入れでどうしたい だが どうなってしまう というような図解を記載いただけるとアドバイスしやすいです。
石川様
コメントありがとうございます!
やりたいことは、デザインカンプから背景の部分を書き出し、それを背景画像として利用したいです。
横幅1440pxのスクリーンくらいまでは、画面いっぱいに背景画像を表示したいです。
そこで、上にも書きましたが以下のことを試しました。
・カスタマイズ→背景画像→画像サイズを画面に合わせる →結果、背景画像が他要素に比べて、相対的に大きくなる
・VK blok pro→Outer→画像→配置を変更→幅広または全幅 →結果、背景画像が他要素に比べて、相対的に大きくなる
しかし、全幅設定だとおそらくどの画面に対しても、横に広がってしまうので、そこにアートボード幅の上限(例えば1440px)を設定すれば問題が解決されると考えました。
Lightning G3 Pro Unitにはコンテンツ幅の設定があり、コンテンツ要素の広がりは調整できると理解していますが、それらの背景にある画像をどう設定していいのかわかっていない状態です。
私は初心者に毛が生えたくらいのコーディング(HTML,CSS,PHP)はできると思っていますが、Lightningのようにバリバリのテーマを利用させて頂くのは初めてで、的外れなことを申しているかもしれず、申し訳ないです。
添付いただいた画面確認いたしましたが、どこに問題があるのかがちょっと把握できませんでした。
> 表示比率が50%だと
→ “表示比率”とは何の事を指してますか？ウィンドウの縦横比の事でしょうか？> 他の要素に比べて
→ 他の要素とは何を指していますか？投稿一覧でしょうか？> 背景画像は相対的に大きくなってしまうが、
→ 画面サイズに応じて背景画像の表示領域（画像の”倍率”ではなく”表示領域”）が大きくなってしまうという意味でしょうか？> 他の要素とのサイズ感を一定に保ちたい
→ 画面サイズを大きくしたら背景画像を大きくしたいという意味ですか？
（それだと背景画像が相対的に大きくなるという事ですよね…）おそらくですが画面サイズが大きくなったら背景画像も大きくしたいという意味であってますか？
石川様
ご回答ありがとうございます。
用語の使い方が間違っているかもしれず、大変申し訳ありません。。> 表示比率が50%だと
→ “表示比率”とは何の事を指してますか？ウィンドウの縦横比の事ですか？
> ブラウザの拡大・縮小表示です。 macでshift + command + マイナスなどで調整するものです。> 他の要素に比べて
→ 他の要素とは何を指していますか？投稿一覧ですか？
>投稿一覧です。> 背景画像は相対的に大きくなってしまうが、
→ 画面サイズに応じて背景画像の表示領域（画像の”倍率”ではなく”表示領域”）が大きくなってしまうという意味ですか？
>そうです。例えば、iMacなどのデスクトップだと、おそらく画面の端から端まで、画像が表示されてしまうのではないかと。ただ、背景画像を「画面サイズに合わせる」にしなければ、逆にスマホ画像だと背景画像の断片だけが表示されるようになってしまいます。→おそらくですが画面サイズが大きくなったら背景画像も大きくしたいという意味であってますか？
>違います。逆です。画面サイズが大きくなっても、一定のサイズで背景画像を表示したいという意味です。以下のような課題にぶつかっています。「画面に合わせて表示」→大きなスクリーンの際(デスクトップ)、背景画像がとてもおおきく表示される。
「元のサイズで表示する」→小さなスクリーンの際(スマホ)、背景画像の断片だけが表示される。できる限り、伝わるように努力しています。
どうぞよろしくお願い致します。とりあえず Outer ブロックは PC タブレット スマホ サイズでそれぞれ画像を登録できるようになっているので、画面サイズに適した縦横比の画像をアップするのが一番妥当です。
そこから先は恐れ入りますが、おそらく要望の条件分岐がいろいろあるので、CSSでいろいろ試しながらでないと実現できないと思います。
CSSのメディアクエリで画面サイズを指定しつつ、背景画像のサイズを指定するCSSを書く事になると思います。
メディアクエリに関しては以下で軽く触れていますので確認ください。ただ、これ以上の事は弊社テーマ・プラグインの設定の話ではなく、
具体的にどの条件でどの表示、それがどうなったときにどうなる など仕様書を作っていただいて、じゃあ実際コーディングして、みて貰ったら意図と違うから調整して…など完全に受託業務のCSSの技術レベルの話なので、フォーラムでサポートは難しいです。例えば
* 実際の画面のURLをここに提示
* 特定の画面サイズの時にどの部分の背景をどうしたいというカンプ画像がある前提でのカスタマイズコードの提示が限界です。
基本機能で出来る事以上の固有のカスタマイズに関して、かかりっきりで弊社スタッフが対応してしまうと、ユーザー全員に恩恵のあるはずの機能開発が遅れたり実装されなくなってしまうため、サポートにも限界がありますこと何卒ご理解いただけますと幸いです。
https://showcase.vektor-inc.co.jp/ に掲載の業者様や
https://coconala.com/categories/644?technique_ids%5B%5D=8&page=6 に有償サポートを発注含めてご検討ください。
- このトピックに返信するにはログインが必要です。
