[上田 修司]

トップ画面の上部に大きく画像を入れたいのですが、トップページの固定ページにして、スライダーだと、画像がはみ出します。しかも拡大されて表示されてしまいます。

画像ウィジェットだと両脇の余白が出来てしまいます。

http://shujiuyeda.xsrv.jp/moon/

(テストサイトでこの状況をご覧頂けます。)

質問です。
１．スライダに入れる画像のサイズの適正サイズってありますでしょうか？今回はトップページワンカラムの上部に入れたいです。

２．トップページ上部に横幅フルサイズで画像を入れるにはどのような方法をとるのが良いのか、教えて頂けますか？

なんか初歩的な質問ですが、マニュアルにも上手く記述を見つけられなかったので質問させて頂きました。

♥ 0

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

[キタジマ タカシ]

マニュアルの整備が間に合っておらず、お手数おかけして申し訳ないです。少しずつ整備していきたいとは思っているのですが、どうしても開発優先になってしまいがちで…。マニュアルにないときはお気軽にフォーラムに投稿ください!

１．スライダに入れる画像のサイズの適正サイズってありますでしょうか？今回はトップページワンカラムの上部に入れたいです。

スライダーウィジェットは、19:6　のサイズで表示されるようになっています。なので、この比率でない画像の場合ははみ出てしまいますが、スライダーウィジェットはあくまで画像は背景で、文字を表示したい場合はカスタマイザーで入力して表示するというコンセプトなのでこのような仕様となっています（ピックアップウィジェットも同様です）

どうしても文字入れした画像をきれいに表示したい場合は、CSS で比率を変更する形となります。下記が参考になります。

スライドのアスペクト比（16:9）を変更したい

このトピックには2件の返信、2人の参加者があり、最後にTTTにより2年前に更新されました。 3件の投稿を表示中…

snow-monkey.2inc.org

２．トップページ上部に横幅フルサイズで画像を入れるにはどのような方法をとるのが良いのか、教えて頂けますか？

いま画像ウィジェットで画像を入れられているようでしたので、それを CSS でフルサイズにするのが良いかなと思います。ダッシュボード > カスタマイザー > 追加CSS に、下記の CSS を貼り付けてみてください。

.l-front-page-widget-area__item > .widget_media_image {
  padding-top: 0;
  padding-bottom: 0;
}

.l-front-page-widget-area__item > .widget_media_image .c-container {
  padding-right: 0;
  padding-left: 0;
  max-width: none;
}

.l-front-page-widget-area__item > .widget_media_image .c-container img {
  width: 100vw;
  box-shadow: none;
}

♥ 0

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

[上田 修司]

キタジマさん

お返事ありがとうございました。今回は画像＋CSSで対応致しました！

また気軽に質問させて頂きます！

ありがとうございました！

♥ 0

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

[キタジマ タカシ]

解決できてよかったです！トピッククローズします。

♥ 0

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

[投稿者]

投稿