2004年08月09日

第5回は　プラグイン（サイドバー）の左右を入れ替える

カスタマイズ第５回は右にあるサイドバーを左に、又は、左から右へ移します。

livedoor blogはデザインがいっぱいあって嬉しいのですが、
サイドバーの左右が選べません。
あぁ、このデザインでサイドバーが右（左）だったらな〜
と思いませんか？
今回はそんな人向けのサイドバーを逆にする方法です。
しかもすごく簡単です。
他を変えないなら一言leftと書いてある部分をrightに変えるだけ！！。（もしくは逆）
場所を理解してもらうために本文が長いですが
わかれば、すぐです。
※テーマによっては難しいものもあります
※positionタグがある場合は削ってください

テーマがカスタマイズモードでないひとは、
第1回の記事を参考にカスタマイズモードに移行してください。
現在のテーマを引き継いで移行する方法を紹介しています

まずは下の2枚を見てね。何が違います？

画面サンプル


画面サンプル２

ね？違うのわかりますか？

でわ、やり方です。
全てのテーマでできるわけではありませんが、大体の場合できると思います。

重要なのは、float属性です。これで本文の位置が決まります。
サイドバーを右にしたいなら、本文は左ですのでfloat:left;
サイドバーを左にしたいなら、本文は右ですのでfloat:right;
となります。

以下が元々の、mai_kuraki2の内容です。
第４回でも言いましたが、本文がcontent サイドバーがLinksになります。 赤字にしておきました。それぞれに右、左が書いてあると。 思います。 書いてない場合は、float:left;　float:right;を自分で追加してください。

@charset "EUC-JP";

body{
color:#000;
background:#fff;
text-align:center;
}

