- 2005/05/22追記
- 3カラムについて、下記のような記事を書きました。併せてご参考にしてください。
- ちょっとはマシかもしれない3カラムレイアウト(パンパでガウチョ)
- CSSについて何もわからないという方は、下記のサイトを訪れるのが一番かもしません。3カラムレイアウトのテンプレートも配布されています。
- Livedoor Blog Templaters
- 2004/10/01追記
- この記事に書かれた内容は、livedoor Blogの機能アップに伴い、陳腐化しております。
- 現時点で最良の方法は、下記の記事の「フリーエリアを利用して3カラムにする」の項を参考にするか、HTMLテンプレートを直接改変するかしてください。
- 個別記事にサイドバーを入れると問題点が(ちびログ)
サイドバーだけが異様に長くなったので、3カラムにしました。
記事が読めないほど、おかしなことにはなっていないと思いますが、もしちゃんと読めなかったらご指摘いただけるととありがたいです。
Opera7, IE6.0, NN7.1で一応見えることは確認したが、まだ少しおかしな表示をしているのかもしれません。特にFireBird等、Macユーザーでそのほかのブラウザをお使いの方は大丈夫なのでしょうか?
3カラムにするための大まかな手順は…、
- 3カラム変更用の一行だけのJavaScriptファイルを作成。
- それをアップロード。
- プラグインの設定で、JavaScriptプラグインを導入。
- JavaScriptプラグインが、ちょうど左右の境界に当たる位置になるように並べ替え。
- CSSを変更。
という手順です。
JavaScriptプラグインの導入は画像をサイドバーに入れる作業よりもむしろ楽にできます。最後のCSSの調整が一番手間がかかります。
さらに手間がかかったのはメインページ右にある"Moon Phase"のプラグインでした(今は付けていません)。一応きちんと表示するための試行錯誤を繰り返しているうちに時間がかかってしまいました。結局、提供されているHTMLタグ群を分割してJavaScriptとして読み込ませました。
さすがに、右の"MoonPhase"を始めとして、これだけJavaScriptが動いていると、ページが重いのが気がかりです(汗)
一行のJavaScript以下のとおり。
document.write('</div><div id="links2">');
これによって、現在の2カラムのサイドバー(id:"links")は、このJavaScriptプラグインの位置以降で、"links2"という新しいidのサイドバーに分割されることになります。
CSSの調整の手順を全て書くのは大変なので、以下、ポイントだけ…。また、CSSを下記に全て表示しているので、ローカルマシン上でHTMLソースと併せて見比べてみられたし。
- 両サイドバーの幅は200px前後、記事の幅は400px前後に設定するのが適当でしょう。
- 上の3つの領域のidには、"position: absolute;"を使います。あまり好ましくないけど…。
- これらの全ての幅と、"margin"を足した値をid:"container"の幅とします。
※現状は3カラムではないので、こちらを参考に…(参考ページ)
というわけで、このやり方だと、両サイドバー(id:links, links2)及び記事(id:content)の幅は完全に固定されます。
本当は、サイドバーの幅は固定するにしても、ユーザーがウィンドウサイズを変更するのに合わせて記事部分の幅は動的に変更できるようにしたいの本当のところです。
まあ、初めての試みなのと、腕が無いためにこの程度のことしかできませんでした。これでもどこか不安は残ります…。…どころか、全然ダメでしょう…(笑)
- 2005/05/01追記
- CSS未体験の領域を脱して少し分かり、意欲のある方は下記のページを参考にされるといいです。英語ですが、サンプルを見れば済みます。Hack技を使わない最後の例がお勧めです。
- ThreeColumnLayouts(css-discuss)
おお〜また変わってるぞと
楽しみにしています
わたしは HTMLさえなんぞやと
いう状態で 文字色を変えるのが
やっとわかったような
kyorecobaさんが書かれていることが
スイスイとわかるようになる
ように 勉強します
お月さんの いいですね