テーマ「Deep Silent」でのtableタグの使用について

解決済 motoki0121
(@motoki0121)

14年、 9ヶ月前

Deep Silent
http://wordpress.org/extend/themes/deep-silent

上記のテーマでTableタグを使った本文を投稿したところ、
テーブルの左上が欠けてしまい、正常にテーブルが表示されませんでした。
原因を探って見たところ、テンプレートの中に以下の記述があることが分りました。

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

普通にtableタグを使うと上記のタグが適用されてしまう為、テーブルの左上が欠けてしまうようです。
これを回避する為に何か良い方法はございませんでしょうか。

ちなみにテーブルについては以下のサイトのタグを参考にしています。
http://www.d-spica.com/designcatalog/table/table010.html

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

jim912

(@jim912)

14年、 9ヶ月前

motoki0121さん、こんにちは。

テーマを適用し、参考サイトのテーブルを投稿してみましたが、特に欠けてしまうようなことは無いようです。

また、呈示いただいたテンプレートのtableタグは、左右のカラムを実現させるためのもので表示には影響ないはずです。

入力されたtableのコード、表示されているhtmlのソースはどうなっていますか？
まずは、それを確認することが先決です。

トピック投稿者

motoki0121

(@motoki0121)

14年、 9ヶ月前

ご返信ありがとうございます。
また返事が遅れ申し訳ありません。
コードを再度確認してみましたが、やはり分りませんでした。
もしよろしければ以下のコードを確認していただけませんでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="WordPress 3.0.1,WordPress 3.0.1" />
<title>作業・工賃 | XXXXX</title>
<link rel="alternate" type="application/rss+xml" title="XXXXX RSS Feed" href="http://xxxxx.com/feed" />
<link rel="alternate" type="application/rss+xml" title="XXXXX ≫ 作業・工賃 のコメントのフィード" href="http://xxxxx.com/fee/feed" />
<link rel="alternate" media="handheld" type="text/html" href="http://xxxxx.com/fee" />
<link rel="pingback" href="http://xxxxx.com/wp/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://xxxxx.com/wp/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://xxxxx.com/wp/wp-includes/wlwmanifest.xml" />
<link rel="index" title="XXXXXX" href="http://xxxxx.com" />
<link rel="prev" title="会社概要" href="http://xxxxx.com/about" />
<link rel="next" title="取扱商品" href="http://xxxxx.com/item" />
<link rel="canonical" href="http://xxxxx.com/fee" />
<link rel="stylesheet" href="http://xxxxx.com/wp/wp-content/themes/deep-silent/style.css" type="text/css" media="screen" />
<link rel="stylesheet" id="contact-form-7-css" href="http://xxxxx.com/wp/wp-content/plugins/contact-form-7/styles.css?ver=2.3.1" type="text/css" media="all" />
<style type="text/css" media="all">/*<![CDATA[ */
.each_map {
width:480px;
height:300px;
line-height:105%;
clear:both;
margin:1em auto;
padding:0;
border:1px solid #999;
text-align:left;
font-size:100%;
}
.each_map img {
margin:0;
padding:0;
border:0 none;
}
.each_map .infowindow strong {
font-size:1em;
}
.each_map .infowindow p {
line-height:1.40em;
margin:1em 0 0;
padding:0;
text-indent:0;
font-size:.85em;
}
/* ]]>*/</style>
<style type="text/css" media="all">/*<![CDATA[ */
.broken_link, a.broken_link {
text-decoration: line-through;
}
.locationurl {
display:none;
}
/* ]]>*/</style>
<!--[if lte IE 6]><style type="text/css" media="screen">
	body { behavior: url("http://xxxxx.com/wp/wp-content/themes/deep-silent/csshover3.htc"); }
	.entry img{
		width: expression(this.width > 530 ? 530: true);
	}
