ここでは元々2カラム(2列表示)のテンプレを3カラム化する方法を書いたものです。新しく追加された3カラムテンプレに関する質問にはお答えできませんのでご了承ください。
また、以下の手順はライブドアブログの新環境移行前での手順です。テーマの選択方法やlinks、links2をleft、rightにするなど様々な変更があるので以下の方法は新環境後ではそのままでは使えません。新環境移行後の2カラムデザインの3カラム化の方法を記事にする予定はいまのところありません。考え方としては以下のものと同じだと思います。


【LOVELOGユーザー方へ】:05/12/10
LOVELOGでも基本的には同じ要領でできますが、URLなどはもちろLOVELOG仕様のものに置き換えて読んでください。また、LOVELOG絡みに関する質問にはお答えできませんのでご了承ください。


【お知らせ:2005/7/14】
病気療養中につき、質問に対するコメントが遅れることがありますのでご了承ください。


※現在のトップページは幅が固定されています。以下の内容は可変です。また、左右にカラムをわける部分にはHTML編集を利用する方法もありますが、以下の手順は右と左の間にフリースペースを利用してタグを挿入するやり方です。

livedoorBlogに用意してあるテーマ(デザイン)を元に3カラムにする手順を画像つきでつくりました。2004/1/6に作成したものは、その後追記を重ねわかりずらくなってしまったので、整理しました(2004/3/13) 。
これで実現するのは
・3カラムになる
・真ん中のカラムは可変で幅が変わる
・両サイドの幅は各自で変えられる(固定幅)
・Mac版IEでも表示がくずれない


◆手順
「Blogの設定/管理」タブをクリックし、左側にある「デザインの設定」をクリックします。
まず3カラム化の元にしたいデザインテーマを決めます。各テーマには名前がついています。たとえば「スタンダード」の「citrus」などのテーマ名を覚えておいてください。ただし絵の下にあるテーマ名が日本語、たとえばジャンル「イラスト」にある「草原」などのテーマ名は「greenfield」になります。テーマの絵の上にマウスカーソルを当てると
javascript:subWin('/html/greenfield.html');
と出ますが、そのhtmlと書いてある前の部分を参考にしてください。

「ジャンル一覧」選択画面に戻り、「スタンダード」を選択し、その中の「CUSTOM」という絵のところをクリックします。
「テーマの設定」画面で「テーマの読み込み」から元にしたいテーマ名(先ほど覚えておいた半角ローマ字のもの)を選択し、「読む込む」ボタンを押します。

読み込まれたスタイルシートの全体を選択(Ctrl+A)して、メモ帳などのエディタにコピーします。


適当な場所に下の枠のように「#countainer」を挿入します(選択したテーマによってははじめから #countainer があるものもあります。その場合はそれは削除して下のものに差し替えてください)。


※コピペ用


「#content」の position を relative に、「#links」の position を absolute にします。
「#links」をコピーして「#links2」をつくります(「#links2」の position も absolute です)。


margin や padding(左から上、右、下、左)を書きます。
「#links」や「#links2」のwidthで指定したpx値がその幅で固定されます(この数値は各自の好きな幅に調整してください)。
「#links」の「left:0px;」で左に、「#links2」の「right: 5px;」で右にサイドバーが両端にくっつき、それぞれの「top:117px」でトップからの位置を決めます。この数値も各自のサイトに合わせるよう調整してください。

