以前、３カラム画面に変更というエントリーを上げましたが、そのやり方については全然記していなかったですよね。
僕の拙い説明より、紹介させてもらった書籍を買っていただくか、あるいは他のサイトへ飛んでいただいた方がてっとり早いと思ったからなのですが、アクセス解析をしてると『３カラム』関係で検索してくる方がいらっしゃいます。
そんな方はたぶんその方法を知りたくて検索し、訪問してくれているのだと思うのです。そう推測すると、説明が上手いかどうかはともかく、一応自分の方法を記しておいた方が良いんじゃないかと思いました。
ただしそれが良い方法かどうかというのには自信がありません。ですからあくまで参考程度に思っていただければ幸いです。
まず大前提としてCSS（スタイルシート）を変更するわけですが、それはMovable Typeのプラットフォームでテンプレートをクリックすれば、お目当てのファイルが【スタイルシート styles-site.css】という名前で表示されています。そこで大まかにやることは以下の通りです。
たぶん標準のスタイルシートではタイトルバーの下に#centerと#rightでfloatの設定でleftが指定されて、#centerが左側、#rightがその右側にくるようになっていると思います。
- 新しいカラムのために #left-side {float: left;width: 170px;・・・}というようなスタイルを書込みます。（例として170px幅の指定をしています。）
- それから既存のスタイルの変更が必要です。まず全体の幅を変更してあげなければなりません。
- #centerが500px、#rightが170pxの幅で指定していたとすると#containerという設定で幅が670pxで指定されている筈です。
- ですから#containerの幅指定を、新たに追加する#left-sideの幅分170pxを足して840pxに変えてあげなければなりません。
- 僕の場合は#blog の設定でも幅指定をしているので、それも同じように840pxに変更します。
これでスタイルシートの変更は終了です。保存をして再構築をします。
次に３カラムに変更したいページに変更を加えます。ここではメインページに変更を加えるものとして話を進めます。
- メインページの#centerの後、あるいは前でも良いですが、<div id="left-side">・・・</div>という項目を付け加えます。
- 邪魔臭ければ#rightのものをコピー&ペーストして、後から不必要な部品だけ削除してもよいと思います。
これで保存し、また再構築をすればオーケーです。要するに、#containerの中に#left-side、#center、#rightが乗っているということなので、#containerの幅も変えてやるというのが注意点だと思います。
当然、<div id="left-side">・・・</div>を挿入するところは、#centerの後なら<div id="ceter">・・・</div>の後でなければなりません。
やってみれば何のことは無い簡単なことなのですが、僕もそうでしたが、最初はおっかなびっくりでした。でも思った通りに表示できると、これが中々嬉しいものなのですね。
コメントする