2004年07月17日 15:08
サイドバーを記事の下に
【お知らせ】2/10の開発日誌のお知らせにあるようにデータ保存容量が増加されたことにともない、アップできるファイルの種類が限定されてしまいました。
そのため以下の手順のうちJavascriptファイルのアップが無料ユーザーにおいてはできなくなってしまいました（PROユーザーはFTPによりアップできます）。
この点を考慮して以下の記事を参考にしてください。
nicoさんのリクエストにより、サイドバーカラムを記事の下に持ってくる方法を書きます（livedoorblogのやり方）。
３カラム化する手順の中で編集しているCSSやJavascriptファイルの挿入などの基本的な方法はこちらを参考にしてください。
ここではそれを踏まえて変更するポイントを画像つきで説明します。
また、以下に示すものはあくまでここのBlogのものの数値です。
◆全体像
ここではいちばん左のカラムを「?カラム」、左から２番目のカラムを「?カラム」、
左から３番目のカラムを「?カラム」、
いちばん右のカラムを「?カラム」
と呼ぶことにします。
３カラム化したときは?カラムと?カラムがある状態ですが、あらたに?カラムと?カラムの指定をしてやればいいのです。
ただ、記事（#content）の下にサイドバーを持ってくるには画面のトップからどの位置に持ってくればいいのかを決めなければなりません。それは記事の本数によって変わりますから、overflow を使って記事部分の高さを決めてしまいます。それにより?カラムと?カラムのトップからの高さが決められます。必然的に記事の部分にはスクロールバーが出ます。
では、CSSの中身です。
#container{↑これは３カラム化したときと同じものです。
position:relative;
width: auto;
margin:0 auto 0 auto;
padding: 0;
text-align:left;
}
#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;
}
#links2{↑?カラム目の部分です。トップから1720pxとして記事の下の位置を指定しています。#content の height の 1600px にBlogタイトルの高さを加えています。leftからは220pxです。
position: absolute;
width:200px;
top:1720px;
left: 220px;
margin: 0;
padding:0;
}
なお、３カラム化したときはここでいう?カラム目のことを「#links2」としていますが、ここでは左から２番目のカラムのことを指していますので混乱しないでください。
#links3{↑?カラム目の部分です。?カラム目のものと比べて left の数値が大きくなっているだけです。
position: absolute;
width:200px;
top:1720px;
left: 450px;
margin: 0;
padding:0;
}
#links4{↑?カラム目の部分です。これは３カラム化したときの右サイドバーのときと同じものです。
position: absolute;
width:200px;
top:123px;
right: 0px;
margin: 0;
padding:0;
}
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 を使います。
position:relative;
margin-right:220px;
margin-top:16px;
margin-left: 450px;
margin-bottom: 0px;
padding:0;
}
ただし、margin-top はすぐ上の記事の部分（#content）からの距離となりますので、ここでは 16px としています（IEで見たときに左となりの?カラムの頭にあわせて数値を設定しても、OperaやFireFoxでは?カラムの頭の位置が微妙に上下にずれます）。
?カラムとかぶらないように、margin-right の指定も必要です。
◆注意
Windows2000のIE6.0で見た限り、以下の２点の不具合を確認しています。（overflowがおかしくしてるのでしょうか？）
?１日に複数の記事を投稿したときにいちばん新しい記事以外の記事タイトルの下のラインが表示されない（CSSでそのような設定をしている場合）。
?このBlogで使っている引用タグ <q> の背景の色が消える（記事タイトルと引用の間に何か文字があれば、つまり記事本文冒頭に引用タグを置かなければ大丈夫）。
OperaやFireFoxではきちんと表示されています。
原理というより、結局手順っぽくなってしまいました。
ちなみに先日7/9より可能になったHTML編集によって３カラム化やサイドバーを記事の下にもってくるなどができるかどうかはわかりません。
ちょっと見た感じでは div タグで links2 などを入れても肝心のサイドバー自体が独自タグで１つにまとまっているのでその中身までを分割できるようには思えないのですが。。。
■追記（7/31）
7/31にJavascriptファイルを使わないで変形４カラムを実現した際に、右から２列目の幅を可変にするというのができなくなりました。
