2012年04月18日
楽天のショップのレイアウト崩れを修正
既にある楽天のショップのレイアウト崩れを修正するべく必死で頑張っていました。
ネットを探すも説明が不十分で全然先に進まず、楽天のサポートセンターは出来ないの一点張り。
必至で自力で発見しました。
まず楽天ショップの幅の条件が100%表示になっているのでそれを制御する必要性がある。
※ショップ幅の条件を設定する事によって崩れないための画像の横幅を決めなければなりません。
自分のやり方は楽天GOLDは使いません。RMSだけですべて事足ります。
自分はショップ幅をとりあえず910ｐｘで作る事にしました。
過去画像の幅がかなりでかいものがあるので1015ｐｘ幅で調整しようとしましたが無理でした。
まずSHOP内での何の問題が起きていたか。
▼説明文がさいげんなく広がる。
▼レフトナビと画像の間に謎の空間がでる。
▼大きな画像ではないのにレフトナビがずれる。
上記のすべての悩みを克服しました。
方法は簡単。
ｃｓｓを埋め込む。
知らない人はエーと思うが、下記をコピペして貼ってくれれば問題ないです。
ヘッダーフッダーレフトナビのヘッダーコンテンツの中に下記をはれば問題なし。
それぞれの色で示した部分を制御するｃｓｓです。
下記が上のｃｓｓの指し示す場所です。
いじらない人のための情報としては、
自分の場合は、幅を800ｐｘで指定しています。
こんなわけのわからないのは嫌だという人は文章を区切りたいところに
タグをつければ
Ｅｎｔｅｒキーと同じ役割をします。上の画像の文字は実際に
タグで制御したものです。
これで一番の肝は赤いところ。ここが100％表示されていると、大きい画像をいれたときは平気ですが、
入れなかったりすると崩れます。
いろいろ制御されているところの場所がわかってきたので少しずつデザインをなおしていきたいと思います。
参考になった人はショップクリック、いいねボタンをお願いします。
上記の場合の楽天ショップの画像添付の際は、横幅は715ｐｘまでにする必要性があります。
ネットを探すも説明が不十分で全然先に進まず、楽天のサポートセンターは出来ないの一点張り。
必至で自力で発見しました。
まず楽天ショップの幅の条件が100%表示になっているのでそれを制御する必要性がある。
※ショップ幅の条件を設定する事によって崩れないための画像の横幅を決めなければなりません。
自分のやり方は楽天GOLDは使いません。RMSだけですべて事足ります。
自分はショップ幅をとりあえず910ｐｘで作る事にしました。
過去画像の幅がかなりでかいものがあるので1015ｐｘ幅で調整しようとしましたが無理でした。
まずSHOP内での何の問題が起きていたか。
▼説明文がさいげんなく広がる。
▼レフトナビと画像の間に謎の空間がでる。
▼大きな画像ではないのにレフトナビがずれる。
上記のすべての悩みを克服しました。
方法は簡単。
ｃｓｓを埋め込む。
知らない人はエーと思うが、下記をコピペして貼ってくれれば問題ないです。
ヘッダーフッダーレフトナビのヘッダーコンテンツの中に下記をはれば問題なし。
それぞれの色で示した部分を制御するｃｓｓです。
下記が上のｃｓｓの指し示す場所です。
いじらない人のための情報としては、
自分の場合は、幅を800ｐｘで指定しています。
こんなわけのわからないのは嫌だという人は文章を区切りたいところに
タグをつければ
Ｅｎｔｅｒキーと同じ役割をします。上の画像の文字は実際に
タグで制御したものです。
これで一番の肝は赤いところ。ここが100％表示されていると、大きい画像をいれたときは平気ですが、
入れなかったりすると崩れます。
いろいろ制御されているところの場所がわかってきたので少しずつデザインをなおしていきたいと思います。
参考になった人はショップクリック、いいねボタンをお願いします。
上記の場合の楽天ショップの画像添付の際は、横幅は715ｐｘまでにする必要性があります。
denneko521 at 17:25│Comments(0)│TrackBack(0)│