</style>
<![endif]-->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAXTLGxwqj8xDnd3seYnIIPxSPhOjogHMvqI0LWMNdkUD-PJ35VBQLd9RX73-OMYNHpROgdsu3e5u3hQ" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-includes/js/prototype.js?ver=1.6.1"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-includes/js/scriptaculous/effects.js?ver=1.8.3"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-content/plugins/head-cleaner/includes/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-content/plugins/head-cleaner/includes/js/jquery.noconflict.js"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-content/themes/deep-silent/script.js"></script>
<script type="text/javascript" src="http://xxxxx.com/wp/wp-content/plugins/lightbox-2/lightbox.js?ver=1.8"></script>
<script type="text/javascript">//<![CDATA[
var _wpcf7 = { cached: 1 };
document.write('<link rel="stylesheet" href="http://xxxxx.com/wp/wp-content/plugins/lightbox-2/Themes/Black/lightbox.css" type="text/css" media="screen" />');
//]]></script>

<style type="text/css">
table.Tbl {
  margin-top: 0.2em;
  margin-bottom: 1em;
  width: 300px;
  border-collapse: collapse;
  border: solid 1px #999;
  font-size: 100%;
}

table.Tbl caption {
  margin-top: 1em;
  text-align: left;
}

table.Tbl th,
table.Tbl td {
  border: solid 1px #999;
  padding: 4px 6px;
}

table.Tbl th {
  background: #E6E6E6;
  text-align: center;
  white-space: nowrap;
  color: #666;
}

table.Tbl td.work {
  text-align: center;
  font-size: 120%;
  font-weight: bolder;
}

table.Tbl td.cla {
  text-align: center;
  white-space: nowrap;
}

table.Tbl td.fee {
  text-align: right;
  white-space: nowrap;
}

</style>
</head>
<body>
<div id="page-top"></div>

<div id="navmenu-bg">
<div class="nav-container">
<div id="navmenu">
			<ul>
				<li ><a href="http://xxxxx.com/" title="Home">Home</a></li>
				<li class="page_item page-item-18 current_page_item"><a href="http://xxxxx.com/fee" title="作業・工賃">作業・工賃</a></li>
<li class="page_item page-item-21"><a href="http://xxxxx.com/item" title="取扱商品">取扱商品</a></li>
<li class="page_item page-item-36"><a href="http://xxxxx.com/access" title="アクセス">アクセス</a></li>
<li class="page_item page-item-2"><a href="http://xxxxx.com/about" title="会社概要">会社概要</a></li>
<li class="page_item page-item-38"><a href="http://xxxxx.com/contact" title="お問い合わせ">お問い合わせ</a></li>
			</ul>
</div>
<div class="header-search">
<form method="get" id="searchform" action="http://xxxxx.com/">
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>
</div>
</div>
<div id="page">

<div id="header">
	<div id="headerimg">
		<div class="headerimg-left">
            <h1><a href="http://xxxxx.com/">XXX</a></h1>
            <div class="description">XXX</div>
        </div>
        <div class="headerimg-right">
        </div>
	</div>
</div>

	<div id="content" class="narrowcolumn">

		<div class="content-inside">

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="left">
    		<div class="post" id="post-18">
		<h2>作業・工賃</h2>
			<div class="entry">
				<p>
<table class="Tbl">
<caption>■タイヤ＆ホイール</caption>
<tr>
 <th>作業内容</th>
 <th>種別</th>
 <th>料金</th>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="6">タイヤ交換<br />(バランス調整込)</td>
 <td class="cla">扁平率60以上</td>
 <td class="fee">800円～</td>
</tr>
<tr>
 <td class="cla">タイヤ持ち込み</td>
 <td class="fee">1600円～</td>
</tr>
<tr>
 <td class="cla">扁平率55～45</td>
 <td class="fee">1000円～</td>
</tr>
<tr>
 <td class="cla">タイヤ持ち込み</td>
 <td class="fee">2000円～</td>
