サポート » 使い方全般 » 投稿欄のTableStyleの初期化の方法

  • 解決済 jinchan

    (@jinchan)


    投稿欄のHTML入力欄に、html文でtable文を書くと、そのstyleは、wordpress内で指定されている固有のstyle文に左右され、入力欄に記述したhtml文のとおりに表示されません。

    このwordpressで指定しているstyle文を無効にして、html入力欄に記述したhtml文のとおりに、tableを表示させたいのですが、このwordpress内で指定されているstyleを無効にして、入力欄に入力したhtml文のとおりにtableを表示させる方法について、どなたか、ご存知の方がおられましたら、ご教示お願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • こんにちは、

    jinchanさんは、管理者としてワードプレスにログインしていますか?もしそうでなければ、権限を教えてください。

    実際に入力したテーブル要素のサンプルコードを書いてください。
    それが、投稿を保存した時に、どのように書き換えられているかを、htmlコードで知らせてください。

    そのほうが たぶん解答がつきやすいと思います :)

    追伸:
    コードを書いていただいたら、コードの範囲を選択して、エディタの上にあるcodeボタンを押してください、よろしくお願いします

    スレッド開始 jinchan

    (@jinchan)

    nobita さん

    こんばんわ。いつもお世話になります。
    早速ご回答ありがとうございました。
    サンプルコードを記します。

    テーマ:Twenty Ten

    1)元のコード

    <table width="772" border="1" style="border-collapse : collapse;">
      <tr bgcolor="#FFFF00">
        <td width="250"><div align="center"><strong>見出し1</strong></div></td>
        <td width="250"><div align="center"><strong>見出し2</strong></div></td>
        <td width="250"><div align="center"><strong>見出し3</strong></div></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFF00"><div align="center"><strong>内容11</strong></div></td>
        <td valign="top" bgcolor="#FF9FFF">内容12</td>
        <td bgcolor="#66FFFF">内容13</td>
      </tr>
      <tr>
        <td bgcolor="#FFFF00"><div align="center"><strong>内容21</strong></div></td>
        <td valign="top" bgcolor="#FF9FFF">内容22</td>
        <td valign="top" bgcolor="#66FFFF">内容23</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFF00"><div align="center"><strong>内容31</strong></div></td>
        <td bgcolor="#FF9FFF">内容32</td>
        <td valign="top" bgcolor="#66FFFF">内容33</td>
      </tr>
    </table>

    2)ブラウザ表示時のコード

    <head>
    <style type="text/css">
    .wp-polls .pollbar {
    	margin: 1px;
    	font-size: 8px;
    	line-height: 10px;
    	height: 10px;
    	background: #0066ff;
    	border: 1px solid #000099;
    }
    </style>
    </head>
    <body class="single single-post postid-2244 single-format-standard logged-in">
    <div class="entry-content">
    <table width="772" border="1" style="border-collapse : collapse;">
    <tr bgcolor="#FFFF00">
    <td width="250">
    <div align="center"><strong>見出し1</strong></div>
    </td>
    <td width="250">
    <div align="center"><strong>見出し2</strong></div>
    </td>
    <td width="250">
    <div align="center"><strong>見出し3</strong></div>
    </td>
    </tr>
    <tr>
    <td valign="top" bgcolor="#FFFF00">
    <div align="center"><strong>内容11</strong></div>
    </td>
    <td valign="top" bgcolor="#FF9FFF">内容12</td>
    <td bgcolor="#66FFFF">内容13</td>
    </tr>
    <tr>
    <td bgcolor="#FFFF00">
    <div align="center"><strong>内容21</strong></div>
    </td>
    <td valign="top" bgcolor="#FF9FFF">内容22</td>
    <td valign="top" bgcolor="#66FFFF">内容23</td>
    </tr>
    <tr>
    <td valign="top" bgcolor="#FFFF00">
    <div align="center"><strong>内容31</strong></div>
    </td>
    <td bgcolor="#FF9FFF">内容32</td>
    <td valign="top" bgcolor="#66FFFF">内容33</td>
    </tr>
    </table>

    3) 問題点

    以上ですが、見出し行と見出し1列のbgcolorは、黄色、
    見出し2列の内容列はピンク、見出し3列の内容は、水色
    という色分けをしているつもりが、

    実際にブラウザ表示すると、すべてのセルの背景色bgcolorが無色(白色)となってしまうのです。

    これを、元のコードのように表示させたいのですが、どうすれば良いのでしょうか?
    よろしくお願いします。

    スレッド開始 jinchan

    (@jinchan)

    追伸:
    すみません、書き忘れました。
    管理者としてワードプレスにログインしています。

    /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
    -------------------------------------------------------------- */
    
    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 {
    	background: transparent; /*これをはずせばいいんじゃないかと思います*/
    	border: 0;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }

    background プロパティに transparent が指定された場合は、自分自身の背景を透過させ、親要素の背景色を表示します

    Twentytenでは、style.css冒頭で、上記の指定が行われているため、bgcolor属性を上書きしているものと思われます。

    テーマTwentyelevenだと、この指定はありませんから、bgcolorで指定した背景色が表示されると思います。

    備考:このリセットスタイルは、エリックメイヤーの有名なやつで、ブラウザ固有スタイルをリセットするために書かれているものです。なので、私的には、style.cssの末尾に、tdや、colgroup col要素で指定したクラスを使って スタイルを追加するのが、よいと思います。

    スレッド開始 jinchan

    (@jinchan)

    nobita さん

    Twentyten の style.css 内の

    table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent; /*これをはずせばいいんじゃないかと思います*/

    で、backgroundcolor がhtml文通り表示されるようになり、
    解決しました。

    どうもありがとうございました。

    なお、『備考』については、これから研究してチャレンジしてみようかと
    思っておりますので、また、よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「投稿欄のTableStyleの初期化の方法」には新たに返信することはできません。