※コピペ用(元の#contentや#linksと入れ替えてください)


編集したスタイルシート全体をコピーし、「テーマの設定」画面に貼り付けて(元のものと置き換える)
「保存する」ボタンを押します。スタイルシートの編集はここまでです。

<続きは2通りのやり方がありますが、以下はフリーエリアを利用した方法です。PROユーザーがFTPを使ってJavascriptをアップする方法は下の注意★4へ>
「Blogの設定/管理」から「プラグインの設定」をクリックします。
画面下の「プラグインのクイック追加」で「プラグインの種類」のところで「フリーエリア」を選択し、タイトルには適当なものをつけて(ここでは「おすすめ」とします)、「追加する」ボタンを押します。
変わった画面で
</div></div><div id="links2"><div>
を入力します。(なぜこのような記述になるのかは「BaySky eNOTE」さんの記事を参照してください)
それだけだとタイトルだけで何もないところになってしまうので、何か適当なバナーなり文章なりリンクをそのタグの前につけておけば、見た目が整います。


<設置後のイメージ>


追加したプラグインが左サイドバーのいちばん下になっている。次のコンテンツは右サイドバー側にある。

<★4戻り位置>

「プラグインの設定」で追加されたプラグインの並び順を変えます。
先ほど追加したプラグインを左カラムの最後に来るように番号をつけて、右カラムに来るものを続けて番号をつけます。
「並び替え/タイトルを変更する」ボタンを押します(下の絵は並び変わった後のもの)。


「Blogの再構築」で「全ページ」を選択し、「再構築する」をクリックします。
これで3カラムになります。

表示確認:Windows2000 Internet Explorer 6.0、Opera 7.23
OSX(10.3.2)のIE5.2.3、OSX起動のClassic環境(OS9.2.2)IE5.1.5および5.0
Mozilla Firefox 0.8(Win)

◆注意◆
★1:個別記事や月別アーカイブなども3カラム化したい場合
上のやり方だけではトップページしか3カラムになりません。
個別記事なども3カラム化したい場合は、「地獄変OO」さんの以下の記事が参考になります。
livedoorBlogで個別記事にサイドバー〜HTMLいじりバージョン〜

★2:「3カラムにしたら画像が消えた」とか「他のテンプレを当てはめたら画像が消えた」という場合、
blogbodyクラスで
 BACKGROUND-COLOR: #ffffff
などを指定していたら、jpeg画像が消えてしまったように見えます。

CSSに以下の記述を入れたら出ると思います。

DIV.main IMG{
position: relative; z-index: 1;
}

サイドバーの画像が消えた場合は
DIV.side IMG{
position: relative; z-index: 1;
}

★3:テーマのデザイン「flower_message」など、画面全体が絵の枠で囲まれている場合
上記の方法はウィンドウの枠幅を変えると真ん中のカラムも動的に変化しますが、枠などの絵が背景として使用されているデザインの場合は、ウィンドウの枠の幅を変えても各カラムの幅は変わらないほうがレイアウトが崩れないのでいいと思います。
その場合のやり方の一例をこちらに用意しました。
この方法はNetFront3.1(Clie PEG-TH55添付のBrowser)で見る場合にも、カラム幅が可変だと右サイドバーが左に寄ってしまうのを固定化する意味で有効であることが確認されました。
(「ぱぱの背中」さんより問題発生解決


★4:3カラム化をJavascriptファイルを利用して実現する場合
新たにメモ帳を起動して
document.write('</div><div id="links2">');
一行だけを書いて、拡張子を「.js」にして適当な名前で保存します。(ワードパッドのリッチテキスト形式はだめです)
「拡張子を「.js」にして保存」というのは、たとえばメモ帳でいえば、メニューから「ファイル-名前をつけて保存」で開いた画面の「ファイル名」のところに「*.txt」とありますが、それを「3column.js」などに書き換えて保存すればOKです。

ファイルをFTPツールを使ってアップロードします。

「プラグインの設定」の「新規プラグインの追加」から「プラグインの種類」で「Javascript」を選択します。
適当な名前をつけて「追加する」ボタンを押します。

URL欄に自分がアップロードしたファイルを示すhttpで始まるフルパスを貼り付けて「設定する」ボタンを押します。
<続きは「★4戻り位置」へ>

★5:redframe、blackframe、greenframe、blueframeで3カラム化する場合
こちらの記事を参考にしてください。幅固定で個別記事にもサイドバー表示となります。

※参考記事
■Javascriptを使って3カラムを実現する方法(いちばんの元参考記事)
「パンパでガウチョ」さんの記事
■真ん中のカラムを動的にする方法
「smokin'」さんの記事
■Mac版IE対策
こちらの記事のコメントにあるkaminogoyaさんの記述内容をベースに、不都合な部分をsmokin'さんの記事を参考にしました。
■「フリーメモ」プラグインを利用して3カラムにする方法
「BaySky eNOTE」さんの記事

※付記
整理する前の元の記事(2004/1/6)はひっそりとこちらにしまっておきます。

下にあるトラックバック数が多くなったので一部をトラックバック移動リスト(05/6/5現在:460件を移動)に移しました。
下にあるコメント数が多くなったのでQ&Aで対になっているものは残し、それも含めたすべてをこちらに移しました。