</tr>
<tr>
 <td class="cla">扁平率40以下</td>
 <td class="fee">1200円～</td>
</tr>
<tr>
 <td class="cla">タイヤ持ち込み</td>
 <td class="fee">2400円～</td>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">タイヤローテーション</td>
 <td class="cla">普通車</td>
 <td class="fee">2000円～</td>
</tr>
<tr>
 <td class="cla">1BOX/4WD等</td>
 <td class="fee">3000円～</td>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">バランス調整</td>
 <td class="cla">普通車</td>
 <td class="fee">1000円～</td>
</tr>
<tr>
 <td class="cla">1BOX/4WD等</td>
 <td class="fee">1500円～</td>
</tr>
<tr>
 <td class="work">パンク修理</td>
 <td class="cla">打ち込み</td>
 <td class="fee">2000円～</td>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">エアバルブ交換</td>
 <td class="cla">タイヤ交換時</td>
 <td class="fee">250円～</td>
</tr>
<tr>
 <td class="cla">バルブ交換のみ</td>
 <td class="fee">2000円～</td>
</tr>
</table>
<br />
<table class="Tbl">
<caption>■AV機器</caption>
<tr>
 <th>作業内容</th>
 <th>種別</th>
 <th>料金</th>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">ナビ</td>
 <td class="cla">インダッシュ</td>
 <td class="fee">10000円～</td>
</tr>
<tr>
 <td class="cla">オンダッシュ</td>
 <td class="fee">15000円～</td>
</tr>
<tr>
 <td class="work">オーディオ</td>
 <td class="cla">-</td>
 <td class="fee">4000円～</td>
</tr>
<tr>
 <td class="work">TVチューナー</td>
 <td class="cla">-</td>
 <td class="fee">7000円～</td>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">スピーカー</td>
 <td class="cla">コアキシャル</td>
 <td class="fee">4000円～</td>
</tr>
<tr>
 <td class="cla">セパレート</td>
 <td class="fee">6000円～</td>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">ウーファー</td>
 <td class="cla">チューンナップ</td>
 <td class="fee">8000円～</td>
</tr>
<tr>
 <td class="cla">アンプ別体</td>
 <td class="fee">10000円～</td>
</tr>
<tr>
 <td class="work">モニタ</td>
 <td class="cla">各種</td>
 <td class="fee">7000円～</td>
</tr>
</table>
<br />
<table class="Tbl">
<caption>■その他</caption>
<tr>
 <th>作業内容</th>
 <th>種別</th>
 <th>料金</th>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">エンジンオイル交換</td>
 <td class="cla">上抜き</td>
 <td class="fee">500円～</td>
</tr>
<tr>
 <td class="cla">下抜き</td>
 <td class="fee">500円～</td>
</tr>
<tr>
 <td class="work">エンジンフラッシング</td>
 <td class="cla">機器使用無し</td>
 <td class="fee">500円～</td>
</tr>
<tr>
 <td class="work" colspan="1" rowspan="2">オイルフィルタ交換</td>
 <td class="cla">一般車</td>
 <td class="fee">500円～</td>
</tr>
<tr>
 <td class="cla">特殊車</td>
 <td class="fee">700円～</td>
</tr>
<tr>
 <td class="work">エアフィルタ交換</td>
 <td class="cla">一般車</td>
 <td class="fee">300円～</td>
</tr>
<tr>
 <td class="work">バッテリー</td>
 <td class="cla">一般車</td>
 <td class="fee">500円～</td>
</tr>
<tr>
 <td class="work">HID</td>
 <td class="cla">一般車</td>
 <td class="fee">10000円～</td>
</tr>
<tr>
 <td class="work">LED</td>
 <td class="cla">一般車</td>
 <td class="fee">800円～</td>
