アーバンホワイト他、トップ画像(横幅ワイド、縦幅が大きい)の横幅を縮小する [HTML5テンプレート用]
・該当テンプレート
アーバンホワイト 、 アーバンブラック 、レトロフューチャー 、オールドデイズ
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。
.has_wide_slide #header {
margin-bottom: 0px;
max-width: 100%;
}
.has_wide_slide #globalnavi {
position: relative;
margin-bottom: 0px;
}
#photo,
.wide_slide .fix_center,
.wide_slide .swipe_list {
width: 980px;
position: relative;
}
#photo,
.wide_slide .fix_center {
margin: auto;
}
.wide_slide .pointer_prev_box {
margin-left: 0px;
}
.wide_slide .pointer_next_box {
margin-right: 0px;
}
.wide_slide .list_item_cell {
height: 550px;
}
.wide_slide,
.wide_slide .swipe_list {
height: 550px;
}
.wide_slide .swipe_list {
margin-left: -490px;
}
.wide_slide .swipe_list .annotation_left_top {
left: 60px;
top: 30px;
}
.wide_slide .swipe_list .annotation_right_top {
right: 60px;
top: 30px;
}
.wide_slide .swipe_list .annotation_left_bottom {
left: 60px;
bottom: 30px;
}
.wide_slide .swipe_list .annotation_right_bottom {
right: 60px;
bottom: 30px;
}
.wide_slide .swipe_list .fade_in_fade_out .list_item_row {
width: auto;
}
.wide_slide .swipe_list .fade_in_fade_out .list_item_cell {
width: 100%;
}
初期では、画像の上部がヘッダーに重なっていますが、上記設定後は、ヘッダーナビゲーション下に表示されます。
上記の指定内では、初期画像の縦横比率にあわせて、横幅980×縦幅550pxを指定しています。
基本的に画像は、縦幅に合わせて自動比率調整を行います。
横幅980×縦幅300pxで表示されたい場合は、そのサイズの画像を作成登録してください。
width: 980px;の部分で指定します。
#photo,
.wide_slide .fix_center,
.wide_slide .swipe_list {
width: 980px;
position: relative;
}
ただし、横幅を変更した場合は、下記の箇所でmargin-left: -490px;の数値も同様に変更してください。
.wide_slide .swipe_list {
margin-left: -490px;
}
この数値は、横幅÷2の数値をマイナスで指定してください。
height: 550px;の部分で指定します。
.wide_slide .list_item_cell {
height: 550px;
}
.wide_slide,
.wide_slide .swipe_list {
height: 550px;
}
コメントを利用されていない場合は、指定の必要はありませんが、利用されている場合は、表示位置を指定してください。
また、画像表示サイズをご自身で変更された場合は、この数値を調整してコメント位置も調整する必要があります。