質問が2つ、あります!
今、この記事の 【ココ知っトコ!】・・・の所にある表についてですが
この記事
本当は、こんな風に表示させたいです。
参照したサイト
------------------質問1------------------
全く同じ物を記事内にいれたら、
th.spec
th.specalt
この二つのbackgroundとしてしてされている三角のマークが左上についた画像は反映されたのですが、
一番上のthで背景画像として指定されている背景画像が反映されません。
コード、間違っていますでしょうか?
それとも、サイズの問題とか・・・?
▼WPの記事内に挿入したテーブルCSS/HTMLはこちらです
<style type="text/css"> #mytable { width:100%; margin:0 0 0 1px; padding:0; border:0; border-spacing:0; border-collapse:collapse; } caption { padding:0 0 5px 0; font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align:right; } th { font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:#4f6b72; border:1px solid #c1dad7; letter-spacing:2px; text-transform:uppercase; text-align:left; padding:6px 6px 6px 12px; background:#cae8ea url(http://phpjavascriptroom.com/content/img/css/bg_header.jpg) no-repeat; } th.nobg { border-top:0; border-left:0; background:none; } td { border:1px solid #c1dad7; background:#fff; padding:6px 6px 6px 12px; color:#4f6b72; } td.alt { background:#F5FAFA; color:#797268; } th.spec { background:#fff url(http://phpjavascriptroom.com/content/img/css/bullet1.gif) no-repeat; font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } th.specalt { background:#f5fafa url(http://phpjavascriptroom.com/content/img/css/bullet2.gif) no-repeat; font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:#797268; } </style> <table id="mytable"> <tbody> <tr> <th class="nobg" scope="col" abbr="Configurations">空白</th> <th scope="col" abbr="Dual 1.8">1列目</th> <th scope="col" abbr="Dual 2">2列目</th> <th scope="col" abbr="Dual 2.5">3列目</th> </tr> <tr> <th class="spec" scope="row" abbr="Model">1行目</th> <td>1列目の1</td> <td>2列目の1</td> <td>3列目の1</td> </tr> <tr> <th class="specalt" scope="row" abbr="G5 Processor">2行目</th> <td class="alt">1列目の2</td> <td class="alt">2列目の2</td> <td class="alt">3列目の2</td> </tr> <tr> <th class="spec" scope="row" abbr="Frontside bus">3行目</th> <td>1列目の3</td> <td>2列目の3</td> <td>3列目の3</td> </tr> <tr> <th class="specalt" scope="row" abbr="L2 Cache">4行目</th> <td class="alt">1列目の4</td> <td class="alt">2列目の4</td> <td class="alt">3列目の4</td> </tr> </tbody> </table>
------------------質問2------------------
上記と同じ表についてですが、
今、
記事編集の時点(WPでいう[テキスト]タブの所)で上記のcss/htmlをそのままワンセットでいれてて反映させている状態です。(最後に入れる表が綺麗に反映されますが、編集途中でstyle/cssの指定がなくなっちゃってシンプルになっちゃいます。)
今まで他の表を入れる時は、表の装飾等の指示をWP管理画面→テーマの編集→スタイルシート(style.css)で、表についての指示をしていたのですが、今回はなぜかそのようにしたとしてもうまく反映されません。
何か間違えているのでしょうか・・・?それとも、この表はそういう指示が難しいのでしょうか?
▼スタイルシート(style.css)に指示を入れた時、こんな風に書きました:
/* -------------------------------------------------- sankaku Table ここからいれたもの表5つ目 -------------------------------------------------- */ table.sankaku { width:100%; margin:0 0 0 1px; padding:0; border:0; border-spacing:0; border-collapse:collapse; } table.sankaku caption { padding:0 0 5px 0; font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align:right; } table.sankaku th { font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:#4f6b72; border:1px solid #c1dad7; letter-spacing:2px; text-transform:uppercase; text-align:left; padding:6px 6px 6px 12px; background:#cae8ea url(http://phpjavascriptroom.com/content/img/css/bg_header.jpg) no-repeat; } table.sankaku th.nobg { border-top:0; border-left:0; background:none; } table.sankaku td { border:1px solid #c1dad7; background:#fff; padding:6px 6px 6px 12px; color:#4f6b72; } table.sankaku td.alt { background:#F5FAFA; color:#797268; } table.sankaku th.spec { background:#fff url(http://phpjavascriptroom.com/content/img/css/bullet1.gif) no-repeat; font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } table.sankaku th.specalt { background:#f5fafa url(http://phpjavascriptroom.com/content/img/css/bullet2.gif) no-repeat; font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:#797268; }
▼スタいるシートに指示する上記のコードを入れた後、こんなhtmlを記事テキスト本文に入れました:
<table class="sankaku"> <tbody> <tr> <th class="nobg" scope="col" abbr="Configurations">空白</th> <th scope="col" abbr="Dual 1.8">1列目</th> <th scope="col" abbr="Dual 2">2列目</th> <th scope="col" abbr="Dual 2.5">3列目</th> </tr> <tr> <th class="spec" scope="row" abbr="Model">1行目</th> <td>1列目の1</td> <td>2列目の1</td> <td>3列目の1</td> </tr> <tr> <th class="specalt" scope="row" abbr="G5 Processor">2行目</th> <td class="alt">1列目の2</td> <td class="alt">2列目の2</td> <td class="alt">3列目の2</td> </tr> <tr> <th class="spec" scope="row" abbr="Frontside bus">3行目</th> <td>1列目の3</td> <td>2列目の3</td> <td>3列目の3</td> </tr> </tbody> </table>
~まとめ~
・参考サイトと同じ表を自社サイトに入れたいです!
コピペでそのままス変えると大変助かります!
よろしくお願い致します><
回答1件
あなたの回答
tips
プレビュー