フレッシュ他、トップ画像(横幅ワイド)の横幅を縮小する [HTML5テンプレート用]

2014-10-07 11:22
横幅ワイドテンプレートのトップ画像サイズを横幅980pxに変更できます。
・該当テンプレート
ワノココロ フレッシュブリリアント アーキテクチャーフェミニン

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

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

#photo,
.wide_slide .fix_center,
.wide_slide .swipe_list {
width: 980px;
}

#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: 305px;
}

.wide_slide,
.wide_slide .swipe_list {
height: 305px;
}

.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×縦幅305pxを指定しています。
基本的に画像は、縦幅に合わせて自動比率調整を行います。
横幅980×縦幅250pxで表示されたい場合は、そのサイズの画像を作成登録してください。
・横幅について
width: 980px;の部分で指定します。
#photo,
.wide_slide .fix_center,
.wide_slide .swipe_list {
width: 980px;
}


ただし、横幅を変更した場合は、下記の箇所でmargin-left: -490px;の数値も同様に変更してください。
.wide_slide .swipe_list {
margin-left: -490px;
}

この数値は、横幅÷2の数値をマイナスで指定してください。
・縦幅について
height: 305px;の部分で指定します。

.wide_slide .list_item_cell {
height: 305px;
}

.wide_slide,
.wide_slide .swipe_list {
height: 305px;
}

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