人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: adgt
●カテゴリ:はてなの使い方 コンピュータ
✍キーワード:CSS DEN pc はてなダイアリー カラム
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● k2jp
●35ポイント

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

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

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

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

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

セレクタについて


2 ● kaz
●35ポイント ベストアンサー

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