FC2ブログ

ハーレクイン図書館      
ハーレクインのことなら何でも・・・                         FC2館

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



Edit
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

縦と横の幅を変更する

Heart Shop
Powerd By WebToJpeg
昨日に引き続きJUGEMテンプレート [card]のカスタマイズ
テンプレートの編集→テンプレート編集→css編集フォーム

.entry {
margin: 20px 0px 0px 20px;
background-color:#bbeeff;
border: 1px solid #0066cc;
width:220px;
float:left;
}


この部分の記述を変更。

.entryという表記部分は投稿記事のフォームを指定しています。
この[card]というテンプレートは投稿記事が
カードの形で表示されるというユニークなもの。
オリジナルではカードの色(background-color)が水色(#bbeeff)、
周りの線(border)が青(#0066cc)に指定されています。
これをサイトの色に合わせて白×ピンク系に変更。

さらにカードの横と縦の長さを固定。
オリジナルでは投稿記事の長さにあわせて縦に伸びる形式だったのですが、
凸凹が生じてしまい、ちょっと不都合。
カードの大きさを固定することでレイアウトの崩れがなくなりました。
横と縦の長さ(150px,250px)は、ご自分のサイトの幅に合わせて
決定するといいと思います。

Heart Shopの場合はサイト幅が900pxなので、余白部分を含めて
横にカードが5枚並ぶように設定しました。

変更後のcssはこちら

.entry {
margin: 20px 0px 0px 20px;
background-color:#FFFFFF;
border: 1px solid #FF32CB;
width:150px;
height:250px;
float:left;
}
関連記事
スポンサーサイト



Edit
  1. 2007/01/16(火) 19:57:11|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://harlequintosyokan.blog7.fc2.com/tb.php/250-23595b8f
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。