シンプル系スキンの表（table）の自動装飾機能を打ち消す方法

ファンブログ表（table）の豆知識投稿日：2009年08月30日 17:00

ファンブログ　カスタマイズシンプル系スキン限定

前回のシンプル系スキンの表（table）の自動装飾機能についてで説明しました、だめだめなファンブログのプレビュー画面に対応する方法は、私が検証した限りでは２通りあります。
その方法は、完璧に正しくは表示されませんが、プレビュー画面に無理やり表示させる方法と、正しく表示される場所で表を作成して、記事にコピー＆ペーストする方法です。

今回は、プレビュー画面に無理やり表示させる方法を説明しながら、CSS で指定されています装飾を打ち消す方法を合わせて説明します。

プレビュー画面に無理やり表示させる方法は、CSS で指定されたとおりの HTML で表（table）の記述をすることです。本来入力を省くために、CSS で指定されているものを、わざわざ打ち込むのは一見無駄のように感じられるかもしれませんが、CSS で指定されたとおりの記述をすることによって、その指定を打ち消すこともできるんです。

シンプル系スキンの表（table）の CSS での装飾は、1px の黒い実線で表を作成するように指定されています。つまり、どの表も同じ 1pxの黒い実線の表になるということです。
この黒い線を違う色や太さに変更するために、よく使われていらっしゃるのが以下のような記述です。

<table border="5" bordercolor="#ff0000">
<tr>
<td>1行1列目　1-1</td>
<td>1行2列目　1-2</td>
</tr>
</table>

この下の、CSS の指定と比べていただければわかりますように、指定方法が違いますので、双方の指定が表（table）に反映されてしまい、上記のような記述ですとおかしな表示になってしまします。

#content table {
	border-top:1px solid #333;
	border-right:1px solid #333;
}
#content table td {
	border-bottom:1px solid #333;
	border-left:1px solid #333;
	padding: 4px;
}

表（table）には、さまざまな記述方法がありますが、上記の CSS の指定どおりに表（table）の HTML を記述して、枠線（border）の太さや色を変更しますと、CSS の指定を打ち消して変更することができる訳なんです。

実験用のサンプルの表（table）のソースをご用意いたしましたので、記事に貼ってお試しください。
ただし、表（table）の枠線（border）や隙間（padding）は公開されるものと同じように表示されますが、ファンブログのプレビュー画面では表（table）が正しく表示されないんです！で説明しました、表（table）とデータセル（td）内の中央揃えのバグは残りますことを、ご容赦くださいませ。

1行1列目　(´・ω・`) 1-1	1行2列目　(´・ω・`) 1-2	1行3列目　(´・ω・`) 1-3
2行1列目　(´・ω・`) 2-1	2行2列目　(´・ω・`) 2-2	2行3列目　(´・ω・`) 2-3
3行1列目　(´・ω・`) 3-1	3行2列目　(´・ω・`) 3-2	3行3列目　(´・ω・`) 3-3

上記の表の HTML ソースです。指定の意味をわかりやすくするために、<table> と、1-1のデータセル <td> の枠線（border）の太さと色を変更してあります。

<table style="border-collapse: collapse; border-spacing: 0; border-top:2px solid #F00; 
 border-right:2px solid #0F0; 
">
<tr>
<td style=" border-bottom:2px solid #F0F; 
 border-left:2px solid #00F; 
padding: 4px;">
1行1列目　(´・ω・`) 1-1
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
1行2列目　(´・ω・`) 1-2
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
1行3列目　(´・ω・`) 1-3
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
2行1列目　(´・ω・`) 2-1
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
2行2列目　(´・ω・`) 2-2
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
2行3列目　(´・ω・`) 2-3
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
3行1列目　(´・ω・`) 3-1
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
3行2列目　(´・ω・`) 3-2
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
3行3列目　(´・ω・`) 3-3
</td>
</tr>
</table>

ご用意しましたのは実験用なので、多くのデータセルを配置しましたが、表（table）を作成するときは通常、データセル（ｔｄ）はひとつ作成したものをコピーして作成しますので、最初に線の太さや色を決めてしまえば手間はかかりません。ただし、このように表（table）を作成してから、装飾を変更するときには、全てのデータセル（td）の変更をしなければならないので、ご注意くださいませ。

いかがでしたでしょうか？表（table）の HTML の記述方法に詳しい方は指定意外の属性を加えればプレビュー画面で確認しながら、さまざまな表が作成できると思います。

けれど、CSS の指定を少し変更したり、そのままで使用したい方や、CSS に新たなクラスを設定して使用したい方には意味のない作業になりますので、次回は私が実際に CSS のクラス指定を作成するときに行っています、正しく表示される場所で表を作成して、記事にコピー＆ペーストする方法を説明します。
ご興味のある方は、よろしくお付き合いくださいませ。(´・ω・`)ｂ

※ 2009年07月11日の記事を、加筆、修正して全文書き直しました。

※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

≪　前の記事に戻る　｜　次の記事を読む　≫