記事の見やすさにこだわり始めると、どうしたら見やすくなるのか、ひたすら考えるものです。そのような状態で、他人の記事を分析していると、「表が挿入されてる記事って見やすいし、かっこいいな!」なんて思ったり。
表を挿入するには一体どうしたらいいと思いますか?
答えは、「Excelデータをコピー(Ctrl+C)して、記事内で貼り付ける(Ctrl+V)」たったこれだけで表の挿入が完了しちゃうんです。その他にも、3つの作成方法がありますので、順に紹介していきます。
①エクセルから挿入してみよう
正直この方法が一番簡単です。
まずはエクセルを立ち上げてください。
Excelをもってないって人は無料版のExcel Onlineを利用しましょう
表を作成したら、表を選択してコピーします(Ctrl+C)。
そして、記事上で貼り付けます。※貼り付けるときは、「Ctrl+C」のショートカットを使ってください
朝型 | 昼型 | 夜型 | |
必要睡眠時間 | 7時間 | 7時間 | 7時間半 |
割合(人口) | 20% | 50% | 20% |
覚醒する時間 | 8時から | 10時から | 17時から |
貼り付け後、サイズを好みに変更します。また、張り付けた後であれば、表内の文字を編集することも可能です。
表の塗りつぶしもできる
Excel内で、表の塗りつぶしを行った後にコピーをし、はてなブログ記事上で貼り付けを行うと下図のように、色を付けることも可能です。
朝型 | 昼型 | 夜型 | |
必要睡眠時間 | 7時間 | 7時間 | 7時間半 |
割合(人口) | 20% | 50% | 20% |
覚醒する時間 | 8時から | 10時から | 17時から |
罫線は表示されない
無料版のオンラインExcelを使用し、Windowsのパソコンを使っていた場合、罫線が反映されない場合があるようです。しかし、罫線が反映されなかったとしても、上記の図のようには反映されますので、気にならない方は、Excelからの貼り付けを愛用すると良いでしょう。
②テーブルタブ作成ツールを使う
まずはこちらのテーブルタブ作成ツールを開きます。
開いたら下図の画面に移動すると思いますので、赤線で囲んでいる部分に記入していきます。行や列に、余り・不足などが出た場合は調整しましょう。
入力が終わったら、プレビューを確認し、問題なければ下図の赤線で囲んでいる、コードをコピーします。
コピーしたら、はてなブログのHTML編集を選択し、表を設置したい場所に先ほどコピーしたコードを貼り付けます。
貼り付け後に確認すると、表が挿入されているはずです。この方法だとExcelの方が良いように感じますが、テーブルタブは罫線が表示させます。よりきっちりした表を簡単に作りたいという方は、こちらの作成方法が合っているでしょう。
水の呼吸 | 雷の呼吸 | |
壱ノ型 | 水面斬り | 霹靂一閃 |
弐ノ型 | 水車 | 稲魂 |
③Ultra Oficeを使う
Excelの方法で表を作成したいけど、「罫線のCSSを設定するのがめんどくさい」って方には、「Ultra Office」がおすすめです。無料でありながら、Excelアプリと同じように使うことができます。
「Ultra Office」の良いところは、表貼り付け方法はがExcelと全く同じでありながら、罫線まで表示できることです。下図は、実際に「Ultra Office」から張り付けた表になります。
当分含有量(シュガー1本あたり3g) | ||
コカ・コーラ | 500ml | 19本分 |
午後の紅茶ミルクティー | 500ml | 13本分 |
④はてな表記モードから作成
見たままモードで編集している方が多いと思うので、あまりお勧めはできませんが、一から表を作る方法存在します。
【公式】表組みをつくる(表組み記法) - はてなダイアリーのヘルプ
まず大前提として、編集方法を「見たまま」から、「はてな記法」に変更する必要があります。また、「はてな記法」で記事を書き始めると、途中から、「見たまま」に変更することができませんのでご注意ください。
編集モードを「はてな記法」に変更したら、下記のようなコードを入力します。基本は、半角の縦棒「 | 」で区切り、項目名は頭に「 * 」を付けます。
|*魚|*果物|*野菜|
|カンパチ|イチゴ|キュウリ|
|キンメダイ|メロン|ニンジン|
コードを、下図のように入力したら、プレビューで確認してみましょう。表が完成しているはずです。
表の項目の色はグレーだったと思いますが、CSSを設定することで、色味を付けることも可能です。詳しくは下記の記事を参考にしてください。