« 自転車ナビ | メイン | Movable Type の3カラム化できました »
2005年04月12日
3カラム化に挑戦中[ Movable Type ]
私のブログは参考書「 Movable Type 標準ハンドブック」を参考に標準で右サイドバーだったものを、左に変更しています。
この方法は、スタイルシート( styles-site.css )の
#center {
float: left;
width: 75%;
overflow: hidden;
}
という部分を
「float: right;」
と、変更したものです。
私は CSS というものをよく知らないのですが、なんとなく、今までセンター(中心→いわゆる記事本体)が左にあったものを、右側に持ってきた→それによってサイドバーが左にきた。
と、勝手に解釈しているのですが、この程度の知識で、画面の右側にもサイドバーを付けたい(いわゆる、「3カラム化」)と思っています。
いろいろ、ググってみました。
てっとり早いところでは、
PurpleMoon blog: MovableType3.xテンプレート アーカイブ
Dr.blog -ブログ研究室- MovableType テンプレート無料配布
を利用すれば、簡単に3カラム化できそうなのですが、ここは CSS というものの勉強もかねて、自己流でやってみます。
まずは、上記の3カラムテンプレートを参考にしながら、自分のスタイルシート(styles-site.css)やメインページ(index.html)をどのようにいじればいいのか見直ししてみました。
そうすると、
styles-site.cssの
#right {
float: left;
width: 24%;
background-color: #FFFFFF;
overflow: hidden;
}
という部分があるのですが、#right と定義しているにもかかわらず、 float という部分が left となっているのが気になりました。
そこで、#right を下記のように
#left {
float: left;
width: 24%;
background-color: #FFFFFF;
overflow: hidden;
}
と変更。
これによって、メインページを表示するのに使われる index.html の中の
<div id="right">
という部分が呼び出しできなくなるようなので、
<div id="left">
に変更。
そうすると、また、以前と同じように、サイドバーが左(left)、本文が右(right)に表示され、先に直した、
#center {
float: right;
#left {
float: left;
とあわせても、なんとなく、位置と文字の意味につじつまがあってきたようでよさそうです。
とりあえず、今日はここまで。
ちなみにこの記事は自分が後から、どうしようもなくなった時(^^;に復活させるために書いていますので、良い子のみんなは真似しないでくださいね。
投稿者 かっぱ : 2005年04月12日 22:52
この記事へのトラックバック
このエントリーのトラックバックURL:
http://iamk.net/cgi-bin/mt-tb.cgi/1776
トラックバックされる場合は、この記事の URL (またはリンク)も記事の中に入れていただけませんか？
トラックバックされた記事の中に当ブログの URL (またはリンク)が記載されていない場合には
勝手ながら当ブログのトラックバック表示を削除させていただくことがあります。