Movable Typeの3カラム化（一応完了）
users
夏休みのブログ宿題のメインテーマ、それがMovable Typeの3カラム化です。
3カラムといっても一般的な記事の左右にサイドバーがあるタイプではなく、右側にサイドバーを2列並べる方式。すばらしいデザイン例と言えばやはりここを置いて他にはないでしょう。
[N]ネタフル
http://netafull.net/
左右にサイドバーがあると目のやり場が難しいというか、サイドバーはあくまでオマケで、「このブログのほかの記事読みたい」「このブログツールなんだろう」という用途がメインだと思います。一番の目的はやはり文字を読んでいただくことだと思うので、記事を読みやすい一番左に持っていって、サイドバーは右にまとめちゃいたいなと。
というわけで今回お世話になったのは、以前にBerkeleyDBからMySQLへ移行する時にも非常に参考にさせていただいたMovableType幼稚園です。
MovableType幼稚園: MT3.2を３カラムにする
http://syoboi.com/movabletype/000025.html
まずはMovable TypeのHTMLページからカラムに関する記述を書き換え。うちはすでに2カラムにしていたので、
<body class="layout-three-column">
を
<body class="layout-three-column">
に変更します。
お次は3カラムにするため、もう1つのカラムを作ってあげることが必要に。Movable Typeのカラム要素は「alpha」「beta」「gamma」で管理されています。2カラムの時は「beta」までしかないので、新たにgamma」を作ってあげなければいけない。
一番カンタンなのはもともとサイドバーになっているであろう「beta」をコピって「gamma」に書き換え、それをbetaの下にいれてあげればいい。このあたりの細かい設定は上記のMovable Type幼稚園が詳しいのでそちらをご参照くださいませ。
これだけで3.2以降のMovable Typeなら3カラムにできますが、むしろ問題はこの次。このままだといわゆる3ペイン構成、つまり両側にサイドバーがあるデザインになってしまうので、今まで2カラムだった人はデザインがおかしくなります。2カラムも1カラムも、一番左の「alpha」がエントリー表示部分だったのですが、3カラムでは一番左の「alpha」はサイドバー扱いになってしまうため、文字が大変せまくるしいことに……。
というわけでalphaの部分を少し大きめにすることに。この設定はMovable Type用にカスタマイズされたCSSであれば、下のほうにカラムごとのデザインがあると思います。3カラムの場合は
/* three-column tweaks */
という記述の部分。ここで「alpha」「beta」「gamma」のwidth設定をいじり、alphaを広げてあげればとりあえずエントリー部分を広くできます。
という作業が終わったのが今の段階。でも未だに一番右の「gamma」カラムが位置的におかしいのが直せない。これどうやらalphaの中の入れ子状態になってるっぽいんだよなあ。宿題はまだまだ続く感じです。
※すみません、単にHTMLで<div id="gamma">と<div id="gamma-inner" class="pkg">の前に全角スペースが入っていたことが理由でした……。なんで全角なんか入ってるんだ……。ブログの王子さまにご指摘いただいて修正いたしました。
デザイン的にもかなりごちゃごちゃしているので、右にサイドバー2つって結構難しいかも。やはりアルファブロガー恐るべしというところでしょうか。技術的にやり方覚えたら結局2カラムに戻しちゃうかもしれません。
