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

ブログのデザインで、サイドバーを右に、メインを左にしたいです。
プログラムをいじってです。
http://q.hatena.ne.jp/1197144474#modparam-form
の質問の続きになります。
当方のスタイルシートは↓のようであり、
ブログ自身はhttp://d.hatena.ne.jp/my_name_is_joe1029/となります。
.hatena-body{
width: 800px;
margin: 0 auto;
padding: 0;
}

.main{
float: left;
width: 595px;
padding: 0px;
}
.section p{
margin: 0 1em;
text-align:left;
padding: 0;
}
.sidebar {
width: 195px ;
padding: 0;
margin: 0 0 0 600px ;
text-align: left;
border: none;
}

僕の中では、上のもので解決されるはずなんですが、、、。
なにせプログラムの知識0(ゼロ)で間違っている場所がわかりません。

具体的な改善策を与えてくださると嬉しいです。
よろしくお願いいたします。

●質問者: my_name_is_joe1029
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:BODY border Hatena margin padding
○ 状態 :終了
└ 回答数 : 3/4件

▽最新の回答へ

1 ● 牛乳先生(tukihatu)
●20ポイント

これでいけませんか?

.hatena-body{
width: 800px;
margin: 0 auto;
padding: 0;
}

.main{
float: left;
width: 595px;
padding: 0px;
}
.section p{
margin: 0 1em;
text-align:left;
padding: 0;
}
.sidebar {
float: left;
width: 195px;
padding: 0;
text-align: left;
}


html↓
<div class="hatena-body">
<div class="main">ほげ</div>
<div class="sidebar">ほげ?</div>
</div>

サイドバーのスタイルにfloat:leftを足してマージンとっただけです。

これでだめなら、mainやsideberの中に入っているコンテンツが大きすぎてwidthが広がってしまっていて、折りかえってしまう、ということだと思います。

お試しあれ。

◎質問者からの返答

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

これだけでは、ダメでした。divをつけなければならなかったようです。


2 ● blanccasse
●50ポイント

cssの指定の仕方に問題があるようです。


質問者さまは「.main」など、クラス指定のみをしていらっしゃいますが、

オリジナルのcssでは、「div.main」という指定になっています。

cssの書式解釈(?)では、「.main」より「div.main」の方が詳細な指定ということになり、

より詳細な指定を優先する仕組みになっています。

そのために質問者さまの指定が反映されないようです。


div.hatena-body {
width: 800px;
margin: 0 auto;
padding: 0;
}
div.main {
float: left;
width: 595px;
margin: 0;
padding: 0;
}
div.sidebar {
width: 195px ;
padding: 0;
margin: 0 0 0 600px ;
text-align: left;
border: none;
}

上記cssでサイドバー移動出来ました。


cssを修正する場合、テーマオリジナルcssの指定方法を確認し、

それを変更すると楽に弄れますよ。

◎質問者からの返答

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

blanccasseさんのとおりスタイルシートを変更したら、できました(^^)

divがポイントだったのですね。勉強になります!

ありがとうございます(^0^)


3 ● tezcello
●40ポイント

ローカルでテストしていたので、実際とは異なった結果になってしまって申し訳ないです。

<link rel="stylesheet" href="http://d.hatena.ne.jp/css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="http://d.hatena.ne.jp/headerstyle?color=wh" type="text/css" media="all">
<link rel="stylesheet" href="http://d.hatena.ne.jp/theme/delta/delta.css" type="text/css" media="all">

この3行でスタイルシートを定義しているのですが、

そこでの指定の仕方が質問文での書き方よりも優先順位が高いものでした。

<style type="text/css">
<!-- 
body {
width: 800px;
}

div.hatena-body{
position: static;
width: 800px;
margin: 0 auto;
padding: 0;

}

div.main{
position: static;
margin: 0px;
float: left;
width: 595px;
}
.section p{
margin: 0 1em;
text-align:left;
padding: 0;
}
div.sidebar {
position: static;
width: 195px ;
margin: 0 0 0 600px ;
text-align: left;
border: none;
}-->
</style>

こんな感じでどうでしょうか。

本当に全部必要なのかまではチェックできていませんが、上記の外部スタイルシートでの指定を打ち消すようにしてあります。

body 要素の幅を 800px にしているのは、「最新の日記?」の部分がブラウザのウィンドウにつられて右に寄ってしまっていたからです。

これ以外にも、細かい修正が必要かも知れません。

◎質問者からの返答

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

blanccasseさんと同様、tezcelloさんの指定でもできました!

やはり、divで指定を行うのが基本のようですね。

最終的に、↓のようにしてみました。relativeの方が、ブラウザのサイドバーの長さを調整したとき、対応してくれましたので。


div.hatena-body {

width: auto;

margin: 0 auto;

padding: 0;

}

div.main {

float: left ;

width: 80%;

margin: 0 auto;

padding: 0;

}

div.sidebar {

width: 19% ;

padding: 0;

margin: 0 0 0 81% ;

text-align: left;

border: none;

}

div.section p{

margin: 0 1em;

text-align:left;

padding: 0;

}

関連質問


●質問をもっと探す●



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