ID #1995

Q.アーバンホワイト他、トップ画像(横幅ワイド、縦幅が大きい)の横幅を縮小する [HTML5テンプレート用]

横幅ワイドで縦幅が大きいテンプレートのトップ画像サイズを横幅980pxに変更できます。
・該当テンプレート
アーバンホワイト アーバンブラックレトロフューチャー オールドデイズ

表示サンプル
http://cafe0303.ocnk.net/
スタイルシートを編集する

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

.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;
}

トップ画像内のコメント部分について
.annotation_left_top~.annotation_right_bottomは、トップ画像内にコメントを設定した場合の、コメント表示位置となります。
コメントを利用されていない場合は、指定の必要はありませんが、利用されている場合は、表示位置を指定してください。
また、画像表示サイズをご自身で変更された場合は、この数値を調整してコメント位置も調整する必要があります。
最終更新: 2014-10-07 11:23