投稿欄のTableStyleの初期化の方法

解決済 jinchan
(@jinchan)

10年、 8ヶ月前

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

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

5件の返信を表示中 - 1 - 5件目 (全5件中)

nobita
(@nobita)

10年、 8ヶ月前

こんにちは、

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

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

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

追伸：
コードを書いていただいたら、コードの範囲を選択して、エディタの上にあるcodeボタンを押してください、よろしくお願いします
トピック投稿者 jinchan
(@jinchan)

10年、 8ヶ月前
nobita さん

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

テーマ：Twenty Ten

１）元のコード
```
<table width="772" border="1" style="border-collapse : collapse;">
  <tr bgcolor="#FFFF00">
    <td width="250"><div align="center"><strong>見出し１</strong></div></td>
    <td width="250"><div align="center"><strong>見出し２</strong></div></td>
    <td width="250"><div align="center"><strong>見出し３</strong></div></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFF00"><div align="center"><strong>内容１１</strong></div></td>
    <td valign="top" bgcolor="#FF9FFF">内容１２</td>
    <td bgcolor="#66FFFF">内容１３</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF00"><div align="center"><strong>内容２１</strong></div></td>
    <td valign="top" bgcolor="#FF9FFF">内容２２</td>
    <td valign="top" bgcolor="#66FFFF">内容２３</td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFF00"><div align="center"><strong>内容３１</strong></div></td>
    <td bgcolor="#FF9FFF">内容３２</td>
    <td valign="top" bgcolor="#66FFFF">内容３３</td>
  </tr>
</table>
```
２）ブラウザ表示時のコード
```
<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>見出し１</strong></div>
</td>
<td width="250">
<div align="center"><strong>見出し２</strong></div>
</td>
<td width="250">
<div align="center"><strong>見出し３</strong></div>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF00">
<div align="center"><strong>内容１１</strong></div>
</td>
<td valign="top" bgcolor="#FF9FFF">内容１２</td>
<td bgcolor="#66FFFF">内容１３</td>
</tr>
<tr>
<td bgcolor="#FFFF00">
<div align="center"><strong>内容２１</strong></div>
</td>
<td valign="top" bgcolor="#FF9FFF">内容２２</td>
<td valign="top" bgcolor="#66FFFF">内容２３</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF00">
<div align="center"><strong>内容３１</strong></div>
</td>
<td bgcolor="#FF9FFF">内容３２</td>
<td valign="top" bgcolor="#66FFFF">内容３３</td>
</tr>
</table>
```
３）　問題点

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

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

これを、元のコードのように表示させたいのですが、どうすれば良いのでしょうか？
よろしくお願いします。
トピック投稿者 jinchan
(@jinchan)

10年、 8ヶ月前

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

10年、 8ヶ月前
```
/* =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)

10年、 8ヶ月前

nobita さん

Twentyten の style.css 内の

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

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

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

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

5件の返信を表示中 - 1 - 5件目 (全5件中)

トピック「投稿欄のTableStyleの初期化の方法」には新たに返信することはできません。