サポート » 使い方全般 » テーブル?画像?Twenty Tenのサイドバーのマージン設定

  • WordPressインストール直後のTwenty Tenをカスタマイズしています。
    サイドバーに配置したテーブル(列は1列、行は複数)の各セルに画像を配置していますが、画像の下に5pxくらいのスペースが空きます。これをなくしたいのですが・・ちなみにテーブルのセル間隔・マージンは全て0pxにしています。CSSを色々いじってみましたがどこか検討付きません。
    どなたか教えていただけますでしょうか?
    宜しくお願いします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • 雲をつかむような話です。
    純粋なTwenty Tenなら少しは想像つきますが、カスタマイズ後なんて、実物を見せてもらわない限り、その情報だけでは不可能だと思ったほうが良いでしょう。

    トピック投稿者 argojp

    (@argojp)

    純粋なTwenty Tenとお考え頂きご教授頂けませんでしょうか?
    カスタマイズといっても原型とほとんど変わっていません。。

    いやいや、テーブルを配置してetc…
    となっているんですよね?

    たとえば、

    丸腰のTwentyTenのサイドバーに<img src=”******” />と記入したら空白があいちゃいました

    ということなら誰か試してくれると思いますが、じゃないとわからないでしょう。

    ほとんど変わってない、ということは少しは変わってるんですよね?
    ということは、想像で「これならどうでしょう?」「では、これは?」とあてずっぽうでいろいろ申し上げることしかできないし、多くの人はそんなこと嫌うでしょう。

    ということで、想像です。
    line-height: 18px;
    となっていますので、テーブルの前後をline-height: 1のボックスかなにかで囲ってあげるとか、そんな感じでいけるんじゃないですかね?

    繰り返しますが、どんなソースコードになってるかさっぱりわからないので、これが限界です。

    トピック投稿者 argojp

    (@argojp)

    申し訳ございません。とても丁寧にご指摘頂きまして有難うございます。
    テーブルを使わず画像を
    タグで改行しても同じ現象が起きましたのでテーブルは一切関係ないようです。
    ちなみにIEではスペースは空かないのですがクロームとFireFoxでは症状があらわれます。
    (IEは互換表示なのかもしれませんが・・)

    トピック投稿者 argojp

    (@argojp)

    すみません。テーブルを使わず画像を タグで改行しても・・のくだりですがBRタグです。

    まあ、とりあえず、FireFoxでFirebug使ってどのCSSが影響してるか調べてみましょうよ;)

    いやだから、line-heightはどうだったかな?と

    まぁ、そういう感じになってしまいますので、見せられないような状態でしたら誰にもわからないっていうことになっちゃいますね。

    追伸:
    shokunさんのアドバイスを拡張しまして。
    firebug、safariの開発者モード、ie9の同機能などで解析できると思いますけど。

    トピック投稿者 argojp

    (@argojp)

    見せれない訳ではございません。Firebugを使って調べたところCSSは以下が関連しているとのことで出てきました。

    a img {
        border: medium none;
    }
    style.css (54 行目)
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        border: 0 none;
        margin: 0;
        padding: 0;
    }
    style.css (15 行目)
    継承元a discussion/
    .widget-area a:active, .widget-area a:hover {
        text-decoration: underline;
    }
    style.css (1316 行目)
    .widget-area a:link, .widget-area a:visited {
        text-decoration: none;
    }
    style.css (1312 行目)
    a:active, a:hover {
        color: #FF4B33;
    }
    style.css (319 行目)
    a:link {
        color: #EE0000;
    }
    style.css (313 行目)
    継承元table
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    style.css (50 行目)
    継承元ul.xoxo
    .widget-area ul {
        list-style: none outside none;
    }
    style.css (1291 行目)
    ul {
        list-style: square outside none;
    }
    style.css (223 行目)
    ol, ul {
        list-style: none outside none;
    }
    style.css (36 行目)
    継承元body.page
    body, input, textarea {
        color: #444444;
        font-size: 13px;
        line-height: 18px;
    }
    style.css (204 行目)
    body, input, textarea, .page-title span, .pingback a.url {
        font-family: "MS UI Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Osaka",sans-serif;
    }
    style.css (111 行目)
    body {
        line-height: 1;
    }

    ちなみに画像はBRで改行かけているだけで特別なことはしていません。
    ここから何か判りますでしょうか?

    そこまでできたのであれば、Firebug上で該当cssを一文ずつペケマーク(一方通行マークみたいなマークがつきます)していけば、影響しているCSSが分かると思いますよ。
    さしあたってkvexさんの指摘しているline-heightあたりを止めてみればどうかな?

    ブラウザ上だけでCSSの適用状態が見れるFirebugなどをもっと活用してみましょう;)

    トピック投稿者 argojp

    (@argojp)

    shokun0803さん有難うございます。kvexさんの指摘しているline-heightを止めました所、隙間は大分小さくなりましたがそれでも2~3pxぐらいの隙間ができるようです。その他ペケマークにしていっているのですが、変わりません。。
    Firebug便利ですね。すごく勉強になりました。
    お二方ともに大変感謝致します。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「テーブル?画像?Twenty Tenのサイドバーのマージン設定」には新たに返信することはできません。