Seesaaブログのテンプレートを編集したい

質問

Seesaaブログでライトイエロー(右サイドバー)を両サイドバーへ変えたいのですが、どうしても編集がうまくいきません。
こちらの質問を参考にしたのですが、おかしなレイアウトになってしまいます。
http://oshiete1.goo.ne.jp/qa1593295.html

参考例に書いてある数値がライトイエローに合わないのでしょうか？
それとも数値はこれで良くて、私の編集が問題なんでしょうか？

うまくいかない理由がわからなくて途方にくれています。
これだけで回答できないかもしれませんが解決の糸口でもつかめたら、と思い質問させていただきました。
よろしくお願いします。

回答No.1

ma_f · ベストアンサー

手持ちのもので実験してみましたが、基本的にお示しのURLで紹介されているやり方でできました(私は参考URLのサイトさんの記事を参照しました)。もしかすると#contentの値がちょっと違うのかな、と思いました。数字をあれこれいじくってみてください。

他にも見栄えよくするためにチョコチョコいじくったのですが、どこがどうだったかわからなくなってしまったので(笑)一応改造後のCSS全部載せておきます。長くなってしまいますがすみません。必ず元のCSSをバックアップ取ってから、試しに丸ごと貼ってみてプレビューしてみてください。

あと、ライトイエローというテンプレの背景は、縦に繰り返して使っている2カラム専用の画像↓
http://blog.seesaa.jp/img/bg/lightyellow/bg.gif
なので、左サイドバーの背景が右サイドバーの背景と同じ色になりません。なので、ご自分で画像を新たに作る(改造は規約違反かもしれませんのでご注意を)など工夫が必要かもしれませんね。個人的には気にならないですが。

それから、記事の部分が狭くなった結果、下のpostedの行が一行にならないですが、その辺も具合が悪いなら改善してください。

body {
background-color:#FFFAE1;
margin:0px;
padding:0px;
text-align:center;
font-family:Verdana;
}
#container{
margin:0px auto 0px auto;
width:800px;
color:#56553F;
font-size:12px;
font-family:Verdana;
background-image:url(http://blog.seesaa.jp/img/bg/lightyellow/bg.gif);
background-repeat:repeat-y;
}
a{
color:#F57F00;
text-decoration:none;
}
h1 {
margin:0px;
padding-top:42px;
padding-bottom:10px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}
h1 a{
color:#755930;
text-decoration: none;
font-weight:bolder;
}

h2 {
padding: 0px;
font-weight:bold;
text-align:left;
font-family:Verdana;
}

h3 {
font-size:12px;
font-weight:bolder;
font-family:Verdana;
background-image:url(http://blog.seesaa.jp/img/bg/lightyellow/title.gif);
background-repeat:no-repeat;
padding: 0px 0px 0px 15px;
}

H3 a{
text-decoration: none;
color:#755930;
}

#banner{
margin:0px;
padding-left:5px;
text-align:left;
height:133px;
background-image:url(http://blog.seesaa.jp/img/bg/lightyellow/blog_top.gif);
background-repeat:no-repeat;
background-position:bottom;
background-color:#FFFAE1;
}

.description {
font-weight:bold;
padding:0px 10px 0px 0px;
color:#755930;
font-family:Verdana;
}

.navi {
text-align:center;
margin-bottom:10px;
margin-top:10px;
}
#content {
margin:10px 0px 0px 0px;
float:left;
width:350px;
}

.blog {
padding:0px 5px 35px 5px;
text-align:left;
background-color:#FFFEF3;
margin-left:15px;
font-family:Verdana;
}

.blogbody {
font-weight:normal;
margin-bottom:15px;
padding-left:22px;
padding-right:20px;
}

.date{
font-size:10px;
clear:left;
color:#AA977A;
margin-top:0px;
margin-bottom:0px;
padding:25px 0px 25px 22px;
border-top:1px dashed #CDC1B0;
font-family:Verdana;
}

