March 23, 2005
Livedoorのmoonのデザインを、いろいろなサイトを参考にして、自分なりにスタイルシートを変えて３カラム化してみた。
Blogの設定/管理からデザインの設定を選び、スタンダードのCUSTOMからテーマの読み込みでmoonを読み込んでスタイルシートを編集。
/*まずブログの幅*/
#container{
width:722px;
margin:0 auto 0 auto;
text-align:center;
}
↓
#container{
position: relative; /*←これは必要*/
width:912px;
margin:0 auto 0 auto;
text-align:center;
}
/*ブログの記事の部分*/
#content{
width:503px;
float:left;
margin:0 0 20px 0;
background-color:#000;
}
↓
#content{
position: absolute;
width:503px;
float:left;
margin:0 0 20px 0;
background-color:#000;
left:210px;
}
/*右側に来るサイドバーの部分*/
#links{
width:200px;
float:right;
margin:10px 0 20px 0;
background-color:#000;
}
↓
#links{
position: absolute;
width:200px;
float:right;
margin:10px 0 20px 0;
background-color:#000;
}
/*左側のサイドバーの部分*/
/*元のCSSには無いので追加*/
#links2{
position: absolute;
width:200px;
float:left;
margin:10px 0 0 723px;
background-color:#000;
}
スタイルシートを書き換えただけで３カラムにはできないです。
有料のLivedoorPROでしかJavasprictが今は使えないので、Javasprictを使用しない方法が、こちらのブログで紹介されていますので、参考にしてください。
小春日和の陽射しの中で:livedoorBlogで３カラムにする手順[整理版]
/*まずブログの幅*/
#container{
width:722px;
margin:0 auto 0 auto;
text-align:center;
}
↓
#container{
position: relative; /*←これは必要*/
width:912px;
margin:0 auto 0 auto;
text-align:center;
}
/*ブログの記事の部分*/
#content{
width:503px;
float:left;
margin:0 0 20px 0;
background-color:#000;
}
↓
#content{
position: absolute;
width:503px;
float:left;
margin:0 0 20px 0;
background-color:#000;
left:210px;
}
/*右側に来るサイドバーの部分*/
#links{
width:200px;
float:right;
margin:10px 0 20px 0;
background-color:#000;
}
↓
#links{
position: absolute;
width:200px;
float:right;
margin:10px 0 20px 0;
background-color:#000;
}
/*左側のサイドバーの部分*/
/*元のCSSには無いので追加*/
#links2{
position: absolute;
width:200px;
float:left;
margin:10px 0 0 723px;
background-color:#000;
}
スタイルシートを書き換えただけで３カラムにはできないです。
有料のLivedoorPROでしかJavasprictが今は使えないので、Javasprictを使用しない方法が、こちらのブログで紹介されていますので、参考にしてください。
小春日和の陽射しの中で:livedoorBlogで３カラムにする手順[整理版]
(21:48)
