シンプルな表（テーブル）ＨＴＭＬを作って見出しセルの色を変えてみた【はてなブログ】

 

はてなブログで表（テーブル）を使う時にはてな記法を使っていたのですが

見出しの色を変えるのにＣＳＳで一発で変換するものが見当たらない…

いちいち指定するのにも疲れるのでシンプルな表ＨＴＭＬを作ってＣＳＳで色変換してみました

ＰＣ初心者である私の備忘録ですが同じように表の色を変えたい方の参考になれば幸いです

はてなブログで表（テーブル）は「はてな記法」で作れる

まずはてなブログで表を作るやり方を…

①編集をはてな記法にする

半角にして表を作るコードを入力します

  |*  で見出しになります

②右のリアルタイムビューをコピペ

コピペしたら別タブではてなブログの「記事を書く」を開いて見たままモードに貼り付けます

 

③完成

プレビューで確認して反映されていれば完成です

はてな記法の表の色を変えるには直接しかない？？

先ほど作った表のＨＴＭＬを見てみると見出しセルの所に「background:」という項目があります

はてなはグレーっぽいのが基準になっているので色を変えたかったら直接１個ずつ書き換えないといけなさそう…

というのもいろんなＣＳＳを入れてみましたが反映されなかったんです

少しの表なら書き換えも手間ではないですがカラーコードを忘れてしまったり、長い表だといちいち書き換えるのもめんどくさい！

なので表のＨＴＭＬをはてなダイアリーを参考に作ってみました

シンプルな表ＨＴＭＬをつくってみた【コピペＯＫ】

先ほどと同じ項目で作ってみました

ＨＴＭＬはこちら☟

ダブルクリックで一括コピペできます

<div align="center">
<table>
<tbody>
<tr>
<th>名前</th>
<th> 色</th>
<th> 個数</th>
</tr>
<tr>
<th>りんご</th>
<td>赤</td>
<td>１</td>
</tr>
<tr>
<th>みかん</th>
<td>だいだい</td>
<td>２</td>
</tr>
<tr class="last">
<th>ぶどう</th>
<td>紫</td>
<td>３</td>
</tr>
</tbody>
</table>
</div>

横行を追加するなら7番の後に<th></th>を追記し、 各カテゴリーの<td></td>を増やしてください

縦行を追加するなら14~18番を19番の前に追記すれば増えます

PCで見たときに真ん中に表示されるように <div align="center"></div> で挟みました

見出しの色ははてなブログの初期設定であるグレーになっています

このグレーをブログの色に合わせたいのでＣＳＳで変えていきます

ＣＳＳで表の見出しセルの色を変える

あまり濃い色だと表が見にくくなるので薄い色にしました

ＣＳＳはこちら☟

ダブルクリックで一括コピペできます

/*はてな表見出しセル色*/
.entry-content table th {
    background: #fffafa;
}

色は当ブログで使っている薄いピンクになっているのでお好みの色に変えて下さい

最後に：あまり使わないけどあると便利な表ＨＴＭＬ 

はてな記法になれれば小さな表ならはてな記法の方が楽なのですが

色指定がなかなかのめんどくささ…

そんなに頻繁に表は作らないし、いちいち色コードまで覚えていられないので

何とかＣＳＳで色指定できないかと初心者なりに作ってみました

表ＨＴＭＬをＨＴＭＬ編集で先に枠組みだけ作っておけば

あとは見たままモードで編集することができるのでバランスを見ながら文字打ちできます

今回はシンプルな表のＨＴＭＬと見出しセルの色を変えるカスタマイズでした！

表の作り方を忘れないようにと私の備忘録でもありますがお役に立てれば幸いです

表組みをつくる（表組み記法） - はてなダイアリーのヘルプ