ExcelやGoogleスプレッドシートで作成した表をはてなブログの記事に貼り付ける方法

スポンサーリンク

①ExcelかGoogleスプレッドシートで表を作成する

f:id:ymm_520:20191222143912j:plain

 

②下記のサイトにアクセスする

styleme.jp

③「STEP1. エクセルとかからCSV(TSV)をコピーして貼り付け」に、作成した表を貼り付ける

f:id:ymm_520:20191223191251j:plain

④「STEP2. オプションを選択して変換」の【変換する】をクリック

f:id:ymm_520:20191223213213j:plain

⑤表が作成されるので、右上の✕ボタンをクリックして閉じる。

f:id:ymm_520:20191223213459j:plain

⑥「STEP3. HTMLタグをコピーして使う」のCSSを全選択してコピーする。

f:id:ymm_520:20191223213724j:plain

⑦はてなブログの記事編集画面で「HTML編集」を選択肢、表を挿入したい箇所にコピーしたCSSを貼り付ける。

f:id:ymm_520:20191223214202j:plain

⑧記事に表が反映される。

f:id:ymm_520:20191223214458j:plain

CSSで表のデザインを変える方法

セルの色を変更する

f:id:ymm_520:20191223214915j:plain

th(外側のセル){

 線: 1本線 (線の太さ)px #線の色;
 色: #文字色;
 背景色: #セルの背景色;

}

td(内側のセル){
 線: 1本線 (線の太さ)px #線の色;
 色: #文字色;
 背景色: #セルの背景色;

}

コメント