[wk]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】バージョン: 7.5.2
【お使いのブラウザ】Chrome

===

いつもありがとうございます。

タイトルのように、ヘッダー画像（スライダー）の高さを狭くしたいと思っております。

現在、横1890px、縦330pxの画像をヘッダーのスライダーに使用したいと思っておりますが、こちらを設定すると、自動でリサイズされてしまい、画像の左右がカットされてしまいます。

スライダーはWPAW：スライダーを利用し、現在は1枚だけ表示させる予定です。

上記の画像をカットされないで表示するには、どのようにしたら宜しいでしょうか？

（画像は、お客様が以前のサイトで利用されていたもので、今回もこちらを利用したいとのことです。）

どうぞ宜しくお願い申し上げます。

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

カスタマイザーの追加 CSS、もしくは子テーマの CSS に下記を追加するとどうでしょうか？

.wpaw-slider__item {
    min-height: auto !important;
}

もし位置的にウィジェットではなくブロックでも対応が可能なのであれば、Snow Monkey Blocks のスライダーブロックは画像の画角を保ったまま表示されるので、それを使うのもアリかもしれません。

♥ 0

いいねをした人: 居ません

[wk]

キタジマさん

早速ありがとうございます。

残念ながら、位置的にSnow Monkey Blocksが使えない箇所かと思います。

（ヘッダーのメインとなるスライダー部分のため）

 

また、上記のcssでも、状況は変わりませんでした。

しかし、こちらからヒントを頂き、スライダー画像が1枚のため、画像ウィジェットで設定したところ、画像が切れずに入りましたが、今度は左右に余計な余白がある状態です。

 

画像ウィジェットを入れた際に、左右に余白があるのは、画像ウィジェットの挙動でやむを得ないものでしょうか？

画像をデバイスで目一杯のサイズで表示させたいのですが、どのように設定したら宜しいでしょうか？宜しくお願い致します。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

また、上記のcssでも、状況は変わりませんでした。

他の CSS の影響や、配置しているウィジェットエリアによって違いがあるのかもしれませんね…。

画像をデバイスで目一杯のサイズで表示させたいのですが、どのように設定したら宜しいでしょうか？

下記どうでしょうか？（画像ウィジェットは他の場所でも使う可能性が高いかな？と思ったので、その場所だけに適用されるようにID指定にしています。ご自身の環境にあわせて変更してください）

#media_image-2 .c-container {
    padding: 0;
    max-width: none;
}

#media_image-2 img {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    width: 100%;
}

♥ 0

いいねをした人: 居ません

[wk]

キタジマさん

お忙しいところ、ありがとうございます！

上記により、全幅表示となり、表示したいよう設定が出来ました。

また、他の画像ウィジェットを想定してのご配慮、本当にありがとうございます。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

良かったです！トピック閉じます。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