隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

シンプルな表(テーブル)HTMLを作って見出しセルの色を変えてみた【はてなブログ】

f:id:Sakuranbox:20200205185732j:image
 

 

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

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

 

いちいち指定するのにも疲れるのでシンプルな表HTMLを作ってCSSで色変換してみました

 

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

 

 

 

 

 

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

 

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

 

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

f:id:Sakuranbox:20200205160957p:plain



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

  |*  で見出しになります

 

f:id:Sakuranbox:20200205161017p:plain


 

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

f:id:Sakuranbox:20200205161454p:plain

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

 

f:id:Sakuranbox:20200205163809p:plain

 

③完成

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

 

f:id:Sakuranbox:20200205162242p:plain

 

 

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

 

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

 

f:id:Sakuranbox:20200205162345p:plain

 

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

 

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

 

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

 

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

 

 

シンプルな表HTMLをつくってみた【コピペOK】

 

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

 

HTMLはこちら☟

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

 

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

 

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

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

 

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

 

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

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

 

 

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

f:id:Sakuranbox:20200205160919p:plain

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

 

CSSはこちら☟

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

 

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

 

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

 

 

最後に:あまり使わないけどあると便利な表HTML 

 

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

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

 

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

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

 

表HTMLをHTML編集で先に枠組みだけ作っておけば

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

f:id:Sakuranbox:20200205162448p:plain

 

 

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

 

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