TopHP作成 > MovableType> 隠居、MTにセル数の多いテーブル設置にてこづる

2006年7月24日

隠居、MTにセル数の多いテーブル設置にてこづる

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

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/747

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)