【コクーン】ブログの表に罫線と背景色を入れ、数字は中央揃え

今までのブログ記事は表を作らずに箇条書きなどの文章であらわしていましたが、前回の「ビタミンサプリ過剰摂取量」の記事では表がないと分かりづらいので、次のような表を作成してブログに入れました。

その時の苦労を、「ブログの表に罫線と背景色を入れ、数字は中央揃え」という記事にしました。

Contents

ブログに表を入れる色々な方法

ブログに表を入れるのは初めてだったので、色々と確認したところ、次のような方法がありました。

1／最初からHTMLでブログに表を作る。

2／プラグインを使ってブログに表を作る。

3／表をコピーしてペイントに貼り付け、ブログに画像として入れる。

4／表をコピーして、ブログに画像として貼り付ける。

5／以下のWEBサービスを使いHTMLに変換してブログに表を作る。

A:「ExcelのHTMLテーブル化フォーム」
B：「Excel to HTML」
C:「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」

まず、1は考えただけで面倒で気が遠くなったのでパスしました。

2はWordPressにプラグインを入れすぎると、サーバ負荷が大きくなり、ページの表示速度が遅くなるのでパスしました。

3は画像なのでパスしました。

4が1番手っ取り早いので、試してみました。

しかし、後述するようなCSSで簡単にデータセルの色付けができませんでしたので、セルを一個ずつtdからthに変更するか、TinyMCE Advancedなどのプラグインで行う必要があり、パスしました。

5のAは説明を見たところ面倒そうなのでパスしました。Bが楽そうだったので試したのですが、何故か表が変形してうまくいきませんでした。結局、Cの「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」を使って表を作りました。

「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」を使って表を作ったところ、罫線もなければ背景色もない、しかもエクセルで中央揃えしたはずの数値が左寄せになっていました。

そこで、またもや調べて修正しました。

テーマのCSSファイルを直接編集するのはちょっと怖かったので、テーマエディターでスタイルシート (style.css)に書き込まずに、Cocoonの「追加CSS」を利用しました。

追加CSSは、「外観」→「カスタマイズ」→「追加CSS」とたどれば、追加CSSの入力画面になりますので、以下のCSSコードをコピペして追加します。

table th, table td {
border: 1px solid #ccc;
}

最後に上の「公開」ボタンで確定すれば、表の罫線が表示されるようになります。

たぶん、罫線と同じように「追加CSS」にCSSコードをコピペすればＯＫだと思いますが、私は「投稿の編集」画面の下の方にある「カスタムＣＳＳ」にCSSコードをコピペしました。

今後、ブログに載せる表の全てに罫線が表示されてもイイけど、同じ色の表はワンパターンで面白くないと思ったので、「カスタムＣＳＳ」を選びました。

次のように、コードをthとすれば項目名のセルに、tdとすれば数値のセルに背景色がつきます。私は一般的な1を使いました。

1／項目名に背景色をつける

table th {
background: #fff9fc;
}

2／数値のセルに背景色をつける

table td {
background: #fff9fc;
}

これも左寄りから中央揃えにするCSSコードが必要なのかな？と思いながら調べたのですが、簡単な方法は分かりませんでした。

そこで、ダメ元で「投稿の編集」画面を「ビジュアル」モードにして、マウスで指定した数字にCocoonの「中央揃え」を使ったところ、なんとＯＫでした♪

そもそも、「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」の説明をしているサイトでは、こうすれば、普通に罫線と背景色がある表を作れますよという感じで、CSSのお話がほとんどありません。

きっと、プラグインなどで追加CSSが不要なのか、それとも分かっていて当然という知識なのか、よく分かりません（汗

おそらく、styleから/styleまでのコードをどこかに書き込めばイイのでしょうが、その記事を見つけるのも面倒ですし、別にこの方法でいけたので、このまま続けることにしました（笑

というわけで、「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」を使ったけど、表の罫線と背景色が表示されずに、数字も中央揃えにならずに困っているという方は試してみて下さい。

※この記事に掲載されている情報については最新の情報とは限りません。必ずご自身で事前にご確認の上、ご利用ください。