1191248297 当方のブログをご覧下さい↓

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)の閲覧に支障をきたさないこと。


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

回答の条件
  • 1人1回まで
  • 登録:2007/10/01 23:18:20
  • 終了:2007/10/06 09:31:20

ベストアンサー

id:Yuichirou No.1

Yuichirou回答回数112ベストアンサー獲得回数362007/10/02 00:58:59

ポイント70pt

まず最初に、「自作メニュー(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だとギリギリはみ出すので、考慮が必要かもしれません。

id:thyself2005

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

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/


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

2007/10/02 12:40:03

その他の回答(1件)

id:Yuichirou No.1

Yuichirou回答回数112ベストアンサー獲得回数362007/10/02 00:58:59ここでベストアンサー

ポイント70pt

まず最初に、「自作メニュー(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だとギリギリはみ出すので、考慮が必要かもしれません。

id:thyself2005

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

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/


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

2007/10/02 12:40:03
id:safari33 No.2

safari33回答回数59ベストアンサー獲得回数02007/10/03 23:45:10

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

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

  • id:thyself2005
    参考までに、現在設定中のスタイルシートを一部下記します。

    div.top {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

    div.main {
    margin-left: 210px;
    margin-right: 7%;
    }

    div.sidebar {
    width: 170px;
    margin-top: 290px;
    margin-left: 7%;
    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;
    }
  • id:thyself2005
    デザインテーマは「hatena-black」を使用しています。
    質問内容を変更しましたので、改めてご回答宜しくお願いいたします。

    【変更】
    下記画像(イメージ図)のように実装するためには、CSSをどのように設定すればよいのでしょうか?
    http://f.hatena.ne.jp/images/fotolife/t/thyself2005/20071002/200...

    ①div.top,div.sidebarの開始をh1の位置に統一。
    ②画面の解像度を増しても記事スペース等の大きさや位置は不変で、右側に黒い余白が増える。


    (※イメージ的にはNumeriさんのような感じです)
    Numeri
    http://www.numeri.jp/

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

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

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

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