隠居、MTにセル数の多いテーブル設置にてこづる
Litebox-1.0で写真をグループ化して登録できるようになったので、DIY作品の写真をテーブルのセルに納めその列の下行に解説や関連するエントリーなどへのリンク先を記載したエントリーを投稿した。このエントリーを編集したときに、遭遇した問題を備忘録として書いておこうと思う。
まず、「小粋空間」さんが、エントリーで table タグを記述する場合の注意で書かれているように、書き出しの文書とテーブルの間に大きな余白が生じる問題が起こった。困ったときのヘルプは「小粋空間」さんにしているので、すぐにこのエントリーが見つかった。ただ、「小粋空間」さんがアドバイスされている方法ではうまくいかなかった（多分私が早とちりしていると思うが）ので、そのエントリーに紹介されている藤本壱さんの「改行を変換する」を改良するプラグインを導入した。この問題はこれで解決した。
次に、セルの列幅を均一にする方法である。これは単純にタグ ｔｄ のwidthプロパティを100ｐｘで設定した。サムネイルの写真の幅を100ｐｘと設定しているのでこれに合わせた。行幅はディフォールトで auto になっているようで、それぞれの行の最大値に合わせてくれる。
セル内の字体はいままでセルが少なかったときは、「小粋空間」のテンプレート用CSSのクラス .entry を使ってきた。これでは字体が大きいし（14ｐｘとしている）、行間（150%）も広すぎる。そこで、新しいクラス .entrytbl を作り大きさ11ｐｘ、行の高さを120%に変更した。
次にセルの枠線を変えたかったのと、テキストの縦位置を top から始めたかった。また、文字が枠線にくっつくと見栄えがよくないので少し隙間を開けたかった。ディフォールトで右枠との間隔は開いているが、どこで設定しているのかよく分からない。 td の padding をいじれば望む隙間が得られそうだったので、CSSで td の枠線と padding を設定すると上手くいった。また、縦位置は vertical-align を top にすることで解決した。他のテーブルに影響がでるが、セルの少ないテーブルでは大丈夫のようである。
経験的に言えば、このようにセルの多いテーブルをエントリーするときはHP作成ソフト（私の場合、DreamWeaver MX）でテーブルで作成し、そのHTMLコードソース（body部分）をコピペし、エントリーの中で修正すると少しは時間の節約になると思う。 ただ、CanonとかNikon、Lumixなどのようなデジカメ・メーカーが無償でそれぞれ album 編集を提供しているので、それらを利用する方がはるかに簡便である。私の場合、 Litebox-1.0 の洒落た画像表示を使いたかったのとコメントにリンクを張りたかったので自作してみた。拙くとも、DIYがいいと私は思ってる。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)