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

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

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

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

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

●質問者: my_name_is_joe1029
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:いただきます サイドバー スタイルシート ゼロ プログラム
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● minkpa
●10ポイント

http://knowledge.livedoor.com/29728

◎質問者からの返答

ありがとうございます。

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

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

晒しますね。


2 ● どんジレ、どんさん
●30ポイント

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


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


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


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

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

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


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

◎質問者からの返答

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

おそらく、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;

}


3 ● tezcello
●30ポイント

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

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


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 が用意しているものなのか...


4 ● ffmpeg
●15ポイント

こんな感じ?

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


5 ● ffmpeg
●25ポイント

div.sidebar {

position: absolute;

top: 10px;

left: 75%;

width: 15%;

}

関連質問


●質問をもっと探す●



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