【お知らせ】2/10の開発日誌のお知らせにあるようにデータ保存容量が増加されたことにともない、アップできるファイルの種類が限定されてしまいました。

そのため以下の手順のうちJavascriptファイルのアップが無料ユーザーにおいてはできなくなってしまいました(PROユーザーはFTPによりアップできます)。

この点を考慮して以下の記事を参考にしてください。




nicoさんのリクエストにより、サイドバーカラムを記事の下に持ってくる方法を書きます(livedoorblogのやり方)。
3カラム化する手順の中で編集しているCSSやJavascriptファイルの挿入などの基本的な方法はこちらを参考にしてください。
ここではそれを踏まえて変更するポイントを画像つきで説明します。
また、以下に示すものはあくまでここのBlogのものの数値です。
◆全体像
ここではいちばん左のカラムを「.ラム」、
左から2番目のカラムを「▲ラム」、
左から3番目のカラムを「カラム」、
いちばん右のカラムを「ぅラム」
と呼ぶことにします。

3カラム化したときは.ラムとぅラムがある状態ですが、あらたに▲ラムとカラムの指定をしてやればいいのです。

ただ、記事(#content)の下にサイドバーを持ってくるには画面のトップからどの位置に持ってくればいいのかを決めなければなりません。それは記事の本数によって変わりますから、overflow を使って記事部分の高さを決めてしまいます。それにより▲ラムとカラムのトップからの高さが決められます。必然的に記事の部分にはスクロールバーが出ます。


では、CSSの中身です。
#container{
position:relative;
width: auto;
margin:0 auto 0 auto;
padding: 0;
text-align:left;
}
↑これは3カラム化したときと同じものです。
#content{
position:relative;
margin-top: 0px;
margin-right:200px;
margin-bottom: 0px;
margin-left: 230px;
line-height: 140%;
padding: 0px 0px 10px 0px;
overflow:auto;
height:1600px;
}
↑真ん中の記事の部分で、
 overflow:auto;
 height:1600px;
が追加されています。
#links{
position:absolute;
left:0px;
top:123px;
width:200px;
padding:0;
}
↑.ラム目の部分です。3カラム化したときのものと同じです。
#links2{
position: absolute;
width:200px;
top:1720px;
left: 220px;
margin: 0;
padding:0;
}
↑▲ラム目の部分です。トップから1720pxとして記事の下の位置を指定しています。#content の height の 1600px にBlogタイトルの高さを加えています。leftからは220pxです。
なお、3カラム化したときはここでいうぅラム目のことを「#links2」としていますが、ここでは左から2番目のカラムのことを指していますので混乱しないでください。
#links3{
position: absolute;
width:200px;
top:1720px;
left: 450px;
margin: 0;
padding:0;
}
↑カラム目の部分です。▲ラム目のものと比べて left の数値が大きくなっているだけです。
#links4{
position: absolute;
width:200px;
top:123px;
right: 0px;
margin: 0;
padding:0;
}
↑ぅラム目の部分です。これは3カラム化したときの右サイドバーのときと同じものです。

CSSファイルをこのように編集したら、次はサイドバーを区切るJavascriptファイルを作ります。

.ラムと▲ラムを区切るJavascriptファイル(以下単にjsファイル)をここでは「column1.js」とします。
↓column1.js の中身
document.write('</div><div id="links2">');

▲ラムとカラムを区切るjsファイルを「column2.js」とします。「links2」が「links3」になっただけです。
↓column2.js の中身
document.write('</div><div id="links3">');

カラムとぅラムを区切るjsファイルを「column3.js」とします。「links4」です。
↓column3.js の中身
document.write('</div><div id="links4">');

これらのjsファイルを作ってアップロードしてください。
アップロードしたら左の図のように、それぞれのカラムの区切りとなる部分にそのjsファイルが入るように順番を入れ替えます。
(jsファイルの作り方、アップロードの仕方、jsファイルの名前の取得、などはこちらを参考にしてください。)


これでCSSとトップページの再構築をしてください。

◆もう一工夫
上記のやり方だと全画面表示をしたときなど解像度の高い画面で見ているとカラムとぅラムの間に隙間ができます。その隙間がいやだという場合、カラムを記事部分と同様に幅を可変にすると解消できます。
#links3{
position:relative;
margin-right:220px;
margin-top:16px;
margin-left: 450px;
margin-bottom: 0px;
padding:0;
}
ポイントは position を relative にし、上下左右の位置の指定には margin を使います。
ただし、margin-top はすぐ上の記事の部分(#content)からの距離となりますので、ここでは 16px としています(IEで見たときに左となりの▲ラムの頭にあわせて数値を設定しても、OperaやFireFoxではカラムの頭の位置が微妙に上下にずれます)。
ぅラムとかぶらないように、margin-right の指定も必要です。

◆注意
Windows2000のIE6.0で見た限り、以下の2点の不具合を確認しています。(overflowがおかしくしてるのでしょうか?)
。影に複数の記事を投稿したときにいちばん新しい記事以外の記事タイトルの下のラインが表示されない(CSSでそのような設定をしている場合)。
△海Blogで使っている引用タグ <q> の背景の色が消える(記事タイトルと引用の間に何か文字があれば、つまり記事本文冒頭に引用タグを置かなければ大丈夫)。
OperaやFireFoxではきちんと表示されています。

原理というより、結局手順っぽくなってしまいました。
ちなみに先日7/9より可能になったHTML編集によって3カラム化やサイドバーを記事の下にもってくるなどができるかどうかはわかりません。
ちょっと見た感じでは div タグで links2 などを入れても肝心のサイドバー自体が独自タグで1つにまとまっているのでその中身までを分割できるようには思えないのですが。。。

■追記(7/31)
7/31にJavascriptファイルを使わないで変形4カラムを実現した際に、右から2列目の幅を可変にするというのができなくなりました。