ESCENA ヘッダー画像の表示

[r-yamamori]

お世話になっております。
ESCENAのバージョン: 1.0.6.9を使用しています。

トップページのヘッダー画像がブラウザの表示幅に合わせて
100%で表示されるようになっていますが、
ブラウザの幅を広げすぎると画像が上半分程度しか見られなくなり、
何の画像かわかり辛くなってしまいます。

表示幅に合わせて変化する仕様は残しつつ、
例えば1200pxを超えたらそれ以上画像幅が広がらないように固定する等
CSSで出来ますでしょうか。
又は、他のやり方で対策方法はありますでしょうか。

宜しくお願い致します。

http://hedge-chintai.com/greenway/

[DigiPress サポート]

CSSの「メディアクエリ」という手法を使って 指定表示幅以上のスタイル(CSS)をまとめて、DigiPressの「ビジュアル設定」→「オリジナルスタイルシート設定」にCSSを追加してテーマに組み込めば可能です。

例

@media screen and (min-width:1200px){
    /* ここに幅1200px以上のときのCSSを記述 */
    .hd_banner_img {
        width:1200px;
    }
}

参考：
http://barktoimagine.com/web/846
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

[r-yamamori]

返信ありがとうございます。

しかし上記のCSSをオリジナルスタイルシート設定に追加しましたが
変化がありません。
なぜでしょうか…

[r-yamamori]

すみません、色々触っているうちに反映されるようになりました。

ただ画像が左に寄ってしまって見た目が悪くなってしまいます。
中央に配置したいのですが、
上記のCSSに　margin: 0 auto;　を追加して

@media screen and (min-width:1200px){
/* ここに幅1200px以上のときのCSSを記述 */
.hd_banner_img {
width:1200px;
margin:0 auto;
}
}

と記述するのは間違っていますか？

[DigiPress サポート]

中央に配置したいのですが、
上記のCSSに　margin: 0 auto;　を追加して

該当CSSで問題ありません。

[投稿者]

投稿