Lifehack

日々の生活をより良いものに!生産性を高めるためのノウハウや健康に生きるための知識を提供。人生を豊かにするためにライフハックを学ぼう!

はてなブログで表を作るのは超簡単【はてなブログをデザインしよう】

f:id:ruichaosmyth:20200302203821j:plain

記事の見やすさにこだわり始めると、どうしたら見やすくなるのか、ひたすら考えるものです。そのような状態で、他人の記事を分析していると、「表が挿入されてる記事って見やすいし、かっこいいな!」なんて思ったり。

表を挿入するには一体どうしたらいいと思いますか?

 

答えは、Excelデータをコピー(Ctrl+C)して、記事内で貼り付ける(Ctrl+V)」たったこれだけで表の挿入が完了しちゃうんです。その他にも、3つの作成方法がありますので、順に紹介していきます。

 

①エクセルから挿入してみよう

正直この方法が一番簡単です。

まずはエクセルを立ち上げてください。

Excelをもってないって人は無料版のExcel Onlineを利用しましょう

f:id:ruichaosmyth:20200301180137p:plain

表を作成したら、表を選択してコピーします(Ctrl+C)

そして、記事上で貼り付けます。※貼り付けるときは、「Ctrl+C」のショートカットを使ってください

  朝型 昼型 夜型
必要睡眠時間 7時間 7時間 7時間半
割合(人口) 20% 50% 20%
覚醒する時間 8時から 10時から 17時から

貼り付け後、サイズを好みに変更します。また、張り付けた後であれば、表内の文字を編集することも可能です。

 

表の塗りつぶしもできる

f:id:ruichaosmyth:20200301220838p:plain

Excel内で、表の塗りつぶしを行った後にコピーをし、はてなブログ記事上で貼り付けを行うと下図のように、色を付けることも可能です。

 

  朝型 昼型 夜型
必要睡眠時間 7時間 7時間 7時間半
割合(人口) 20% 50% 20%
覚醒する時間 8時から 10時から 17時から
罫線は表示されない

無料版のオンラインExcelを使用し、Windowsのパソコンを使っていた場合、罫線が反映されない場合があるようです。しかし、罫線が反映されなかったとしても、上記の図のようには反映されますので、気にならない方は、Excelからの貼り付けを愛用すると良いでしょう。

 

【追記】

表のCSSを設定しておけば、Excelから引っ張ってきた表にも罫線を付けることができます。詳しくはこちらの記事をご覧ください。

www.sejuku.net

 

②テーブルタブ作成ツールを使う

まずはこちらのテーブルタブ作成ツールを開きます。

テーブルタグ作成ツール - 無料ツール.net

 

開いたら下図の画面に移動すると思いますので、赤線で囲んでいる部分に記入していきます。行や列に、余り・不足などが出た場合は調整しましょう。

f:id:ruichaosmyth:20200301224533p:plain

 

入力が終わったら、プレビューを確認し、問題なければ下図の赤線で囲んでいる、コードをコピーします。

f:id:ruichaosmyth:20200301225137p:plain

 

コピーしたら、はてなブログのHTML編集を選択し、表を設置したい場所に先ほどコピーしたコードを貼り付けます。 

f:id:ruichaosmyth:20200301225442p:plain

 

貼り付け後に確認すると、表が挿入されているはずです。この方法だとExcelの方が良いように感じますが、テーブルタブは罫線が表示させます。よりきっちりした表を簡単に作りたいという方は、こちらの作成方法が合っているでしょう。

  水の呼吸 雷の呼吸
壱ノ型 水面斬り 霹靂一閃
弐ノ型 水車 稲魂

 

 

③Ultra Oficeを使う

Excelの方法で表を作成したいけど、「罫線のCSSを設定するのがめんどくさい」って方には、「Ultra Office」がおすすめです。無料でありながら、Excelアプリと同じように使うことができます。

Ultra Officeのダウンロードはこちらから

 

「Ultra Office」の良いところは、表貼り付け方法はがExcelと全く同じでありながら、罫線まで表示できることです。下図は、実際に「Ultra Officeから張り付けた表になります。

当分含有量(シュガー1本あたり3g)
コカ・コーラ 500ml 19本分
午後の紅茶ミルクティー 500ml 13本分

 

はてな表記モードから作成

見たままモードで編集している方が多いと思うので、あまりお勧めはできませんが、一から表を作る方法存在します。

【公式】表組みをつくる(表組み記法) - はてなダイアリーのヘルプ

まず大前提として、編集方法を「見たまま」から、「はてな記法」に変更する必要があります。また、はてな記法」で記事を書き始めると、途中から、「見たまま」に変更することができませんのでご注意ください。

f:id:ruichaosmyth:20200301233048p:plain

編集モードを「はてな記法」に変更したら、下記のようなコードを入力します。基本は、半角の縦棒「 | 」で区切り、項目名は頭に「 * 」を付けます。

|*魚|*果物|*野菜|
|カンパチ|イチゴ|キュウリ|
|キンメダイ|メロン|ニンジン|

コードを、下図のように入力したら、プレビューで確認してみましょう。表が完成しているはずです。

f:id:ruichaosmyth:20200301233746p:plain

 表の項目の色はグレーだったと思いますが、CSSを設定することで、色味を付けることも可能です。詳しくは下記の記事を参考にしてください。

www.snow0303.com