</tr>
</table>
※上記に無い作業についてもご相談ください。出来る限り対応させて頂きます。<br />
また、作業内容及び作業状況により、待ち時間が異なりますので予めご了承下さい。</p>

			</div>
		</div>
			<p><a class="post-edit-link" href="http://xxxxx.com/wp/wp-admin/post.php?post=18&action=edit" title="ページを編集">Edit this entry.</a></p>    

    </td>
    <td class="right">	<div id="sidebar">
		<ul>
			<li class="sideblock"><h2>営業案内</h2>			<div class="textwidget"><p>営業時間 10：00～20：00<br />
定休日 毎週水曜日<br />
電話 043-228-5515<br />
　<br />
<a href="http://xxxxx.com/contact/">メールでのお問い合わせ</a><br />
　</p>
</div>
		</li><li class="sideblock"><h2>カテゴリー</h2>		<ul>
	<li class="cat-item cat-item-3"><a href="http://xxxxx.com/category/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b" title="お知らせ に含まれる投稿をすべて表示">お知らせ</a>
</li>
		</ul>
</li><li class="sideblock"><h2>メタ情報</h2>			<ul>
			<li><a href="http://xxxxx.com/wp/wp-admin/">サイト管理</a></li>			<li><a href="http://xxxxx.com/wp/wp-login.php?action=logout&_wpnonce=f7074b5e54">ログアウト</a></li>
			<li><a href="http://xxxxx.com/feed" title="このサイトを RSS2.0 で購読">投稿の <abbr title="Really Simple Syndication">RSS</abbr></a></li>
			<li><a href="http://xxxxx.com/comments/feed" title="すべての投稿への最新コメントを RSS で購読">コメントの <abbr title="Really Simple Syndication">RSS</abbr></a></li>
			<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
						</ul>
</li>		</ul>
	</div>

</td>
  </tr>
</table>

</div>

	</div>

<div id="footer">
  <div id="footernavmenu">
    <ul>
      <li ><a href="http://xxxxx.com/" title="Home">Home</a></li>
      <li class="page_item page-item-18 current_page_item"><a href="http://xxxxx.com/fee" title="作業・工賃">作業・工賃</a></li>
<li class="page_item page-item-21"><a href="http://xxxxx.com/item" title="取扱商品">取扱商品</a></li>
<li class="page_item page-item-36"><a href="http://xxxxx.com/access" title="アクセス">アクセス</a></li>
<li class="page_item page-item-2"><a href="http://xxxxx.com/about" title="会社概要">会社概要</a></li>
<li class="page_item page-item-38"><a href="http://xxxxx.com/contact" title="お問い合わせ">お問い合わせ</a></li>
    </ul>
  </div>
  <div class="copyright">
    <p> Designed by <a href="http://www.mifdesign.com/" title="Custom Web Design Company" target="_blank">MIF Design</a> <br />
      <a href="http://xxxxx.com/feed">Entries (RSS)</a> and <a href="http://xxxxx.com/comments/feed">Comments (RSS)</a>.
      <!-- 19 queries. 1.067 seconds. -->
    </p>
    <div class="strip"></div>
  </div>
</div>
<script type='text/javascript' src='http://xxxxx.com/wp/wp-includes/js/jquery/jquery.form.js?ver=2.02m'></script>
<script type='text/javascript' src='http://xxxxx.com/wp/wp-content/plugins/contact-form-7/scripts.js?ver=2.3.1'></script>
</body>
</html>

(@kz)

14年、 9ヶ月前

※上記コードをそのまま貼付けてブラウザで表示すると

　大人のサイト

　が表示されちゃうのでお仕事中の方は気をつけて！

コード中のスタイルでなら、テーブルは正常に表示されましたよー。
こういう症状は、問題の発生している URL をお知らせいただくのが一番解決が早いですー。

トピック投稿者

motoki0121

(@motoki0121)

14年、 9ヶ月前

知り合いのサイトを代理で作成しているのでXXXにしていましたが、まさか大人のサイトのURLだとは知りませんでした。
申し訳ありませんでした。素直にURLを貼ます。

