エントリ一覧をテーブル表示

[たまひよ]

はじめまして、たまひよと申します。


ウェブアルバムのようなものを作りたいのですが、
エントリ一覧をテーブルに入れて表示する方法が分かりません。
サムネイルを5×5のテーブルに入れて、
1ページに25づつ表示するようにしたいのです。
何かよい方法はありませんでしょうか？

[webmaster]

　webmasterです。

　申し訳ありません、エントリ一覧をテーブルに入れる為の簡単な方法は、
まだ存在しません。m(_ _)m

　xsltの上級者であれば、いろいろテクニックを使って実現可能だと思いますが、
なかなか難しいかと思います。

　今のところは、CSSを使ってテーブルのようなレイアウトを実現する方法
が現実的な解決方法かと思います。

　サンプルのHTMLを作成しましたので、ご参考までにどうぞ。
　http://cms.al-design.jp/downloads/sample/tablecss.html

　<div class="cellcontainer"> 〜 </div>

　というdivタグの中にセルとなる<div class="cell">を入れています。
　また、ここでは3列にする為、cellが3つ現れたら<br clear="all" />を
入れています。　

　3つごとに<br clear="all" />を入れるためのデザイン定義は、

　<xsl:if test="(position() mod 3)=0"><br clear="all" /></xsl:if>

　でOKです。
　（position()は、今何個目のエントリかを表します。modは剰余を求める
命令です。つまりエントリが3の倍数番目の場合のみこのifは実行
されます）

　この例では分かりやすくする為にセルに背景色を指定していますが、見て
お分かりのように、各セルの高さがセル内のコンテンツ量に応じて
変わりますので、見た目があまり好ましくないかもしれません。
　cellにheightを指定するのも手ですが、もしそのheightを超える
内容のコンテンツをセル内に配置した場合、IE以外ではレイアウトが
崩れます。

　尚、ご存知の方も多いとは思いますが、IEでは基本的にCSSのwidth
はそのまま「width=ブロックの幅」であるのに大して、他のブラウザでは
「width=ブロックの幅-padding-borderの太さ 」として計算されます。

　よって、同じブロックのCSSに対してwidthとborder、paddingを同時に
指定すると、ブラウザによって幅が変わってしまいます。

　この現象に影響されないように、一般的には「widthを指定したブロック
には同時にborderやpaddingは指定しない」ようにするのが楽です。

p.s.
　現在、エントリをn×nのグリッド上に配置する為の機能を実装中です。