a{color:#f60;font-weight:bold;text-decoration:underline;}
a:link{color:#f60;font-weight:bold;text-decoration:underline;}
a:visited{font-weight:bold;text-decoration:underline;}
a:active{font-weight:bold;}
a:hover{color:#f60;font-weight:bold;text-decoration:none;}

a.acalendar{color:#043ce4;font-weight:bold;text-decoration:underline;}
a.acalendar:link{color:#043ce4;font-weight:bold;bold;text-decoration:underline;}
a.acalendar:visited{font-weight:bold;text-decoration:underline;}
a.acalendar:active{font-weight:bold;}
a.acalendar:hover{color:#043ce4;font-weight:bold;text-decoration:none;}

a.acontinues{color:#f60;font-weight:bold;text-decoration:underline;}
a.acontinues:link{color:#f60;font-weight:bold;text-decoration:underline;}
a.acontinues:visited{font-weight:bold;text-decoration:underline;}
a.acontinues:active{font-weight:bold;}
a.acontinues:hover{color:#f60;font-weight:bold;text-decoration:none;}

a.amenu{color:#f60;font-weight:bold;text-decoration:underline;}
a.amenu:link{color:#f60;font-weight:bold;text-decoration:underline;}
a.amenu:visited{font-weight:bold;text-decoration:underline;}
a.amenu:active{font-weight:bold;}
a.amenu:hover{color:#f60;font-weight:bold;text-decoration:none;}

a.aposted{color:#f60;font-weight:bold;text-decoration:underline;}
a.aposted:link{color:#f60;font-weight:bold;text-decoration:underline;}
a.aposted:visited{font-weight:bold;text-decoration:underline;}
a.aposted:active{font-weight:bold;text-decoration:underline;}
a.aposted:hover{color:#f60;font-weight:bold;text-decoration:none;}

a.atrackback-post{color:#f60;font-weight:bold;text-decoration:underline;}
a.atrackback-post:link{color:#f60;font-weight:bold;text-decoration:underline;}
a.atrackback-post:visited{font-weight:bold;text-decoration:underline;}
a.atrackback-post:active{font-weight:bold;text-decoration:underline;}
a.atrackback-post:hover{color:#f60;font-weight:bold;text-decoration:none;}

#container{
margin:0 auto 0 auto;
width:740px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
background:#033ce5 url('/_img/kurakimai/bkg_03.jpg') no-repeat scroll 50% 0;
text-align:left;
}

#banner,#subbanner{
height:295px;
}

#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{color:#fff;text-decoration:none;}
#banner a:active{color:#fff;}
#banner a:hover{color:#fff;text-decoration:none;}

#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{color:#fff;text-decoration:none;}
#subbanner a:active{color:#fff;}
#subbanner a:hover{color:#fff;text-decoration:none;}

h1,h2,h3{margin:0;padding:0;}

.blogtitle{
color:#fff;
font-size:24px;
font-weight:bold;
padding:73px 0 0 55px;
background:url('/_img/kurakimai/blog/') no-repeat scroll 0% 25px;
text-align:left;
}

.description{
color:#fff;
font-size:small;
font-weight:bold;
margin:5px 0 0 50px;
text-align:left;
}

#content{
width:555px;
margin:0;
float:left;
}

.blog{
margin:0 15px 0 15px;
}

.date{
color:#033ce5;
font-size:small;
font-weight:bold;
padding:15px 15px 0 0;
background:#fff;
text-align:right;
}

.blogbody{
padding:20px 15px 15px 15px;
background:#fff;
border-bottom:10px solid #033ce5;
}

.title{
color:#033ce5;
font-size:small;
font-weight:bold;
padding:3px 0 3px 25px;
background:#fff url('http://kuraki.livedoor.com/img/blog/icon.gif') no-repeat scroll 0 0;
}

.main{
font-size:small;
line-height:135%;
margin:20px 0 35px 0;
}

.main-continues{
font-size:small;
}

.posted{
color:#666;
font-size:x-small;
text-align:right;
}

.menu{
color:#666;
font-size:x-small;
margin:5px 0 35px 0;
text-align:right;
}

.comments-head{
color:#033ce5;
font-size:small;
font-weight:bold;
padding:3px 0 3px 25px;
background:#fff url('/_img/kurakimai/icon.gif') no-repeat scroll 0 0;
}

.comments-body{
font-size:small;
line-height:135%;
margin:20px 0 35px 0;
}

.comments-post{
color:#666;
font-size:x-small;
text-align:right;
}

.trackback-url{
color:#f60;
font-size:small;
font-weight:bold;
margin:20px 0 20px 0;
}

.trackback-body{
font-size:small;
line-height:135%;
margin:20px 0 35px 0;
}

.trackback-post{
color:#666;
font-size:x-small;
text-align:right;
}

table.form{margin:25px 0 0 0;}

label{
font-size:small;
font-weight:bold;
}

#author{width:200px;}
#email{width:200px;}
#url{width:200px;}
#text{width:500px;height:200px;}

.pagetop{
font-size:xx-small;
text-align:right;
padding:0 0 10px 0;
}


#links{
width:180px;
padding:0 0 0 0;
float:right;
}

.calendarhead{
color:#fff;
font-size:x-small;
font-weight:bold;
letter-spacing:5px;
margin:0 10px 0 0;
padding:4px;
text-align:center;
background:url('/_img/kurakimai/plugin.gif') no-repeat scroll 0 0;
}

.calendartable{
margin:0 10px 15px 0;
width:170px;
}

.calendarweek{color:#033ce5;font-size:xx-small;font-weight:bold;padding:0 2px;}
.calendarwd{background:#fff;}
.calendard{empty-cells:show;}
.calendardbg{background:#fc0;}

.calendar{
color:#fff;
font-size:xx-small;
padding:0 2px;
}

.sidetitle{
color:#fff;
font-size:x-small;
font-weight:bold;
letter-spacing:5px;
margin:0 10px 0 0;
padding:4px;
background:url('/_img/kurakimai/plugin.gif') no-repeat scroll 0 0;
text-align:center;
}

.side{
font-size:x-small;
line-height:125%;
padding:10px;
margin:0 10px 10px 0;
background:#fff;
text-align:left;
}

.sidebody{padding:0 0 5px 0;}

.photo{text-align:center;}
.nickname{color:#f60;
font-size:x-small;
font-weight:bold;
margin:10px 0;
text-align:center;
}
.message{
font-size:x-small;
line-height:125%;
}

.blogtimes{
margin:0 10px 10px 0;
text-align:center;
}

.powered{
margin:0 10px 10px 0;
text-align:center;
}

.syndicate{
font-size:xx-small;
margin:0 10px 10px 0;
text-align:center;
}

.checkers{
font-size:xx-small;
margin:0 10px 10px 0;
text-align:center;
}

#footer{
clear:both;
position:bottom;
text-align:center;
}

 


これを修正して、先ほどの逆転させたものが以下になります。

@charset "EUC-JP";

body{
color:#000;
background:#fff url('/_img/crystal.gif') no-repeat scroll 50% 0%;
margin:0;
padding:0;
text-align:center;
}

a{color:#666;text-decoration:underline;}
a:link{color:#666;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#999;text-decoration:none;}

a.acontinues{color:#005080;text-decoration:underline;}
a.acontinues:link{color:#005080;text-decoration:underline;}
a.acontinues:visited{text-decoration:underline;}
a.acontinues:active{}
a.acontinues:hover{color:#999;text-decoration:none;}

a.amenu{color:#666;text-decoration:underline;}
a.amenu:link{color:#666;text-decoration:underline;}
a.amenu:visited{text-decoration:underline;}
a.amenu:active{}
a.amenu:hover{color:#999;text-decoration:none;}

a.aposted{}
a.aposted:link{}
a.aposted:visited{}
a.aposted:active{}
a.aposted:hover{}

#container{
color:#000;
width:645px;
margin:0 auto 0 auto;
text-align:left;
}

#banner,#subbanner{}

#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{color:#fff;text-decoration:none;}
#banner a:active{color:#fff;}
#banner a:hover{color:#fff;text-decoration:underline;}

#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{color:#fff;text-decoration:none;}
#subbanner a:active{color:#fff;}
#subbanner a:hover{color:#fff;text-decoration:underline;}

h1,h2,h3{margin:0;padding:0;}

.blogtitle{
color:#fff;
font-size:24px;
font-weight:bold;
text-decoration:none;
margin:75px 0 0 30px;
}

.description{
color:#fff;
font-size:small;
font-weight:bold;
margin:0 0 0 30px;
}

#content{
float:right;
width:430px;
}

.blog{
padding:40px 0 15px 0;
}

.date{
color:#000;
font-size:x-small;
font-weight:bold;
padding:0 0 2px 0;
border-bottom:1px solid #999;
}

.blogbody{
margin:20px 0 0 0;
}

.title{
font-size:x-small;
font-weight:bold;
padding:0 0 0 0;
}

div.main{
font-size:x-small;
line-height:135%;
margin:20px 0 20px 15px;
}

.main-continues{
font-size:x-small;
}

.posted{
color:#666;
font-size:xx-small;
text-align:right;
margin:0 0 35px 0;
}

.menu{
color:#666;
font-size:xx-small;
text-align:right;
}

.comments-head{
font-size:x-small;
font-weight:bold;
padding:0 0 0 0;
}

.comments-body{
font-size:x-small;
line-height:135%;
margin:20px 0 20px 15px;
}

.comments-post{
color:#666;
font-size:xx-small;
margin:0 0 35px 0;
text-align:right;
}

.trackback-url{
color:#005180;
font-size:x-small;
font-weight:bold;
margin:20px 0 35px 15px;
}

.trackback-body{
font-size:x-small;
line-height:135%;
margin:20px 0 20px 15px;
}

.trackback-post{
color:#666;
font-size:xx-small;
text-align:right;
margin:0 0 35px 0;
}

table.form{margin:35px 0 0 0;}

label{
font-size:x-small;
font-weight:bold;
}

#author{width:200px;border:1px solid #005180;}
#email{width:200px;border:1px solid #005180;}
#url{width:200px;border:1px solid #005180;}
#text{width:500px;height:200px;border:1px solid #005180;}

.pagetop{
color:#666;
font-size:xx-small;
margin:0 0 35px 0;
text-align:right;
}

#links{
float:right;
margin:0 5px 0 0px;
padding:40px 0 50px;
}

.calendarhead{
color:#0223b0;
font-size:xx-small;
font-weight:bold;
letter-spacing:5px;
margin:0 0 10px 0;
}

.calendartable{margin:0 0 40px 0;}
.calendarweek{color:#000;font-size:xx-small;padding:0 2px;}
.calendarwd{background:#e5e5e5;border:1px solid #cccccc;}
.calendard{}
.calendardbg{}

.calendar{
font-size:xx-small;
padding:0 2px;
}

.sidetitle{
color:#0223b0;
font-size:xx-small;
font-weight:bold;
letter-spacing:5px;
text-align:left;
margin:0 0 10px 0;
}

.side{
font-size:xx-small;
line-height:115%;
text-align:left;
padding:0 0 0 0;
margin:0 0 40px 0;
}

.sidebody{padding:0 0 5px 0;}

a.arss{color:#0223b0;text-decoration:underline;}
a.arss:link{color:#0223b0;text-decoration:underline;}
a.arss:visited{text-decoration:underline;}
a.arss:active{}
a.arss:hover{color:#0223b0;text-decoration:none;}

.photo{text-align:left;}
.nickname{font-size:xx-small;font-weight:bold;margin:10px 0;}
.message{font-size:xx-small;}

.quotetable{background:#999;}
.quote{color:#000;font-size:xx-small;padding:1px;background:#fff;}

.blogtimes{margin:0 0 10px 0;text-align:left;}

.powered{
text-align:left;
margin:0 0 10px 0;
}

.syndicate{
font-size:xx-small;
text-align:left;
}

.checkers{
font-size:xx-small;
margin-top:10px;
}

 


本文を右に変えたいので、本文部分のfloat:left;をfloat:right;に変えました。
実はこれだけでもOKなのです。
あれ？Linksの方は変えないの？って思われる人もいるかもしれません。
うーん、これは難しい話なんですが…

このright,leftは正確には、右側に置く、左側に置くという意味ではありません。
右から配置する、左から配置するという意味なのです
なので、本文を先に、右に配置してしまえば、のこるサイドバーは左に置かざるを得ません。
なので、実際は、変えなくても位置が変わります。
え？じゃあ、どうなの？
というのは、また次回にでも。
ここをleftにするか、rightにするかで多少見え方が違いますので自分にあった方にするのが
良いと思います。
また、変えた結果、バーと本文がくっつきすぎという人は、赤くしておいたmarginの部分の2番目と
4番目の数字を大きくしたり、小さくしたりしてみてください。2番目が右、4番目が左との幅が
開くようになります。
それでは、カスタマイズを楽しんでください。


こんな感じです。CSSの編集は、変える場所さえ分かっていれば、難しいことはありません。
しっぱいしてもまた、戻してやり直せばよいのです
ただ、カスタマイズした、CSSをさらにカスタマイズする場合はメモ帳などにカット＆ペーストして、前の内容を保存しておきましょう。
そうしないと、また1からやり直しになってしまいます。
また、CSSを変更した後はCSSの再構築をわすれずに〜。
p-6806241 at 01:58 │Comments(0) │TrackBack(2) │カスタマイズしようぜ。 
このBlogのトップへ │前の記事 │次の記事

トラックバックURL

この記事へのトラックバック

1. 本日のカスタマイズ  [ 暇人工房 ]   2004年08月09日 23:22
本日のあんちょこ〜『貧乏だけど心は萌え』さんの「第5回はプラグイン（サイドバー）の左右を入れ替える」より。 「マイオリジナルCSSに戻して〜」と言ってましたが、...
2. Blogの見た目のカスタマイズとか  [ 反芻だけなら牛でもできる ]   2005年02月18日 16:33
常々見づらいなぁと思っていたので思い切って再びいじってみた。 ・デフォルトでは左にあるカラムを右に移動。 　CSSの #content { float: right #links{ float:left　　という所を #content { float: left #links{ float:right　　に書き換えた。 　#content

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔    星