サイドバーを右にしたいです。

自分なりにスタイルシートやフッタをいじってみたのですが、
なんかうまくいきません。

当方のスタイルシートを晒してもよいのですが、異常に長いので、まずはこのままで質問させていただきます。
ちなみに私のプログラム知識は0(ゼロ)に近いです(汗)
ビシッと教えて下さるとありがたいです。

ちなみに当方のブログは
http://d.hatena.ne.jp/my_name_is_joe1029/
となります。

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

回答の条件
  • 1人2回まで
  • 登録:2007/12/09 05:07:54
  • 終了:2007/12/11 15:57:47

回答(5件)

id:minkpa No.1

minkpa回答回数4178ベストアンサー獲得回数552007/12/09 23:45:47

id:my_name_is_joe1029

ありがとうございます。

しかし、そちらは、既に参照していたんですが、なかなかうまくいきませんでした。

スタイルシートの他の部分が邪魔をしているのかなと思います。

晒しますね。

2007/12/10 03:29:19
id:hrkt0115311 No.2

どんジレ、どんさん回答回数892ベストアンサー獲得回数512007/12/09 06:17:04

ポイント30pt

id:my_name_is_joe1029 さん、おはようございます。


blog拝見しました。ご自身でCSSを設定されたいとのことですので


↑これは、ないものとしてお話しさせていただきますね。


Via: http://d.hatena.ne.jp/keyword/sidebar#makebar2

http://guide.g.hatena.ne.jp/smoking186/20000201

↑上記が大変参考になると思います。よろしければご覧下さい。


以上、参考になれば幸いです。

id:my_name_is_joe1029

丁寧にありがとうございます。非常に勉強になります。

おそらく、http://hac-design.com/css/css.htmlらへんからCSS勉強した方が良いかと思うんですが、時間がなく申し訳ありません(汗)

指定していただいたサイトを用いて、positionやfloatの操作をしてみましたが、どうもうまくいきません。

他の部分が何か邪魔をしているのかな、と思います。

当方のスタイルシートは↓のようになります。

具体的な改善案を提示していただけると非常に非常にありがたいです。

html{

margin:0;

padding:0;

border:none;

}

html *{

-moz-box-sizing: border-box ;

box-sizing: border-box ;

}

body{

font-size: 90%;

line-height: 1.5;

color: #666666;

background-color: #ffffff;

text-align: center;

margin: 0;

padding: 0;

word-break: break-all ;

word-wrap: break-word ;

}

h1{

width: 80%;

text-align: left;

line-height: 1.2;

font-size: 120%;

margin: 40px auto;

letter-spacing: 0.2em;

padding: 0;

color: #666666;

text-decoration:none;

}

div.hatena-body{

position: relative ;

width: auto;

margin: 0 auto;

padding: 0;

}

.main{

padding: 0px;

margin: 0 0 0 26%;

}

.day{

margin: 0 0 25px 0;

padding: 0;

width: auto;

_width: 100% ;

background-color: #ffffff;

border-right: solid 2px #e5e5e5;

border-bottom: solid 2px #e5e5e5;

text-align:left;

}

h2,

h2 a{

text-decoration: none;

border: none;

color: #666666;

}

h2 {

font-size: 100%;

font-weight: normal;

text-decoration:none;

font-family:"MS P ゴシック";

letter-spacing: 0px;

margin: 0;

padding: 0.5em 0.5em;

text-align: left;

border-top: solid 1px #808080;

border-left: solid 1px #808080;

border-right: solid 1px #808080;

border-bottom: solid 0px #808080;

}

span.date{

font-size: 100%;

font-weight: bold;

margin-left: 10px;

padding-left: 4px;

}

span.title{

font-size: 100%;

font-family:"MS P ゴシック";

letter-spacing: 1px;

font-weight: normal;

margin-left: 15px;

}

.body {

padding: 0.5em 0 0 0;

margin: 0 0 0 0;

width: auto;

_width: 100% ;

border-left: solid 1px #808080;

border-bottom: solid 1px #808080;

border-right: solid 1px #808080;

}

.section{

padding: 0 0.5em;

margin: 0 0 1em 0;

border-bottom: solid 1px #ffffff;

}

h3 a{

border: none;

}

h3{

color: #666666;

letter-spacing: 0px;

font-family:"MS P ゴシック";

font-size:100%;

font-weight: bold;

background-color: #ffffff;

margin:0;

padding: 0 1em;

text-align:left;

}

a.sectioncategory{

}

span.timestamp{

font-size:75%;

font-weight: normal;

letter-spacing: 0px;

}

.section p{

margin: 0 2em;

text-align:left;

padding: 0;

}


