はてなブログで面倒な表作成をExcelで解決！ - ハワイ旅行　SmashKf　のつらつらブログ

更新日 2021-06-24

こんにちは SmashKf です。

ブログの内容は文章だけの羅列だと伝わりにくくなってなってしまう場合があります。そんな時は表や図を挿入すると複雑な内容を明確に、効果的に伝えることができたり、視覚的に訴えられるので興味も持ってもらいやすくなります。

そこで今回はブログではちょっと面倒な表作成についての記事です。Excelを使って「HTML」「CSS」の詳しい知識がなくても簡単に表作成する方法をご紹介します。

★合わせて読みたい★

ブログで表を作るのって結構大変だよね？

確かに。だからつい文章だけになってしまいがちだけど、分かりづらいよね。でもExcelを使えば案外簡単に作れるよ！

表作成のイメージ画

はてなブログで表を作る方法

はてなブログで表を作る方法はいくつかります。

今回、１のはてな記法の説明は省略しますが、簡単な表を手軽に作成することが出来ます。はてなブログには３種類の編集モードがありますが、はてな記法を使う場合は「はてな記法モード」を選択します。

２のHTML（+CSS）は複雑な表を作成できますが、専門的な知識が必要になります。

３のExcelで作った表をコピペする方法は普段Excelに慣れている方にとっては非常に簡単な方法です。今回はExcelで作った表をコピペして、HTMLを少し追記する方法をご紹介したいと思います。

Excelの表をツールにコピペしてHTML化する方法もいくつかあるようですが、SmashKfは今からご紹介する方法が気に入っています。

最初にExcelで作成した下の表をはてなブログに貼り付けます。

ハワイ諸島比較表_Excel

Excelの「B2」～「F8」を範囲指定して、はてなブログの編集見たまま画面にコピペします。

コピペして出来たのが上の表です。コピペするだけなので「はてな記法」やHTMLのように長いコードを書かなくて済むので、すごく楽です。

但し、項目の背景色や文字揃えが引き継がれていません。それとスマホなど画面が小さい場合は表の右側が欠けてしまう場合があります。次項で少しHTMLを追記してみます。因みに上の表のHTMLは下の様に記述されています。

コピペした表に少しだけHTMLのコードを追記して元のExcelの表のイメージに近づけます。

最初に少しtableタグの説明をします。表全体は<table>～</table>で囲みます。その中身はtr、tdの組み合わせで構成されます。

trは行、tdはセルを作成します。<tr>～</tr>の間に<td>値</td>を入れ込んで一行を作ります。

上の表の場合、先頭行は<tr><td>島名</td><td>面積</td><td>郡都</td><td>人口</td><td>島の愛称</td></tr>となり、あとはこの繰り返しで行が増やせます。

tr、tdに bgcolor="" を追加すると、行単位、セル単位で背景色が指定できます。先頭行の項目と島名はそれぞれ背景色を指定しました。

HTMLを書き換える時は、はてなブログのHTML編集から<table>～</table>をすべてWindowsアクセサリーのメモ帳（またはテキストエディタ）にコピーして編集します。もし間違った時も簡単にリカバリーできます。

また同一内容の書き換えが多いので、ひとつひとつ書き換えるよりも置換を利用した方が便利です。

tr、tdに align=""を追加すると、セル内の文字の位置を指定できます。（tdの初期値はleftで左寄せです。）１行目の項目は中央揃え、数字のセルは右寄せに指定しました。

CSSでoverflow-x: scrollを追加して横スクロールさせます。滑らかにスクロールさせる機能と自動改行させないプロパティも追加しました。

横スクロールのCSSは<style>～</style>で囲み、表のHTMLは<div id="table-scroll">～</div>で囲みます。