<< 投稿欄ヘッダのグラデーション カレンダーのバックグランドにア... >>
 

サイドのコメントやトラックバックの表示間隔の調整(3列用)

”最新のトラックバック”や”最新のコメント”の表示の各部分の隙間が広すぎる気がしたのでソースを見てみました。
その結果、<TD height=10>で強制的に間隔を10あけていることが分かりました。
そこで、この間隔を少し狭くする方法を説明します。
なお、この記事は3列用です。
設置方法だけを知りたい方はCSS設置例を見てください。



a0031863_644229.jpga0031863_6443558.jpg















図1 設置前後の比較



コメント欄のソースを見てみる

この部分はソースを見ているところです。興味のある方が見てくださいね。




<DIV class=MNTTL_R>最新のコメント</DIV>
<DIV class=MN_R>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><A href="#">おはようございます..</A></TD></TR>
<TR>
<TD class=SMALL>by potto37 at 07:20</TD></TR>
<TR>
<TD height=10></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 border=0>
図2 ソースを見てみる



CSS設置例

私は左側に”最新のトラックバック”を、右側に”最新のコメント”を表示しています。
左側が、DIV.MN_L 右側がDIV.MN_Rに相当しますので、両方のTRの高さを10から半分の5PXに変更しました。以下のコードをCSS編集の最後などに追加して下さい。
変更量はお好きな量を指定してくださいね。




DIV.MN_L TD {height:5px;}
DIV.MN_R TD {height:5px;}
図3 CSS編集部分



今日のポイント
  • exciteのスキンの構造はめざせマイスキンを運営しているtomoさんの記事が非常に分かりやすいです。

  • 今回の技は状況依存セレクタを用いています、
    状況依存セレクタとは、そのスタイルが設定されている状況に応じてスタイルを適応する便利な技です。
    今回のケースで説明しますと、DIV.MN_L つまり、<div class="MN_L">~</DIV>で囲まれている間の TDタグだけにスタイルを指定できます。
    他の場所のTDタグには影響しません。

    DIV.MN_L TD {height:5px;}



難易度:★

ぽっと


CopyRight(C) 2004 All rights reserved by potto37



追記 2004年9月11日 14:26
はい こちらサポセン。を運営しているken2さんのところで2列用のコメント欄の圧縮法を紹介しています。よろしかったらトラックバックをご覧下さい。
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-11 06:26 | │├トラックバック
<< 投稿欄ヘッダのグラデーション カレンダーのバックグランドにア... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。