f:id:mikotomikaka:20190929172146p:plain

f:id:mikotomikaka:20190920063047j:plain

記事を書いていくうえでExcelみたいな表を作ってより見やすくしたいなと思いませんか ?はてなブログでは表を作る時に表作成のショットカットみたいな項目が有れば便利なのですが無いので今まで表を作成することは有りませんでしたが今後のブログ運営には役に立つので表の作り方を調べてみました。そしてHTMLでコードを書くより簡単な方法を紹介したいと思います。

表を作成するにはExcelからコピーして貼付けると簡単です

表を作成する

今回作成した表はこちらです

日付	アクセス数	評価	累計アクセス
9/22	299	C	352
9/23	1514	A	1866
9/24	436	B	2302

先程も書きましたがはてなブログでは表を作成するショートカットキーみたいな項目が有れば便利ですが項目は有りません。表を作成するにはHTMLで書く、はてな記法モードで書くしか有りません。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

価格:2,440円
(2019/9/29 20:31時点)
感想(4件)

HTMLで書く

先程の表をHTMLで書くと

<table width="310">
<tbody>
<tr>
<td width="55">日付</td>
<td width="92">アクセス数</td>
<td width="72">評価</td>
<td width="91">累計アクセス</td>
</tr>
<tr>
<td>9/22</td>
<td>299</td>
<td>C</td>
<td>352</td>
</tr>
<tr>
<td>9/23</td>
<td>1514</td>
<td>A</td>
<td>1866</td>
</tr>
<tr>
<td>9/24</td>
<td>436</td>
<td>B</td>
<td>2302</td>
</tr>
</tbody>
</table>

この様に書きます

4×4の16マスの表をHTMLで書くとこのように書き簡単な表でも多くのコードを書かないといけないのでとても大変です

f:id:mikotomikaka:20190921170741p:plain

はてな記法モードで書く

はてな記法モードで表で書くと、、

|*日付 |*アクセス数 |*評価 |*累計アクセス
|*9/22 |*299 |*C |*352
|*9/23 |*1514 |*A |*1866
|*9/24 |*436 |*B |*2302

この様に書きます

|*で区切りを入れていく事で表を作成することが出来ますHTMLでコードを書くよりかは文字数が少なくなるので少し楽になります。

f:id:mikotomikaka:20190920063047j:plain

Excelから貼付ける

表を作成するにはHTMLで書くよりはてな記法の方が楽ですが〇×〇のマス目が多くなるほど表を作成するのが大変になりますそこでお勧めしたいのがExcelで表を作ってはてなブログに貼付ける方法が個人的には一番簡単だと思います。

f:id:mikotomikaka:20190929193354p:plain

表を作成して範囲を指定してコピー(Ctrl+C)をします。次に見たまま編集で画像を貼付けたい場所で右クリックで貼付けか(Ctrl+V)で貼付けます

f:id:mikotomikaka:20190929193907p:plain

この作業だけで、はてなブログ表を作成することが出来るので最初の2つに比べるとHTMLなどで長いコードを書かなくて良いのでとても簡単だと思います。

f:id:mikotomikaka:20190920063047j:plain

f:id:mikotomikaka:20190921170741p:plain

Excelをお持ちでない方は先日紹介した無料で使えるExcelの互換性ソフトLibre Office Calcを使って貼付ける事も出来るのでお試しください。

www.mikotoniomakase.work

まとめ

はてなブログには簡単に表を作成するショートカットキーみたいな便利な機能が無いのでHTMLで書くかはてな記法で書くしか方法が無く少し面倒です。そこでExcelやLibre Office Calcを使って貼付けるだけで表を作成することが出来るので作業時間が短縮できて表を作成したいけど諦めていた方はお試しください。最後まで読んでいただき有難うございます。＼(^o^)／