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

当方のブログをご覧下さい↓
http://d.hatena.ne.jp/thyself2005/

現在のブログデザインを、添付画像(イメージ図)のように変更する場合、スタイルシートにどのような設定をすれば可能でしょうか?

?記事枠(div.main)の幅を700pxにし、サイドバー(div,sidebar)と混ざらないように中央に配置したい。
?タイトル画像(h1)全体(点線含む)を自作メニュー(div.top)と同じ幅内(約1000px)に収めたい。

条件
・サイドバーと記事枠の間には20pxほどのスペースが欲しい。
・記事枠内の文字や画像が現在のように左揃えであること。(中央揃えや右揃えにならないように)
・画面の解像度を任意(1024px×768px、1280px×1024px…)に変更しても、記事枠がきちんと中央に、かつ幅が700pxで表示されること。
・IE以外のFirefox、Safari、Opera等のブラウザ、macでもきちんと問題なく表示されること。
・モバイル版(http://d.hatena.ne.jp/thyself2005/mobile)の閲覧に支障をきたさないこと。


ご回答宜しくお願いいたします。

1191248297
●拡大する

●質問者: 正衛門
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:firefox h1 IE MAC opera
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Yuichirou
●70ポイント ベストアンサー

まず最初に、「自作メニュー(div.top)と同じ幅内(約1000px)」と表現していますが、実はdiv.topの幅は不定で、「特選品」の画像の数とサイズに依存します。そういうこともあって、h1の点線をそれに合わせるのはCSSの仕様上不可能です。

そこで発想を切り替え、ページ全体をある幅で固定して中央表示させてみました。つまり、h1とdiv.topの幅を決め打ちしたのです。

/* IEでh1とdiv.hatena-bodyを中央表示 */
body {
 text-align: center;
}
/* body直下の要素であるh1とdiv.hatena-bodyを、幅固定で中央表示 */
h1, div.hatena-body {
 width: 1040px;
 margin-left: auto;
 margin-right: auto;
}
/* メニューを中央表示・テキスト中央寄せ */
div.top {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}
/* 記事枠を幅700pxで中央表示・テキスト左寄せ */
div.main {
 width: 700px;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}
/* 実はページ全体の幅は記事枠の左スペースにサイドバーがぴたりと入るよう調節 */
div.sidebar {
 width: 170px;
 margin-top: 290px;
 margin-left: 0;
 line-height: 1.5;
 text-align: center;
}

div.sidebar .hatena-section, div.sidebar .hatena-sectioncategory {
 text-align: left;
}

div.main .hatena-module {
 margin: 0% 5%;
 padding: 4px;
 width: auto !important;
}

これでリクエストは満たせていると思います。WinIE7、Firefox2、Opera8、Safari for Windows Betaで正常表示を確認。

ちなみに、表示領域が1040px以下だと横スクロールバーが出ます。画面サイズが1024px×768pxだとギリギリはみ出すので、考慮が必要かもしれません。

◎質問者からの返答

回答ありがとうございます。

div.topとh1についてのご説明、新たな方法のご提示等、参考になりました。

そこで改めてご質問なのですが、下記画像(イメージ図)のように実装するためには、CSSをどのように設定すればよいのでしょうか?

http://f.hatena.ne.jp/images/fotolife/t/thyself2005/20071002/200...

?div.top,div.sidebarの開始をh1の位置に統一。

?画面の解像度を増しても記事スペース等の大きさや位置は不変で、右側に黒い余白が増える。

(※イメージ的にはNumeriさんのような感じです)

Numeri

http://www.numeri.jp/


下手な説明で申し訳ありませんが、ご回答宜しくお願いいたします。


2 ● safari33
●0ポイント

はてな利用規約 第6条禁止事項

http://www.hatena.ne.jp/rule/rule#kiyaku06

関連質問


●質問をもっと探す●



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