テーブルタグの枠線を消すには

Simplicityの特徴 フォーラム Simplicityについての質問 テーブルタグの枠線を消すには

  • このトピックには4件の返信、2人の参加者があり、最後にadmkaiにより8年、 3ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #35498
      admkai
      ゲスト

      はじめまして。

      まだ初心者ですが、Simplicityを使わせて頂いています。

      テーブルタグの枠の線を消すにはどのようにすれば良いでしょうか?

      ネットで色々調べ、<td style=”border-style:none;”> <table border=”0″> 
      等を試しましたが、反映されません。

      出来れば、CSSの記述にて対応できそうなものが希望です。

      はじめての質問で失礼などありましたらすみません。

      宜しくお願い致します。

    • #35503
      Hidekichi
      ゲスト

      tableのどこかにもよりますが、

      .article td,
      .article th {
        border: 1px solid transparent;
      }

      この場合、ボーダーの1pxの幅を確保しつつ、色を透過することで線を消します。
      1pxの幅も縮めて良いというのであれば、

      .article td,
      .article th {
        border: 1px none;
      }

      とかでもイケるんじゃなかろうかと思います。

      意味合いとしてはどちらも、.articleの中のtdあるいは、thに対してスタイルを行うということです。
      テーブルが記事中にいくつかあって、どれかそれのみ消したいという場合は、tableタグをdivなどで囲み、

      [div class=test]
        [table][/table]
      [/div]

      ※ 〈〉は[]で書いてあります。class=の後のセレクタはクォートで囲みます

      この場合なら、

      .test td,
      .test tr {
        border: 1px solid transparent;
      }

      こんな感じに書きます。で、どこに書くかですが、通常こういった独自にカスタマイズをする場合は子テーマを利用して、子テーマのstyle.cssに書きます。
      ただし、利用されているSimplicityが1.x系なら、場合によってはカスタマイザーのスタイルがあったりして子テーマのstyle.cssでは上書きできない場合があるので、そういう時はheader-insert.phpにstyleタグとして書きます。

      [style]
        .test td,
        .test tr {
          border: 1px solid transparent;
        }
      [/style]

      ※styleタグの[]は半角〈〉と読み替えて下さい

      Simplicity2なら子テーマで全て上書きできます。

      必要なこととしては、そのテーブルがどこに書いてあって、どういうスタイルになっているかをまず調べる必要があります。firefoxやchromeならデベロッパーツールが備わっているので、F12キー、あるいは該当箇所を右クリックして要素を検証(あるいは調査)等からセレクタを調べることができます。

      「どこ」というのはこのセレクタを意味します。おそらくは記事中かと思うので、.articleあるいは、#the-contentの中のtableあるいは、td(th)などに対してスタイルすれば良いと言うことになるかと思います。

      先に書いた1pxの幅を維持するか否かと言うのは、box-sizingと言う設定にもよります。tableにbox-sizingが効いているのであれば、1pxなどと指定する必要はなく、単純にborder: noneでイケるかと思います。
      box-sizingは、ボーダーの幅を含めるかどうかを指定するプロパティです。

      もしbox-sizingが効いていないとすると、border: noneあるいはborder: 0 none;とした時に、ボーダーの幅だけ表が縮んだりします。

      と、たかだかテーブルに対しても色々と設定や方法があったりするので、実際に今はこうなっていると言う公開されているサイトのアドレスを提示してもらえれば、ボーダーを消すためにどうすればよいのかをサックリ解答できると思います。
      そうすれば子テーマを利用されているかどうか、Simplicityは1系か2系かもわかりますので。

      サイトを作成途中等で公開できない場合もあるかと思いますが、その場合はある程度のザックリとした解答しかできないかと思うのでそれらを参考にご自身で色々いじくってみて下さい。

    • #35504
      Hidekichi
      ゲスト

      2つ目のサンプルは、

      .article td,
      .article th {
        border: 0 none;
      }

      でした。直したつもりが元に戻っているという(笑)

    • #35514
      アバター画像わいひら
      キーマスター

      hidekichiさんの書いた方法で、もしうまくいかない場合は、実際枠線を消したいテーブルがあるページのURLを書いていただければ、それにあったCSSもわかるかと思います。

    • #35550
      admkai
      ゲスト

      Hidekichiさん、噛み砕いた分かりやすい説明もつけていただいて有難うございます!
      わいひらさん、有難うございます!

      検討した結果、色を透過するやり方で無事、解決が出来ましたm(_)m

      まだサイトも初期段階で今後の作業でイメージできない部分もある為、また何か不都合等あればその際に検討したいと思います。

4件の返信スレッドを表示中
  • トピック「テーブルタグの枠線を消すには」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)