.title{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
.title a{
border:none;
}

.text{
padding:10px 0px 0px 0px;
margin-top:0px;
line-height:1.8em;
font-family:Verdana;
}
.posted{
text-align: right;
margin-bottom:5px;
padding:20px 0px 3px 0px;
font-size:10px;
font-family:Verdana;
}
.posted a{
font-weight:bold;
}
#links-left {
font-weight:normal;
width:180px;
float:left;
margin:10px 0px 0px 10px;
text-align:left;
font-size:12px;
}
#links {
font-weight:normal;
width:180px;
float:left;
margin:10px 0px 0px 10px;
text-align:left;
font-size:12px;
}

#calendar {
margin-top:0px;
margin-bottom:30px;
font-size:12px;
background-color:#FDFBE6;
border:1px solid #E4E286;
padding:5px;
background-color:#FFF;
}
#calendar table {
width:175px;
background-color:#FDFBE6;
font-family:Verdana;
}
#calendar th {
background-color:#F5F1C4;
border-right:1px solid #FDFBE6;
font-family:Verdana;
}
.calendarhead {
padding:4px 10px 4px 10px;
font-weight:bold;
text-align:center;
color:#755930;
font-size:12px;
background-color:#FDFBE6;
font-family:Verdana;
}
.calendarhead a{
color:#755930;
}
.calendarhead .calendarday{
color:#755930;
}

.calendarday {
padding:3px;
margin-bottom:10px;
color:#5D5D5D;
font-size:10px;
font-family:Verdana;
}
.calendarday a {
font-weight:bold;
}

.sidetitle {
padding:2px 20px 4px 15px;
font-weight:bold;
background-image:url(http://blog.seesaa.jp/img/bg/lightyellow/side_title.gif);
background-repeat:no-repeat;
color:#755930;
font-family:Verdana;
}

.side {
line-height:2em;
padding:0px 10px 10px 0px;
margin-bottom:15px;
font-size:10px;
color:#56553F;
font-family:Verdana;
}
.side a{
font-size:12px;
}
.side-tag {
padding:0px 10px 10px 0px;
margin-bottom:15px;
font-size:10px;
color:#56553F;
font-family:Verdana;
}
.side-tag a{
font-size:12px;
}
input{
border:1px solid #C2C19A;
background-color:#F3F3EC;
}
.input-submit{
background-color:#CDCDAC;
color:#525232;
border:1px solid #000;
}
.powered {
line-height:120%;
padding:30px 5px 10px 5px;
text-align:center;
}

.syndicate {
margin-right:10px;
text-align:center;
font-size:10px;
font-family:Verdana;
}

#comments {
margin-bottom:30px;
margin-top:25px;
text-align:left;
padding-left:47px;
}
#comments form {
margin:0px;
padding:0px;
font-family:Verdana;
}
textarea{
width:300px;
margin-bottom:5px;
border:1px solid #C2C19A;
background-color:#F3F3EC;
}
.comments-head{
font-weight:bold;
margin:0px;
background-image:url(http://blog.seesaa.jp/img/bg/lightyellow/title.gif);
background-repeat:no-repeat;
padding: 0px 0px 0px 15px;
font-family:Verdana;
}
.comments-body {
margin:0px;
font-family:Verdana;
}

.comments-post {
padding:10px;
text-align:right;
font-size:10px;
font-family:Verdana;
}
#trackback {
margin-bottom:30px;
margin-top:25px;
margin-left:47px;
border:1px dashed #CDC1B0;
padding:5px;
text-align:left;
font-family:Verdana;
}

