はてなブログで表(テーブル)を使う時にはてな記法を使っていたのですが
見出しの色を変えるのにCSSで一発で変換するものが見当たらない…
いちいち指定するのにも疲れるのでシンプルな表HTMLを作ってCSSで色変換してみました
PC初心者である私の備忘録ですが同じように表の色を変えたい方の参考になれば幸いです
- はてなブログで表(テーブル)は「はてな記法」で作れる
- はてな記法の表の色を変えるには直接しかない??
- シンプルな表HTMLをつくってみた【コピペOK】
- CSSで表の見出しセルの色を変える
- 最後に:あまり使わないけどあると便利な表HTML
はてなブログで表(テーブル)は「はてな記法」で作れる
まずはてなブログで表を作るやり方を…
①編集をはてな記法にする
半角にして表を作るコードを入力します
|* で見出しになります
②右のリアルタイムビューをコピペ
コピペしたら別タブではてなブログの「記事を書く」を開いて見たままモードに貼り付けます
③完成
プレビューで確認して反映されていれば完成です
はてな記法の表の色を変えるには直接しかない??
先ほど作った表のHTMLを見てみると見出しセルの所に「background:」という項目があります
はてなはグレーっぽいのが基準になっているので色を変えたかったら直接1個ずつ書き換えないといけなさそう…
というのもいろんなCSSを入れてみましたが反映されなかったんです
少しの表なら書き換えも手間ではないですがカラーコードを忘れてしまったり、長い表だといちいち書き換えるのもめんどくさい!
なので表のHTMLをはてなダイアリーを参考に作ってみました
シンプルな表HTMLをつくってみた【コピペOK】
先ほどと同じ項目で作ってみました
HTMLはこちら☟
ダブルクリックで一括コピペできます
横行を追加するなら7番の後に<th></th>を追記し、 各カテゴリーの<td></td>を増やしてください
縦行を追加するなら14~18番を19番の前に追記すれば増えます
PCで見たときに真ん中に表示されるように <div align="center"></div> で挟みました
見出しの色ははてなブログの初期設定であるグレーになっています
このグレーをブログの色に合わせたいのでCSSで変えていきます
CSSで表の見出しセルの色を変える
あまり濃い色だと表が見にくくなるので薄い色にしました
CSSはこちら☟
ダブルクリックで一括コピペできます
色は当ブログで使っている薄いピンクになっているのでお好みの色に変えて下さい
最後に:あまり使わないけどあると便利な表HTML
はてな記法になれれば小さな表ならはてな記法の方が楽なのですが
色指定がなかなかのめんどくささ…
そんなに頻繁に表は作らないし、いちいち色コードまで覚えていられないので
何とかCSSで色指定できないかと初心者なりに作ってみました
表HTMLをHTML編集で先に枠組みだけ作っておけば
あとは見たままモードで編集することができるのでバランスを見ながら文字打ちできます
今回はシンプルな表のHTMLと見出しセルの色を変えるカスタマイズでした!
表の作り方を忘れないようにと私の備忘録でもありますがお役に立てれば幸いです