« 3カラム化に挑戦中 | メイン | コンタクトレンズ再購入 »
2005年04月13日
Movable Type の3カラム化できました[ Movable Type ]
昨日は、メインページのタグをそのまま記事に貼り付けてしまったために、記事にその内容が表示されていませんでした。(今朝、気づいて、早速訂正しました)
引き続き、スタイルシートとメインページのタグ？研究です。
#center {
float: right;
width: 75%;
overflow: hidden;
}
#left {
float: left;
width: 24%;
background-color: #FFFFFF;
overflow: hidden;
}
今現在、上記の width 設定です。
が、今度、 #right を追加するのにあたって、 #center の width を50%に、 #right は #left の設定を参考に width を24%にしてみます。
また、 #right は文字通り、画面の右側に置く設定としたいので、 float も rigth で設定。
変更後の設定を下記のようにして、スタイルシートを変更。
#center {
float: right;
width: 50%;
overflow: hidden;
}
以下は、 #left の後に、挿入。
#right {
float: right;
width: 24%;
background-color: #FFFFFF;
overflow: hidden;
}
とりあえず、ここまでの変更したスタイルシートをテンプレートに書き換えてみました。
すると、左サイドバー、記事本文、空白としたかったのですが、なぜか表示されたのは左サイドバー、空白、記事本文というような状況に。
とりあえず、状況を把握するために、続いて、メインページ(index.html)の編集。
今回は右サイドバーにアフィリエイト用の広告欄を設けたいと思っていたので、左サイドバーから必要な部分、つまり
<div id="left">
<div class="sidebar">
以下をコピーし
</div>
</div>
以下に貼り付け。
なお、今回は右サイドバーの設定なので、先ほどスタイルシートで設定した、 #right 以下を使うために、貼り付けした、
<div id="left">
を
<div id="right">
に変更。
ここまでをメインページのテンプレートに貼り付け。保存、再構築。
しかし、先ほどと同じように、左サイドバー、(右サイドバーとしたつもりの)サイドバー、記事という順序で表示されています。
どうも、さきほどのスタイルシート。 float という所の考え方が違っているような気がします。
そこで、再度スタイルシートの訂正。
一番最初に参考書「 Movable Type 標準ハンドブック」で、右サイドバーだったのを左サイドバーに変更するのに使った
#center {
float: right;
width: 75%;
overflow: hidden;
}
という設定を再度、元の
「float: left;」
に変更して、スタイルシートを保存。テンプレートを再構築。サイトの確認。
ｷﾀ━━━━ヽ(☆∀☆ )ﾉ━━━━!!!!
とおもったら、本文、左サイドバー、(右サイドバーにしようとしている)サイドバーの順序。 (((´･ω･`)ｶｯｸﾝ…
目的地まで近くなったような遠くなったような…。
とりあえず、初心に戻って、スタイルシートの設定を見直し。
#center {
float: right;
#left {
float: left;
#right {
float: right;
を
#center {
float: right;
#left {
float: right;
#right {
float: right;
にしてみます。
すると、(右サイドバーにしたかった)サイドバー、左サイドバー、記事という順序。(順序が微妙に変わってきてます)
では、
#center {
float: right;
#left {
float: right;
#right {
float: left;
そうしても、順序は(右サイドバーにしたかった)サイドバー、左サイドバー、記事という順序。
とりあえず、右サイドバーにしたいものの位置だけがうまくいってないんです。これをなんとかしたい。
(~ヘ~;)ウーン、ギブアップ。
PurpleMoon blog: MovableType3.xテンプレート アーカイブ
上記から、3カラムとスタンダード(2カラム)のテンプレートのをダウンロード。まずは CSS を見る。
それをみると、3カラムにしたとしても、 #left といった定義付けはしていない。
よって、当ブログもそれを踏襲(単なる、真似とも言います(^^;)
#left
の定義をスタイルシートから削除。
そして、
#right の float を left に戻します。
#left の定義をスタイルシートから削除したため、メインページ( index.html )の中で #left を呼び出していた部分を、再度 #right に戻し、保存、再構築。
以上により、メインページは左サイドバー、(右用サイドバーにしたかった)サイドバー、記事という順序になりました。
では、上記の3カラムテンプレートはいったいどうやって、右用サイドバーを記事の右側に表示させているのでしょうか？
解決のヒントは、メインページ( index.html )の中の
<div id="center">
<div id="right">
<div class="sidebar">
の位置関係にありました。
上記、3カラムテンプレートをよく見てみますと、
左サイドバー用のタグ
<div id="right">
<div class="sidebar">
記事用のタグ
<div id="center">
右サイドバー用のタグ
<div id="right">
<div class="sidebar">
という、記載の仕方をしていたのです。
さっそく、それにあうように、当ブログのメインページテンプレートを変更。
いざ！！
と、やってみたものの、順番がやっぱりダメ。
(´･ω･`)ｼｮﾎﾞｰﾝ
もしかして、「サイトの再構築」と思ってやってみたのですが、これもダメ。
ｼｮﾎﾞｰﾝ━━(´･ω･`)━━
もういちど、お手本の CSS を見てみると、
#center {
float: left;
となっている！！
私は、当初右サイドバーだったものを左サイドバーにするために参考書「 Movable Type 標準ハンドブック」に従って、
#center {
float: right;
にしていたのでした。
ここを
float: left;
に変更。
ドキドキしながら、スタイルシートの編集、保存、再構築。
ついにｷﾀ━━━━ヽ(＾∀＾ )ﾉ━━━━!!!!。
3カラム化成功です。
ワーイ＼(^o＾))／…＼((＾0^)／ワーイ
あとは、徐々に、右サイドバーと左サイドバーの項目を見直しです。
とりあえず、今日はここまでです。
投稿者 かっぱ : 2005年04月13日 22:29
この記事へのトラックバック
このエントリーのトラックバックURL:
http://iamk.net/cgi-bin/mt-tb.cgi/1777
トラックバックされる場合は、この記事の URL (またはリンク)も記事の中に入れていただけませんか？
トラックバックされた記事の中に当ブログの URL (またはリンク)が記載されていない場合には
勝手ながら当ブログのトラックバック表示を削除させていただくことがあります。