【動画】はてなブログに表を載せる３選！エクセル変換でスクロール（スマホレスポンシブ）
2019年6月8日更新
「はてなブログに簡単に画像を貼り付けるって難しい」と思っていますか?
覚えてしまえばとても簡単ですよ。
【結論】表をキャプチャ（スクリーンショット）して、画像として貼り付ける方法が一番簡単です。
しっかり、表をHTML編集に貼り付けるやり方も載せています。
動画を見て、同じように作業をしてください。
（はてなブログの表が、スマホレスポンシブデザインで見切れてしまうときの対策も書いています）
はてなブログ表を載せる３つのやり方
「はてなブログ表を載せる方法」は、おおまかには３つのやり方があります。
- スプレッドシート・エクセルで「はてなブログ」に表を載せる方法
- はてなブログの表をオシャレに色を付けるやり方（エクセル画像キャプチャ編）
- はてなブログのMarkdownで表組みを作成する方法
３つの方法を解説します。
【１】スプレッドシート・エクセルで「はてなブログ」に表を載せる方法
【動画】「はてなブログにキレイな表を載せるやり方（エクセルをHTML変換編）」
※エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)の使い方を解説
【画像解説】
エクセルやスプレッドシートで表を作成して、表の範囲を選択して「コピー」します。
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)にコピーした表を、そのまま貼り付けます。
「CSSを出力しない」にチェックを入れて、変換を押します。
表示されたコードを「はてなブログ」の表をHTML編集に貼り付ければ、キレイな表が作成できます。
上記のような表を作るのがめんどくさいという方は、あらかじめはてなブログの定型文に表を入れておくやり方もあります。
複数の表の形態を用意しておけば、ある程度の表には対応ができます。
コピペだけで表を作るやり方はこちらに動画付きで解説をしています。
※横に長い表の場合は、スマホからみると見切れてしまう可能性もあります。自動調整されて、見きれないで収まることもありますので、作ってみて確認してみてください。
対応策は下の方に解説があります。
【２】はてなブログの表をオシャレに色を付けるやり方（エクセル画像キャプチャ編）
「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」だと、はてなブログに表を貼り付けても色がつきません。
色をつけた表の画像をキャプチャ（切り取り）をして、画像として貼り付ければ解決できます。
（※はてなブログに貼り付けた表をスマホで見ると、見切れてしまう場合の対策にもなります。）
【動画】はてなブログにキレイな表を載せるやり方（エクセル画像キャプチャ編）
まずは、エクセルで表に色をつけます。
エクセルであれば、簡単に表に色をつけられます。（動画でやり方解説しています）
スプレッドシートでも同じです。
この表の部分だけをキャプチャ（切り抜き）して、はてなブログに画像としてはります。
↓
わたしはファストストーンキャプチャという無料ツールを使用して、画像をキャプチャしています。
Windowsに初期で入っている、「ペイント」という無料ソフトでも表の切り抜きができます！
やり方は動画で解説しています。
【３】はてなブログのMarkdownで表組みを作成する方法
はてなブログのMarkdownで表組みする方法は、あまりおすすめはしません。
見たままモードを使用できないため、とてもめんどくさいからです。
いままで見たままモードで記事を書いていた方は、書き方が違うため苦戦するとおもいます。
はてなブログのMarkdownで作る表はこんな感じです。
どうしてもやりたい方はこちらの記事をお読みください。
はてなブログの表がスマホレスポンシブデザインで見切れてしまうときの対策
はてなブログの表がスマホの「レスポンシブデザイン」でみると、見切れてしまっています。
以下の方法で対策をしましょう。
【表が見切れてしまう対策１】（表の画像をキャプチャする）
表の画像をキャプチャする方法は、上記で説明しました。
動画でも解説していますので、そちらをご覧くださいね！
【表が見切れてしまう対策２】tableを使って表を横スクロール（スライド）させる方法
| エクセル | スプレッドシート | 画像の表 | a | b | c | d | |
|---|---|---|---|---|---|---|---|
| 難易度 | ★ | ★ | ★★★ | ★★★ | ★★★ | ★★★ | ★★★ |
| 見やすさ | ★★ | ★★★ | ★★ | ★★ | ★★ | ★★ | ★★ |
| 相性 | ★★★ | ★ | ★★★ | ★★★ | ★★★ | ★★★ | ★★★ |
↑スマホからみると、表がはみ出てしまっています。
【動画】はてなブログに表を載せる方法！エクセル変換でスクロール
【１】はてなブログの「デザインCSS」に以下のコードを貼り付けます。
/* テーブルを横スクロールコード */
table {
width: 100%;
}
/*tableをスクロールを追加*/
/*tableのセル内にある文字の折り返しを禁止する*/
.scroll {
overflow: auto;
white-space: nowrap;
}
/*tableにスクロールバーを追加する*/
.scroll::-webkit-scrollbar {
height: 5px;
}
/*tableにスクロールバーを追加する*/
.scroll::-webkit-scrollbar-track {
background: #F1F1F1;
}
/*tableにスクロールバーを追加する*/
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}
【２】エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」で表の「HTMLコード」を作成する。
【３】作成した「HTMLコード」を「ここに「変換君で作成した表のコード」を入力します」を消して、貼り付ける。
<div class="scroll">
ここに「変換君で作成した表のコード」を入力します
</div>
できあがったコードを「はてなブログのHTML編集画面」に貼り付けます。
はてなブログのレスポンシブデザインでも、横スクロールできる表が完成します。↓
はてなブログの記事編集→スマホのプレビューで見てみましょう！
最新記事 by 石黒敬太 (全て見る)
- 【はてなブログ】Microsoft Clarityの設置方法（ヒートマップ） - 2023年1月29日
- YouTubeでAmazonのアフィリエイト広告を貼る（もしもアフィリエイト） - 2021年12月30日
- 日記が毎日２００アクセスの記事に！ - 2021年11月19日
