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

サイドのコメントやトラックバックの表示間隔の調整(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 | │├トラックバック | Trackback(2) | Comments(20)
トラックバックURL : http://potto.exblog.jp/tb/1010952
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from はい こちらサポセン。 at 2004-09-11 13:23
タイトル : 〆 スキン編集塾#4
今日は先日から引っ張っているコメント欄の圧縮法を解説します。 今回手を加えるのはCSS編集画面にあるDIV.MNBODY(真ん中へん?)とSMALLプロパティ(やや下側)の2つです。 まず初めに[by mitsu-ken at 12:00]の行を非表示にさせます。 これをするためにはSMALLプロパティにDISPLAY:NONE;を追加します。 .SMALL{DISPLAY:NONE;}DISPLAY:NONE;はもう何度もでてきていますが、(表示:なし)という意味です。 また非表示にせずに字下げ(右にインデント)表示させるには、 .SMALL{PADDING-LEF...... more
Tracked from あさっての方向 at 2005-02-24 09:22
タイトル : 自分用メモ その23 「最新の・・・」調整
サイドのコメントやトラックバックの表示間隔の調整(3列用) ぽっとの陽だまり研究室さんの記事をもとに 「最新のコメント」「最新のトラックバック」の行間を調整しました。 下記内容をCSS編集に追記 『DIV.MN TD {height:0px;}』 ... more
Commented by mitsu-ken at 2004-09-11 11:18
二列の場合は DIV.MN TD {height:5px;}ですね。
うちはだいぶ前から0pxにしてます(;^_^A
Commented by potto37 at 2004-09-11 11:44
mitsu-ken さん、そうでしたか。
mitsu-kenさんのところは2列での場合の記事を出していたんですね。
他の方にも見ていただきたいので、
よろしかったら、こちらの記事にトラバしていただいてもOKですか?
Commented by ste.chapelle at 2004-09-11 12:45
こんにちは~。
ワンコ時計やっぱりカワイイですね(^_^)v
Commented by potto37 at 2004-09-11 12:54
ste.chapelle さん、こんにちは^^
ste.chapelle さんに教えてもらって、早速設置しました。
なんか、このワンコの時計っていいですよね。
Commented by mitsu-ken at 2004-09-11 13:24
トラバしました。最後にぽっとさんへのメッセージというかリクエストを追加しておいたので、もしよかったらやってみてください。
Commented by potto37 at 2004-09-11 14:52
mitsu-ken さん、トラックバックありがとうございました。
私もトラックバックさせて頂きました。
Commented by yurimi022 at 2004-09-11 16:31
はじめまして、twodreamⅡのyurimi と言います。こちらのサイト様紹介を先にHPでしてしまい、私自身が挨拶を先にしないといけないのに 順番が逆になり失礼をしてしまいました。それに、わざわざ“〆” までしていただいて感激です。
色々な技がたくさん、それを解りやすく説明されていて、とても勉強になります。
linkさせていただきたいので、お願いできますか? また記事に関してこれから、私のサイトで紹介する場合、トラックバック トラバさせていただきたく それも お願いします。宜しくお願いします。
背景の可愛い猫 ・・・ (*・・*)ポッ
Commented by potto37 at 2004-09-11 16:57
yurimi022さん、こんにちは^^
いえいえそんなこと無いですよ、
私のサイトを紹介してもらえて、すごく嬉しいです。

是非リンクお願いします。(私も密かにリンクしちゃいました^^)
トラバでの記事の紹介もうれしいですよ。
是非、お気に入りの記事にトラバして下さいね。

これからも、よろしくお願いします。
Commented by chi-koblog at 2004-09-12 19:52
こんにちわ~(=^・^=)
使わせていただきました!
レイアウトがスッキリしました~
有難うございます♪

こちらのデザインもどんどん可愛くなりますね~
所々にネコちゃんがいてホノボノとします(=^・^=)
Commented by potto37 at 2004-09-12 21:20
chi-koblog さん、こんばんは^^
ありがとうございます。
これでスッキリしますよね

chi-koblog さんのところの猫ちゃんも
可愛いですね。
Commented by masusan2 at 2004-09-13 21:45
はじめまして!
exiteは編集が難しくて手が出ないじょうたいでした(;^_^A
3カラムにするマニュアルをお借りして↑のようなカスタマイズもやってみようと思います!
これからも時々お邪魔しますのでよろしくお願いします~m(__)m
Commented by potto37 at 2004-09-13 22:16
masusan2 さん、初めまして。
そうでしたか、3列マニュアルお役に立てると嬉しいです。
こちらこそ、よろしくお願いします。
Commented by igossomama1222 at 2004-09-16 23:01
ぽっとさん、こんばんは!
うれしいコメント有難う御座いました^^
大変 むさ苦しい所に いらしてくださって恐縮です。
前もってご連絡頂ければ、刺し盛りでも御用意致しましたものを・・・(残念

いつも、色々参考にさせて頂いているんですよ。
とっても親切に教えて下さっていますから・・・
こちらこそ、これからも よろしくお願いします。
Commented at 2004-09-16 23:10
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-09-17 20:46
igossomama1222さん、こんばんは^^
刺し盛りいいですね。

こちらこそ、これからもよろしくお願いします。
Commented at 2004-09-17 21:34
ブログの持ち主だけに見える非公開コメントです。
Commented by rin_mr at 2004-09-18 02:40
初めまして、『凛』といいます。
ぽっとさんのブログを参考にさせて頂き、
HTMLをいじってみました。
ありがとうございます!!!
どうぞ、これからもよろしくお願いします♪
リンクさせて頂きましたので、こちらもよろしくお願いします♪
Commented by potto37 at 2004-09-18 08:17
凛さん、はじめまして。
お役に立てて、嬉しいです。
こちらこそ、これからもよろしくお願いします。

リンクありがとうございます^^
Commented by cyodebusu at 2005-02-24 09:20
お邪魔します。
最新のコメントなどを表示したらえらくズラズラと長くなってしまい、
こちらの記事を参考に調整してみました。

いつも分かりやすい記事をありがとうございます。
(TBさせていただきました)
Commented by potto37 at 2005-02-25 06:05
cyodebusuさん、こんにちは^^
TBありがとうございます。

記事が長くなるとこの技も活きてくるのかもしれませんね。
これからも、よろしくお願いします。
<< 投稿欄ヘッダのグラデーション カレンダーのバックグランドにア... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。