はてなブログでブログを書いていると表を使いたい！！
ってことがあると思います。
はてなブログでは、wordpressのような表を簡単に作れるような補助がないので(私が知らないだけ？)自分で作成する必要があります。
今回は、簡単に表を作る方法を説明していきます！
Excel等で票を作って写真を張り付ける！
たしかに、この方法もありですね！
しかし、画像の表では不便な部分もあります。
①SEO的に画像中の文字まで判別してくれない。
②読者がページ内で文字列を検索しても引っかからない(Ctrl＋F等)
③表の行数が多くなった時にソートできない！
などの問題点があります。
①はニッチな情報ではない限り影響しませんし、②、③も小さな票の場合は影響が少ないので表の規模によってはこの方法でも十分だと思います！
この方法のいい所は簡単！！ってところですよね！
Googleスプレッドから張り付ける
次の方法がGoogleスプレッドから張り付ける方法です。
何故、Excelではないかと言うと無料で使えるので皆さん真似できるためです！
このGoogleスプレッドが有能すぎてプライベートのパソコンにはExcelは必要ないと思っています。
個人で使うには高すぎですしね…
やり方は簡単でGoogleスプレッド上で表を作ってコピーし、はてなブログ上で貼り付けるだけ！
コピーして貼り付けするだけで、下の表ができあがります。
※デザインのCSSで表へのデザインを設定しているため、線がついています。
| NO | お菓子 |
| 1 | チョコレート |
| 2 | ポテトチップス |
| 3 | キャンディー |
| 4 | ガム |
| 5 | おかき |
しかも、Googleスプレッド上で色を付けたり枠線を設定すると、その設定も反映されるんです！
上の表を作って、貼り付けると…！
| NO | お菓子 |
| 1 | チョコレート |
| 2 | ポテトチップス |
| 3 | キャンディー |
| 4 | ガム |
| 5 | おかき |
簡単でしょ！？そう、Googleスプレッドならね！
ふざけていますが、貼り付けるだけで簡単に崩れない点はいいですね。
この方法の難点は、HTMLが汚い点でしょうか。もう読みたくないレベルになります。
さきほどの表のHTMLはこんな感じになっています。
SEO的に影響があるのか分かりませんが、ちょっと怖いというのが本音です。
とか言いながら、この記事ではばっちり使っていますが…
この方法のメリットはとにかく楽！ということですね！
Excelのスクショよりも更に楽です！
Googleスプレッドから変換する方法
私のおすすめはこちらの方法になります。
下のエクセルシートをHTMLテーブルに変換しちゃう君(ββ)というサイトを利用する方法になります。
Googleスプレッドで表を作るのは、上で紹介した方法と同じです。
今回は、線や背景等を設定する必要はありません。
使い方は簡単です。
①STEP1の所に作成した表をコピーしたものを貼り付けます。
②STEP2の「CSSを出力しない」にチェックを入れます。
③変換ボタンをクリックします。
④変換ボタンをクリックするとポップアップが表示されますが、そのポップアップを閉じて、STEP3のテキストフィールドにテキストが表示されるのでコピーしてHTMLに貼り付けて使います。
(HTMLに直接貼り付けてください)
最初は間延びしたHTMLになっていますが、一回保存すると、はてなが勝手にインデント等整えてくれます。
素晴らしいですね！
下の表がこの方法で作成した場合です。
| NO | お菓子 |
|---|---|
| 1 | チョコレート |
| 2 | ポテトチップス |
| 3 | キャンディー |
| 4 | ガム |
| 5 | おかき |
HTMLはこんな感じです。
さきほどのHTMLと比べるとかなりスッキリしました！
自分で追加する際にも見やすいですし、デザインのCSSにCSSを書いておけば、1つの記事ごとに書く必要も無くなるのでおすすめです！
表に対してのレイアウト調整の方法はまた、別記事で紹介したいと思います。
ここまで
最後までお読みいただきありがとうございました。