映画ときどき海外ドラマ

映画のあらすじ、たま~に雑学

【はてなブログ】エクセルで作った表を貼るやり方!Excel初心者でも簡単

【はてなブログ】エクセルで作った表を貼るやり方!Excel初心者でも簡単

 ブログにエクセルで作ったような表(テーブル)があると、情報が伝わりやすくなります。はてなブログでは、はてな記法やMarkdown記法で表を作ったり、エクセルの表を貼り付けることができます。

この記事では、エクセルを使ったことがないExcel初心者に向けて、表を貼り付けるやり方をお伝えします。

 

【はてなブログ】エクセルで作った表を貼るやり方!Excel初心者でも簡単

エクセルで作った表(テーブル)をHTMLに変換して、はてなブログに貼り付けるやり方です。エクセルを使ったことがない人でも、このぐらいの表ならかんたんに作れます。

《完成イメージ》

番組名 放送局 曜日 時間枠
午後のロードショー テレビ東京 月~金

13:40~15:40

金曜ロードショー 日本テレビ 21:00~22:54
サタ☆シネ テレビ東京 27:15~29:00

  ここでは、『Microsoft 365 Personal』のエクセルを使って表を作成してみます。

Office製品にはビジネス用、家庭向け、学生&教職員向けと様々なタイプがありますが、個人ブログ向けには『Microsoft365 Personal(旧Office 365 Solo) 』(旧Office 365 Solo)がおすすめ。

この他、Google スプレッドシートやキングソフトの「WPS Office」など、エクセルに互換性のあるソフトを使う方法もあります。

1.エクセルを起動させ、表を作る

 まず、エクセルを起動させ、「空白のブック」をクリック。

【はてなブログ】エクセル、MicrosoftOfficePersonal

真ん中らへんに、文字や数字などのデータを入力してゆきます。

このとき、上部のアルファベットの左右の枠を動かすと、セル(マス目)の幅を広げることができます。

エクセル、表(テーブル)、セルの幅

入力が済んだら範囲を指定します。

表にしたい範囲を四角で囲んだ状態で、キーボードの【Ctrlキー】+【C】を同時に押します。(Macの場合は、【commandキー】+【C】を同時押し)

 

Excelで作った表、テーブル、範囲を指定

 2.エクセルで作った表を、HTMLに変換する

エクセルで作ったデータをHTMLに変換してくれるサイトさん、『エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)』を開きます。

styleme.jp

画面上部にある空白部分に、コピーしたエクセルのデータを貼り付けます。

「CSSを出力しない」にチェック(✓)を入れ、「変換」のアイコンをクリックします。

エクセルシートをHTMLテーブルに変換しちゃう君、はてなブログ、表(テーブル)

 

すると、下図のような完成イメージを確認する画面が表示されます。この画面を右上の✕で閉じると、STEP3の部分にHTMLタグが表示されます。

エクセルシートをHTMLテーブルに変換しちゃう君、はてなブログ、表(テーブル)

完成したHTMLタグを丸ごとコピーして、はてなブログの編集画面に戻り、「HTML編集」から貼り付けます。

 

《完成図》

番組名 放送局 曜日 時間枠
午後のロードショー テレビ東京 月~金 13:40~15:40
金曜ロードショー 日本テレビ 21:00~22:54
サタ☆シネ テレビ東京 27:15~29:00

 

 実際に貼り付けたHTMLのコードがこちら。

<table>
<thead>
<tr>
<th>
番組名
</th>
<th>
放送局
</th>
<th>
曜日
</th>
<th>
時間枠
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
午後のロードショー
</th>
<td>
テレビ東京
</td>
<td>
月~金
</td>
<td>
13:40~15:40
</td>
</tr>
<tr>
<th>
金曜ロードショー
</th>
<td>
日本テレビ
</td>
<td>

</td>
<td>
21:00~22:54
</td>
</tr>
<tr>
<th>
サタ☆シネ
</th>
<td>
テレビ東京
</td>
<td>

</td>
<td>
27:15~29:00
</td>
</tr>
</tbody>
</table>

 

このようなコードをHTML編集からいちから自分で入力しても、表(テーブル)を作成できます。ただし、手間がかかるので、エクセルで作った表を貼りつけた方が楽です。

Excel初心者でも簡単に表(テーブル)を作れるようになる

このページでご紹介したような表なら、Excel初心者でもすぐ作れるようになります。実際、私もブログを始めるまでは、エクセルに触ったことすらありませんでした。

それでも、下記のようなサイトさんを参考にして、独学でエクセルを学びました。

エクセルで作った表をHTMLに変換してから貼り付けるメリットは、修正しやすいこと。データを直すだけなら、そのまま「編集見たままモード」から修正することもできます。

しかもこの方法は、WordPressでも可能。将来的にWordPressへの移行を考えている人でも、この方法を覚えておけば応用がききます。

【はてなブログ】Markdown記法で表(テーブル)を作るやり方

はてなブログでは、Markdownn記法で表(テーブル)を作ることもできます。

基本は、パイプ記号【 | 】で枠を区切って、中に文字や数字を入れます。パイプ記号は、通常はキーボードの【Enterキー】のそばにあります。

【はてなブログ】Markdown記法で表(テーブル)を作るやり方

《記入例》

|WordPress|はてなブログ|FC2ブログ|
|---|---|---|
|拡張性が高い|SEOに強い|テンプレートが豊富|
|システムの更新が頻繁|PROでないと機能が制限される|30日更新しないと広告が表示|

 

 《出力イメージ》

【はてなブログ】Markdown記法で表(テーブル)を作るやり方

 2行目にマイナス【 - 】を入れると、1行目が色付きの見出し(ヘッダ)となります。

 

さらに、列(=縦のライン)ごとに、左揃え、中央ぞろえ、右揃えに統一することもできます。2行目にコロン【 : 】を入れますが、その位置によって変わります。

  • コロンを左だけに入れる(左揃え)
  • コロンを両サイドに入れる(中央ぞろえ)
  • コロンを右だけに入れる(右揃え)

 

《記入例》

|WordPress|はてなブログ|FC2ブログ|
|:---|:---:|---:|
|拡張性が高い|SEOに強い|テンプレートが豊富|
|システムの更新が頻繁|PROでないと機能が制限される|30日更新しないと広告が表示|

 

 《出力イメージ》

Markdownn記法で表(テーブル)、左揃え、右揃え

 

Markdownn記法では、かんたんな記述で表(テーブル)を作成できるのは利点です。ただ、セル(Excelにおけるマス目)同士を結合させるような複雑な表には対応していません。