ショップサーブの商品一覧を3カラム表示にカスタマイズしてみた

Progateとかドットインストールとかで独学してCSSを何となく理解した気になったので、最近は、ネットショップの外観をちょこちょこカスタマイズしています。

今のところやったことは以下です。

ヘッダー：

• 背景を灰色から白に変更

ヘッダナビ：

• マウスカーソルを合わせた時の背景をピンクに変更

グローバルナビ：

• 縦幅がぶっとかったので小さくした
• 色が青かったので紫に、文字を白太字に変更
• マウスカーソルを合わせた時の色をピンクに、文字を白に変更サイドの

背景：

• 灰色から白に変更

全体の文字：

• 文字が灰色で薄すぎたので少し濃く
• リンクにマウスカーソルを合わせた時の色をピンクに

商品一覧：

• 4カラムで画像が小さかったので3カラムにして画像を大きく
• 商品名と価格のフォントサイズを大きくして太字に
• 価格の色をピンクに
• 商品の説明文の行間を狭く

フッター：

• 色が青かったので紫に、文字を白太字に変更
• 文字を白くして中央寄せ

3カラム化に苦戦

この中で特に大変だったのが、商品一覧を４カラム（4列）から3カラム（3列）にするということ。これだけで半日かかってしまいました。

マニュアルを見ると「ヘッダタグとCSSの両方を修正する必要がある。カスタマイズはノンサポート」としか書いてないのですが、ヘッダタグをどう変更してもcolumn4とかcolumn5というクラスしか読み込まれませんでした。

テンプレートの中にはcolumn3というクラスが用意されているのになぜ読み込まれないのか謎です。なので力技ですが、column4とcolumn5の両方を3カラムになるように幅を変更してしまいました。

元々の全体の横幅が730ピクセルだったので、幅が233ピクセルの四角（column4、column5）を3つ作って、四角の間の余白を15ピクセルにして、1ピクセル余るので3つ目の四角の右に1ピクセル追加しました。これでぴったり。

のはずなんですが、商品の順番を入れ替えていたらfloat落ちしてしまったので、nth-childという疑似クラスを使って3つ目の箱の後にclear:bothを入れるようにしたら崩れなくなりました。

トップページにはまだまだ気に食わない部分があるのと、商品詳細ページは何もやっていないので引き続きカスタマイズしていこうと思います。

ではでは、じぇーむでした。