ttp://gon-z.com/fee

nobita

(@nobita)

14年、 9ヶ月前

こんにちは

以下のスタイルで、ボーダーが白になっています

/wp/wp-content/themes/deep-silent/style.css

.entry table tr th{
	background-color:#f8f7f3;
	border-top: 1px #FFFFFF solid;
	border-right: 1px #a29c7d solid;
	border-bottom: 1px #a29c7d solid;
	border-left: 1px #FFFFFF solid;
}

トピック投稿者

motoki0121

(@motoki0121)

14年、 9ヶ月前

こんにちわ、返信ありがとうございます。
指摘して頂いた箇所を修正してひとまず解決する事ができました。

style.cssはほとんどデフォルトのままで使用しているのでやはりこのテーマ仕様と言う事なのでしょうか。
私には何故このクラス.entryが関係してくるのかすら分りません。
同じページには<div class=”entry”>ぐらいでしか使用されていそうな箇所は見つけられませんでしたが、.entry table tr thを修正して他の箇所でデザインが崩れる事は考えられませんでしょうか。

たびたび申し訳ありませんが、ご教授願います。
本来ならCSSを勉強すべきなのでしょうが…

nobita

(@nobita)

14年、 9ヶ月前

こんにちは、

私には何故このクラス.entryが関係してくるのかすら分りません。

スタイルシートでは、.entryとかく場合は、class=”entry”に対して、色やレイアウトが適用されるように、設定を行う意味です。

スペースで区切られた、table tr　th は
entryクラスが指定されたタグ内にある
tableタグのタグ内にある
trタグのタグ内にある
thタグに設定されるスタイルという意味です。

まとめていうと、

<div class="entry">
この中にある、thエレメントは、
　　　　background-color:#f8f7f3;
	border-top: 1px #FFFFFF solid;
	border-right: 1px #a29c7d solid;
	border-bottom: 1px #a29c7d solid;
	border-left: 1px #FFFFFF solid;
になってね、

</div>

大雑把に言うと、こういうことになります。
ちゃんとしたことは、CSSのお勉強をしてみてください。

同じページには<div class=”entry”>ぐらいでしか使用されていそうな箇所は見つけられませんでしたが、.entry table tr thを修正して他の箇所でデザインが崩れる事は考えられませんでしょうか

転ばぬ先の杖的な意味でですが、、、

wordPressは、3.0になってから、body_class() そのちょっと前から、post_class()が使われるようになりました。

これは、プログラムが自動的にクラスを付加する仕組みですが、なんかの弾み？で、ここに、ある環境で、entryが追加されるような場合、崩れることはあり得ます。

body_class()や、post_class()は、ある限定した条件下でクラスを追加したりするので、多分気づくことが出来にくいので、事前にテーマファイルがそういうカスタマイズしていないかどうかチェックが必要なことも将来的には出てくるかもしれないと思います。

やはりこのテーマ仕様と言う事なのでしょうか。

エントリーの中で、ユーザがどんなクラス名を使うかなんて、テーマ製作者が解るはずがありません。
だから、お互いに、「何でそんなクラス名使うのよ～」と言い出すのが目に浮かびます

トピック投稿者

motoki0121

(@motoki0121)

14年、 9ヶ月前

こんにちわ、丁寧な説明ありがとうございます。
本当に分りやすい説明で納得できました。

今のところはこの解決方法で対応させて頂きます。
と、言うことはもしかしてこの.entry table自体をコメントアウトしてみても良いのかとも思いますが、それに関しては実際にいじってみて試します。

本当にありがとうございました。

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

トピック「テーマ「Deep Silent」でのtableタグの使用について」には新たに返信することはできません。

テーマ「Deep Silent」でのtableタグの使用について

トピック

人気のトピック

返信がないトピック

サポート関連ではないトピック

解決済みのトピック

未解決のトピック

すべてのトピック