Movable Typeデザインカスタマイズレッスン2日目

すいません。しばらく間があいてしまって2日目の開講です。
その間、ちょっとした不具合や色々ありまして(デザインやカスタマイズとプライベートともにw)、ようやく再開です。今日はFirefox3もリリースされましたし。

さて、今日は大まかな枠組みを切り替えていくことにチャレンジしたいと思います。
現在はこんな形です。

これを現在のこのムジログのように左を本文部分の大きなエリア(500px)、小エリア(160px)、中エリア(243px)という形に切り替えていきたいと思います。


まず、MT管理画面よりテンプレートへ移動しますが、seesaaとはまた違って、いっぱいパーツにわかれてテンプレートが存在しているような気がします(このレベルからのカスタマイズチャレンジなんです!)。
現在のメインページの様子を見てみましょう。
ざっと構造がどのようになっているか読み込んでいきます。
また、ざっとブログ自体を表示してそのソースを眺めてどんな形で作られているのか眺めてみます。

1.HTMLでどういう順序で組み立てられているか確認する。

画面表示がこうなっていますが、ここで表示されている内容とHTMLのソースを眺めて比べてみると、
(HTMLの頭のほうから)ヘッダー→左カラム→中央(本文)カラム→右カラム→フッター
となっているのが感じ取られます(スゴイ感性ダナー)。
というわけで、なんとなくHTMLの構造も
ヘッダー→中央(本文)カラム→左カラム→右カラム→フッター
といった感じで書き変えてみたほうがよさそうな予感がします(予感ですw)

2.テンプレートのメインページから着手する
MT管理画面からまずメインとなりそうなメインページを開きます。
ざっとHTMLソースとこのMTのタグが使われたソースとどことどこが一致しそうな予想を立てます(また予想かよw)

想像の域ですが、「###1 column footer###」という部分はなんとなくコメントのような気がします。
そして「MTIgnore」が「無視しろっ」て言われているような気がするので、きっとこの部分はMTでは無視されるんだろうな、と仮説を立てて、調べてみます。
「MTIgnore」で検索!

小粋空間: MTIgnore タグ

フムフム。予想通りカナ。
というわけで、さくっとここは無駄な部分と解釈し削除!
(一応削除しても影響がないことを再構築して確認しました)

次に、HTMLの順番を整えるために、ちょっと上のほうで書いた
ヘッダー→中央(本文)カラム→左カラム→右カラム→フッター
という順番に書き変えてみます。

まずは現状を確認してどうなっているか確認してみます。すると「サイドバー」が二種類あるようですので、HTMLソースでみたように「左カラム→中央(本文)カラム→右カラム」となっていることを考えればそれぞれのサイドバーが左か右か妄想想像できます。

<$MTInclude module="サイドバー2"$> ←きっと左カラムのことでしょう!

<div id="content">
<div class="blog">

<MTEntries>
   <$MTEntryTrackbackData$>
   <$MTInclude module="ブログ記事の概要"$> ←この辺が中央(本文)カラムのことでしょう!
</MTEntries>

</div>
</div>

<$MTInclude module="サイドバー"$> ←きっと右カラムのことでしょう!

というわけで、ざっとタグを入れ替えます。

<div id="content">
<div class="blog">

<MTEntries>
   <$MTEntryTrackbackData$>
   <$MTInclude module="ブログ記事の概要"$>
</MTEntries>

</div>

</div>
<$MTInclude module="サイドバー2"$>
<$MTInclude module="サイドバー"$>

これで保存して再構築!
見事入れ替わりました。

中央(本文)カラム→左カラム→右カラム
という順番に並んでいます。
これで、レイアウトはOKなので、次回はサイズの調整に入っていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です