#footer{
clear:left;
height:100px;
background-image:url(http://blog.seesaa.jp/img/bg/lightyellow/blog_bottom.gif);
background-repeat:no-repeat;
background-position:top;
background-color:#FFFAE1;
}
.copyright{
text-align:center;
}
.diet-content{
padding-left:10px;
}
#diet-foods{
padding-left:10px;
}
.food-title{
width:20%;
clear:left;
float:left;
}
.food-content{
width:75%;
padding-top:10px;
}
#diet-container{
border:1px solid #999;
padding:5px;
margin-bottom:5px;
}
.diet-title{
background-color:#333333;
padding:2px 10px 2px 5px;
margin-top:5px;
}
.diet-content{
padding-left:10px;
}
#diet-foods{
padding-left:10px;
}
.food-title{
width:20%;
clear:left;
float:left;
}
.food-content{
width:75%;
padding-top:10px;
}
blockquote{
border:1px solid #CDC1B0;
padding:5px;
margin:10px;
}
.tag-word{
margin:20px 0px 0px 0px;
line-height:1.4em;
}
.tag{
padding:10px;
position:relative;
background-color:#FFFEF3;
margin-left:15px;
}
#tag_cloud{
border:1px solid #CDC1B0;
padding:10px;
text-align:left;
position:relative;
}
#tag_cloud a {
padding:2px;
}
.tag-title{
font-size:16px;
font-weight:bold;
text-align:left;
}
.tag-body{
margin:10px 0px;
padding:10px 0px 0px 0px;
position:relative;
}
.tag-service{
text-align:left;
font-weight:bold;
border-bottom:1px solid #CDC1B0;
padding:0px 0px 5px 0px;
clear:left;
position:relative;
}
.tag-search{
text-align:right;
padding:5px 0px;
margin-bottom:10px;
font-weight:bold;
position:relative;
}
.tag-article{
padding:0px 10px 10px 10px;
text-align:left;
position:relative;
}
.tag-article-title{
text-align:left;
padding:0px 0px 5px 0px;
font-weight:bold;
position:relative;
}
.tag-article-posted{
font-weight:normal;
position:relative;
}
.tag-article-summary{
padding:0px 10px;
line-height:1.4em;
position:relative;
}
.tag-more{
text-align:right;
margin:10px 0px;
clear:left;
position:relative;
}
.tag-photos{
float:left;
margin:10px;
position:relative;
width:140px;
height:200px;
}
.tag-photos-title{
line-height:1.4em;
padding:5px 0px;
text-align:left;
position:relative;
}
.tag-audios{
margin:5px;
position:relative;
}
.tag-audios-title{
text-align:left;
font-weight:bold;
padding:0px 0px 5px 0px;
position:relative;
}
.tag-audios-posted{
font-weight:normal;
position:relative;
}
.tag-videos{
float:left;
margin:10px;
position:relative;
}
.tag-videos-title{
line-height:1.4em;
padding:5px 0px;
text-align:left;
position:relative;
}
.tag-navi{
clear:left;
text-align:center;
margin:10px 0px;
position:relative;
}

参考URL：

http://blogdehp.seesaa.net/article/3220165.html

お礼

回答有難うございます。
ですが、コピペしてみても上手くいきませんでした。涙
念のため、紹介してくださったサイトを見てＣＳＳを確認してみましたが、
やっぱり書いて下さったコレで合っている気がします。

私が何か間違えているのでしょうか。
何か他の設定が必要だとか？？？

因みに、書いて下さったＣＳＳは記事と右サイドバーの幅は３カラム用に狭くなっています。
でも左サイドバーが出てきません。
再構築もページ更新もやりましたがコンテンツの場所を移動する設定ページの表示も２カラムのままです。

もう少し考えてみます。
回答いただけて嬉しかったです。
ご丁寧に有難うございました。

補足

３カラム表示、出来ました～！！

原因はライトイエローのCSSを書き換えてたことでした。
２カラムタイプのデザインはCSSをどう書き換えても２カラムにしかならないのでした。
なので３カラムタイプのデザインを新たに選んで、そのCSSを書き換えたらちゃんと表示されました！(^・^)

やっぱり私のやり方が悪かったんですね。
ごめんなさい。
でも本当に有難うございました ＾＾