/**************** decoration *************************/

a{

text-decoration: none;

color: #666666;

border-bottom:solid 1px #666666;

}

a.keyword,

a.okeyword {

text-decoration: none;

border-bottom: dashed 0px #d0d0d0;

}

a img{

border: none;

}

A:link { text-decoration:none;color:#999999;}

A:visited { text-decoration:none;color:#999999;}

A:active { text-decoration:none;color:#999999;}

A:hover { text-decoration: none;color:#666666;}

a.keyword {text-decoration: none; border-bottom: 0px dotted #6495ed;}

h4 {

color: #666666;

font-size:100%;

font-weight: bold;

margin: 5px 1em;

padding: 0;

}

h5{

color: #666666;

font-size:100%;

font-weight: normal;

margin: 5px 1em;

padding: 0;

}

blockquote{

border: solid 1px #808080;

margin: 1em 2em;

padding: 10px;

}

.section blockquote p{

margin: 0.5em;

padding: 0;

}

cite{

font-weight: bold;

font-style: normal;

}

cite a{

border: none;

}

pre{

border: solid 1px #808080;

margin: 1em 2em;

padding: 10px;

}

font{

line-height: 1.2;

}

em,

em a{

font-weight: normal;

font-style: normal;

border: none;

background-color: #e5e5e5;

}

ins,

ins a{

text-decoration: none;

border: none;

color: #666666;

}


/************************* list **********************/

.section ul{

margin: 1em 2em 1em 3em;

padding: 0;

}

.section ol{

margin: 1em 2em 1em 3.5em;

padding: 0;

}

.section ul li,

.section ol li,

.section ol ul,

.section ol ol,

.section ul ul,

.section li li{

margin: 0 0 0 1em;

padding: 0;

}

.section dl{

margin: 1em 2em;

}

.section dt{

font-weight: bold;

}

.section dd{

}


/********************** img ***************************/

img.photo{

float: right;

padding: 0;

border: solid 1px #808080;

margin: 0 2em 10px 10px;

}

img.asin{

float: right;

margin: 0 0 10px 10px;

padding: 0;

border: solid 1px #808080;

}


/********************* footnote **********************/

span.footnote{

font-size: 70%;

}

span.footnote a{

border: 0;

}

div.footnote{

margin: 0 ;

padding: 1em ;

border-top: dashed 1px #808080;

}

p.footnote{

margin: 3px 0;

font-size: 90%;

}


/********************** comment ***********************/

div.comment,

div.refererlist{

_width: 100% ;

padding: 1em 1em;

margin: -2px 0 0 0 ;

background-color: #ffffff;

border-top: dashed 1px #808080;

border-left: solid 1px #808080;

border-bottom: solid 1px #808080;

border-right: solid 1px #808080;

}

div.refererlist ul,

div.comment ul{

margin: 3px 2em 0 2em;

padding: 0;

list-style-type: square;

font-size: 80%;

letter-spacing: 0px;

}

form div.refererlist ul,

form div.comment ul{

font-size: 100%;

letter-spacing: 1px;

}

div.caption{

font-size: 80%;

padding: 0;

margin: 0;

}

form div.refererlist div.caption{

font-size: 100%;

padding: 0 0.5em;

margin: 0.5em 0;

border-bottom: solid 1px #d0d0d0;

}

div.caption a{

border: none;

}

div.commentshort{

margin: 0;

}

span.canchor{

display: none;

}

div.commentshort a{

border: none;

}

span.commentator{

font-weight: bold;

display:block;

margin: 0 0 0 -1em;

padding: 3px 0 0 0;

}

form span.commentator{

display: inline;

margin: 0;

}

div.commentshort P

{

margin: 0 0 0 1em;

font-size: 90%;

letter-spacing: 0px;

}

div.commentshort textarea{

width: 90%;

height: 10em;

}


/****************** asin detail ***********************/

div.hatena-asin-detail {

margin: 1em 2em;

padding: 5px;

border: solid 1px #808080;

_width: 100%;

}

img.hatena-asin-detail-image {

float: left;

border: 0;

margin: 0 10px 0 0 ;

}

div.hatena-asin-detail-info{

float: left;

margin: 0;

word-break: break-all;

}

p.hatena-asin-detail-title{

font-weight: bold;

width: 100%;

margin: 0;

}

div.hatena-asin-detail-info ul {

list-style-type: none;

margin: 5px 0 0 0;

padding: 0;

}

div.hatena-asin-detail-info li {

margin: 0;

padding: 0;

}

div.hatena-asin-detail p a{

border: 0;

}

div.hatena-asin-detail-foot {

clear: left;

}


/************************ form **********************/

form{

margin: 0;

padding: 0;

}

form.hatena-searchform{

margin: 5px 0;

}

div.day div.comment form{

margin: 0;

padding: 0;

}

div.day form div.body{

margin: 0;

padding: 1em 2em;

}

form h3{

margin: 0.5em 0;

padding: 0;

border-bottom: dotted 1px #999999;

font-size: 100%;

}


/********************** sidebar ***********************/

.sidebar {

position: absolute;

top: 65px;

left: 0px;

width: 24% ;

padding: 0;

margin: 0 ;

text-align: left;

border: none;

}

.hatena-module{

margin: 0 0 15px 0;

padding: 0 0 0 0;

width: 100% ;

position: relative;

border-right: solid 2px #ffffff;

border-bottom: solid 2px #ffffff;

background-color: #ffffff;

}

.hatena-moduletitle,

.hatena-moduletitle a{

border: none;

color: #666666;

}

.hatena-moduletitle{

font-size: 100%;

font-weight: bold;

padding: 0.5em 1em;

margin: 0;

border-top: solid 1px #808080;

border-left: solid 1px #808080;

border-right: solid 1px #808080;

border-bottom: solid 1px #808080;

color: #666666;

text-align: center;

}

.hatena-modulebody{

padding: 10px 1em;

margin: 0;

font-size: x-small;

letter-spacing: 0px;

border-left: solid 1px #808080;

border-bottom: solid 1px #808080;

border-right: solid 1px #808080;

_width:100%;

}

.hatena-modulebody a{

border: none;

}


/********************** sideber li **********************/

.hatena-modulebody ul{

padding: 0;

margin: 0;

list-style-type: none;

}

.hatena-modulebody li {

}

.hatena-modulebody li a{

_width: 100%;

line-height: 1.2;

margin: 0;

}

.hatena-modulebody li a:hover {

background-color: #ffffff;

_width: 100%;

}


/*************** trackback/comment module ****************/

.hatena-modulebody ul.hatena-recentcomment li a{

display: inline;

width: auto;

padding: 0;

border: none;

line-height: 1.5;

}

.hatena-modulebody ul.hatena-recentcomment li a:hover{

width: auto;

border: none;

background-color: #eeeeee;

}


/******************* photo module *******************/

ul.hatena-photo{

padding: 5px 5px;

margin: 0;

width: auto;

list-style-type: none;

text-align: left;

}

ul.hatena-photo li{

margin: 0;

display: inline;

width: none;

}

ul.hatena-photo li img{

}

ul.hatena-photo li a{

display: inline;

width: 48%;

margin: 0 0 10px 0;

padding: 0;

text-align: center;

border: none;

}

ul.hatena-photo li a:hover{

width: 48%;

background-color: transparent;

border: none;

}

ul.hatena-photo li a img{

filter: none;

border: 1px solid #808080;

}

ul.hatena-photo li a:hover img{

filter: none;

border: 1px solid #ff0000;

}


/********************** calender **********************/

div.calendar {

font-size:80%;

color: #666666;

margin: 0 ;

padding: 0;

text-align: right;

}

div.calendar a{

border: none;

color: #666666;

}


/********************** header **********************/

table{

margin: 0 auto;

padding: 0;

}

td{

background-color : transparent;

}

table table td{

background-color : transparent;

}

table table{

margin: 0;

padding:0;

border: none;

width: 100%;

border: 0;

background-image: none;

background-color : transparent;

}

table table td font,

table table td a{

border:none;

color: #666666;

}

td a{

border: 0;

}

table input{

border: solid 1px #808080;

color: #666666;

}

div.body table{

width: auto;

border: 0;

}


/********************** calendar2 **********************/

div.calendar2{

padding: 0;

}

table.calendar{

font-size: 90%;

letter-spacing: 0px;

_width: 100%;

margin: 0 auto;

padding: 0;

background-color: #ffffff;

border: none;

background-image : none;

background-repeat: no-repeat;

text-align: center;

position: relative;

}

td.calendar-current-month{

font-weight: bold;

}

td.calendar-prev-month,

td.calendar-current-month,

td.calendar-next-month{

text-align:center;

}

td.calendar-day{

}

td.calendar-day a{

border-bottom: 1px solid #666666;

}

td.calendar-weekday,

td.calendar-sunday,

td.calendar-saturday{

display:none;

}

td.calendar-day a img {

width: 12px;

height: 12px;

border: solid 1px #d0d0d0;

}

td.calendar-day a:hover img{

border: solid 1px #ff0000;

}


/************************ adminmenu ****************************/

div.adminmenu{

text-align: right;

width: 85%;

padding: 1em 0;

margin: 0 auto;

font-size: 80%;

background-color: #ffffff;

color: #666666;

}

div.adminmenu a{

border: none;

color: #666666;

}

div.hatena-body div.adminmenu{

text-align: right;

margin: 0;

padding: 0.5em 1em;

width: auto;

border: 0;

}


/*********************/

span.highlight{

background-color: yellow;

padding: 1px;

}

.footer{

border: solid 1px #808080;

padding: 10px;

text-align: center;

}

.footer,

.footer a{

color: #808080;

border: none;

}

div.ad{

margin: 5px 2em;

}

div.body{

clear: both;

}


/************************* stealth *****************************/

span.stealth{

color: #FFFFFF;

}

span.stealth a.keyword{

color: #FFFFFF;

text-decoration:none;

border-bottom: 1px dotted white;

}

span.stealth a.keyword:visited{

color: #FFFFFF;

text-decoration:none;

border-bottom: 1px dotted white;

}

h1, a{

text-decoration: none;

}

2007/12/10 03:41:18
id:tezcello No.3

tezcello回答回数460ベストアンサー獲得回数692007/12/10 14:14:22

ポイント30pt

> なんかうまくいきません

具体的に「どこが」「どのように」うまくいかない(気に入らない)と質問された方が回答が集まりやすいと思います。


IE と Netscape で表示が異なるようなのでボックスの幅指定を % から px にしました。

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

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

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


ツッコミどころがたくさんありますが、質問者さんが追加されたものか、hatena が用意しているものなのか...

id:ffmpeg No.4

ffmpeg回答回数1202ベストアンサー獲得回数92007/12/11 00:51:25

ポイント15pt

こんな感じ?

http://d.hatena.ne.jp/ffmpeg/

id:ffmpeg No.5

ffmpeg回答回数1202ベストアンサー獲得回数92007/12/11 00:56:59

ポイント25pt

div.sidebar {

position: absolute;

top: 10px;

left: 75%;

width: 15%;

}

  • id:hrkt0115311
    どんジレ、どんさん 2007/12/10 09:02:13
    my_name_is_joe1029 さん、おはようございます。
    CSSを貼り付けてくださってありがとうございました。拝見しました。そうですね、私ならはてなダイアリーの設定画面からスタイルシートを最小限に削った上で、プレビューで確認し、きちんとサイドバーが表示されるようになったら、他のCSSも少しずつ増やし、邪魔している他の部分を見つけだすと思います。
    具体的な提案を行いたいのですが、私の知恵ではここまでが精一杯です。お役に立てずすみません。
  • id:my_name_is_joe1029
    みなさま、コメントありがとうございます。
    htkt0115311さんのように、どんどん削っていった後、tezcelloさんのを埋め込んで、↓のようにしてみました。
    スタイルシートは、tezcelloさんのおっしゃるとおり、どっかから勝手についてきたものです。

    ページのヘッダ
    <div class="main">

    ページのフッタ
    </div>
    <div class="sidebar">
    <hatena name="clock" type="slim" color="#808080">
        <hatena moduletitle="携帯からジョーの部屋を" name="barcode" value="http://d.hatena.ne.jp/my_name_is_joe1029/" template="hatena-module">
    <hatena moduletitle="プロフィール" name="profile" template="hatena-module">
    <hatena moduletitle="最近の記事" name="section" template="hatena-module" >
    <hatena moduletitle="カテゴリー" name="sectioncategory" template="hatena-module">
    <hatena moduletitle="コメント" name="comment" cid="10"template="hatena-module">
    <hatena moduletitle="カレンダー" name="calendar2" template="hatena-module">
    <hatena moduletitle="カテゴリー" name="sectioncategory" template="hatena-module">
    <hatena moduletitle="ジョーのアンテナ" name="antenna" listlimit="10" titlelength="15" moduletitle="antenna" template="hatena-module">
    <hatena moduletitle="検索" name="searchform" template="hatena-module">
        <hatena moduletitle="トラックバック" name="trackback" template="hatena-module">
    <hatena moduletitle="カウンター" name="counter"cid="11" template="hatena-module" >

    </div>


    スタイルシート
    .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;
    }

    ですが、、なかなか右にいかないです。。

    ffmpegさんのもsidebarのところに置換してみました。
    ここまで来たら、具体的な改善策を教えていただけたら嬉しいです。
    僕もいろいろ試してみます☆
  • id:my_name_is_joe1029
    少し、スレッドが長くなりすぎましたので、新しいものを立ち上げてみようかと思います。

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

    となります。みなさま本当にありがとうございます!

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

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

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

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