CSSの設定について教えてください。

はてなダイアリーの「DEN マイナーチェンジhttp://d.hatena.ne.jp/designset/1291」のテーマを使用しています。メインカラムの幅を広くし、一列に表示できる文字数を増やしたいのですが、具体的に何を入力すればよいでしょうか?

1.メインカラムの枠を広げる
2.メインカラムにおける1列の文字数を増やしたい(40字程度→50~60字へ)
3.ユーザーのPC状況によっては柔軟に変化するようであれば有難いです。
(4.できればサイドバーの幅を少しだけ小さくしたいです。)

私のブログです。
http://d.hatena.ne.jp/adgt/

よろしくお願い致します。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/10/26 16:20:20
  • 終了:2009/10/27 00:10:04

ベストアンサー

id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422009/10/26 20:42:48

ポイント35pt

HTML / CSS を拝見しましたが、

幅可変を想定して作られていないため、

大きく手を入れないとカラム枠の幅変更はできません。

最も大きな理由はカラム枠の画像が、

現行幅の 510px ぴったりしか無いためです。


また、幅を可変にするためには画像の変更のほか

HTML の要素を増やす必要があります。

基本的に「ある程度の幅まで可変・無限高さ」に対応する場合、

HTML の要素は最低限6つ必要になります。

「蓋の左/右・中央の左/右・底の左/右」

※無限幅に対応するには9つの要素が必要ですが、

 高さと違い、幅はモニタサイズに対応すれば良いので

 ある程度の幅の広い画像を用意すれば6つで済みます


現在あるのは「蓋(#pager-top)・中央(main)・底(#days)」なので、

入れ子を作り、左右どちらかを増やす必要があります。


それぞれの中身を「○○-inside」等の新しい div で囲み、

「○○-inside」の右側に上下の角丸が表示できるだけの幅を確保した上で、

外は background-position: right top を、

中は background-position: left top で画像を表示するのが一般的だと思います。


http://q.hatena.ne.jp/1256541619

id:adgt

なるほど。思いのほか難しそうだということが分かりました。

変更すべきかどうかを含めて考え直してみようと思います。

2009/10/26 22:12:07

その他の回答(1件)

id:k2jp No.1

k2jp回答回数19ベストアンサー獲得回数62009/10/26 20:36:04

ポイント35pt

[管理]=>[デザイン]=>[デザイン編集]=>[スタイルシート]に以下の設定をコピペし、納得いく値に調節してみては?

  .hatena-body {width:755px !important;}
    .main        {width:510px !important;}
    .sidebar     {width:230px !important;}

(ちなみに、上記で設定してある値はデフォルトなのでコピペしただけだと変化は起こりません)

.hatena-body幅 > (.main幅 + .sidebar幅) の範囲内でいろいろ試してみてください

 

柔軟なレイアウト(リキッド・デザイン)については...他の人に任せます

 

セレクタについて

id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422009/10/26 20:42:48ここでベストアンサー

ポイント35pt

HTML / CSS を拝見しましたが、

幅可変を想定して作られていないため、

大きく手を入れないとカラム枠の幅変更はできません。

最も大きな理由はカラム枠の画像が、

現行幅の 510px ぴったりしか無いためです。


また、幅を可変にするためには画像の変更のほか

HTML の要素を増やす必要があります。

基本的に「ある程度の幅まで可変・無限高さ」に対応する場合、

HTML の要素は最低限6つ必要になります。

「蓋の左/右・中央の左/右・底の左/右」

※無限幅に対応するには9つの要素が必要ですが、

 高さと違い、幅はモニタサイズに対応すれば良いので

 ある程度の幅の広い画像を用意すれば6つで済みます


現在あるのは「蓋(#pager-top)・中央(main)・底(#days)」なので、

入れ子を作り、左右どちらかを増やす必要があります。


それぞれの中身を「○○-inside」等の新しい div で囲み、

「○○-inside」の右側に上下の角丸が表示できるだけの幅を確保した上で、

外は background-position: right top を、

中は background-position: left top で画像を表示するのが一般的だと思います。


http://q.hatena.ne.jp/1256541619

id:adgt

なるほど。思いのほか難しそうだということが分かりました。

変更すべきかどうかを含めて考え直してみようと思います。

2009/10/26 22:12:07

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません