特に深い意味はないこのblogですが、1エントリあたりの内容がほぼ固定され量も少ないので、通常のテンプレートだとスペースに無駄が多い状態でした。
そこで、メインのコンテンツを縦に2分割してエントリが2列に表示されるように変更しました。
エントリを<div>タグで囲んで、クラスをverticalにします。
スタイルシートでverticalクラスにメインコンテンツの半分の幅になるよう指定して、float:leftでエントリが左右交互に表示されるようにしました。
これだけでも、スタイルシートのpaddingの調整などが必要で手間だったのですが、重大な問題が・・・
メインコンテンツを縦に分割すると左右でエントリのコンテンツ量が異なる場合、当然各エントリの表示される高さも変わります。
左のエントリの高さが右よりも低ければ問題ありませんが、逆だった場合は次のエントリも右側に流れてしまいます。
そして、エントリを追加するたびに左右が変わりますので、エントリの高さをすべてそろえない限り、必ずどこかでデザイン的な破綻をきたしてしまいます。
これを解決するには、右側になったエントリの後だけfloatを解除する必要があります。
それをするためのプラグインがVarHandler.plというわけです。
MovableTypeに関する書籍をお書きになった藤本壱さんのサイトで紹介されています。
The blog of H.Fujimoto:変数処理を改良するプラグイン
もちろん他にも用途はいろいろあるのでしょうが、プログラムに疎い私は使い方を思いつきません。
たまたま使用例として、私の抱えている問題解決にぴったりだったので使わせていただきました。
(無題)
返信はじめまして、投稿を2列に表示出来ないものかと検索してましたら、このページにたどり着きました。
いきなりドあつかましい質問で申し訳ありませんが、くるまBLOGのようにするには何から勉強すれば構築出来るのでしょうか?
現在初級MTカスタマイズのHOWTO本等で勉強中ですがその様なカスタマイズは記載されておりませんし、ググッってもヤフっても投稿を2列というものは他に見当たりません。Orz
どうか宜しくお願いします。
のり
(無題)
返信>>1 のりさん、こんばんは。はじめまして。
エントリを2列にするのは、基本的にリンク先の藤本壱さんのプラグインを使って実現できます。
説明もそちらに詳しく掲載されてます。その説明はご覧になりましたか?
ただその内容はと言うと、初心者にも分かりやすいかどうか・・・なかなか難しいとは思います。
のりさんがどの程度までMTのことを理解されているかによって説明の仕方も変わってきますので、どこまでできて(理解して)いてどこで躓いているのか、コメントをいただけますか?
迅速な回答はできないかもしれませんが、私の分かる範囲でお答えいたします。
R34
(無題)
返信早速のお返事 恐縮です。
MTはど素人です。Xreaのサーバーにアップロードは、これまで10回程(失敗や練習の繰り返しで)全てサイトや書籍を見ながらの作業でDBはMYSQL、あとCGI設置(クイックカートやメールエントリー等)&スタイルキャッチャーでスタイルシート変更、3カラム化等は何とかサイトの説明や書籍の文面で理解できる?程度です。
タグやHTMLの知識はありません。
どう説明して良いのか判りませんが、出来る事はこれくらいです。
PS・藤本壱さんのプラグインのページはよく見ていませんでしたので今見てきましたが、理解できるまで時間がかかりそうです。
のり
(無題)
返信>>3 のりさん、遅くなってスミマセン(^ ^;
ある程度丁寧な解説が必要だと思いますので、新しくエントリを書いてそちらで説明をしようと思います。
ただ、すぐには難しいかもしれません。
なにしろ、この記事を書いたのは1年以上前なので、あまり記憶に無いんです。
多用するテクニックでもありませんし・・・
基本的な流れとしてはVarHandlerプラグインで奇数番目と偶数番目のエントリが分かるように、つまりMTが吐き出すソースに反映されるようにします。
次に、スタイルシートを編集してメインエリア(コンテンツエリア)に2つのエントリが並ぶように調整します。
つまりテンプレートとスタイルシートの両方で実現するテクニックということです。
R34