【動画】はてなブログに表を載せる3選!エクセル変換でスクロール(スマホレスポンシブ)


2019年6月8日更新

「はてなブログに簡単に画像を貼り付けるって難しい」と思っていますか?

覚えてしまえばとても簡単ですよ。

【結論】表をキャプチャ(スクリーンショット)して、画像として貼り付ける方法が一番簡単です。

しっかり、表をHTML編集に貼り付けるやり方も載せています。

動画を見て、同じように作業をしてください。

(はてなブログの表が、スマホレスポンシブデザインで見切れてしまうときの対策も書いています)

 

はてなブログ表を載せる3つのやり方

「はてなブログ表を載せる方法」は、おおまかには3つのやり方があります。

  1. スプレッドシート・エクセルで「はてなブログ」に表を載せる方法
  2. はてなブログの表をオシャレに色を付けるやり方(エクセル画像キャプチャ編)
  3. はてなブログのMarkdownで表組みを作成する方法

3つの方法を解説します。

 

【1】スプレッドシート・エクセルで「はてなブログ」に表を載せる方法

【動画】「はてなブログにキレイな表を載せるやり方(エクセルをHTML変換編)」

※エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)の使い方を解説

 

【画像解説】

エクセルやスプレッドシートで表を作成して、表の範囲を選択して「コピー」します。

table作成してコピーするエクセル

 

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)にコピーした表を、そのまま貼り付けます。
tableをHTML変換するソフト

「CSSを出力しない」にチェックを入れて、変換を押します。

表示されたコードを「はてなブログ」の表をHTML編集に貼り付ければ、キレイな表が作成できます。

※横に長い表の場合は、スマホからみると見切れてしまいます。

対応策は下の方に解説があります。

 

【2】はてなブログの表をオシャレに色を付けるやり方(エクセル画像キャプチャ編)

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」だと、はてなブログに表を貼り付けても色がつきません。

色をつけた表の画像をキャプチャ(切り取り)をして、画像として貼り付ければ解決できます。

(※はてなブログに貼り付けた表をスマホで見ると、見切れてしまう場合の対策にもなります。)

【動画】はてなブログにキレイな表を載せるやり方(エクセル画像キャプチャ編)

まずは、エクセルで表に色をつけます。
エクセルで表を作成
エクセルであれば、簡単に表に色をつけられます。(動画でやり方解説しています)
スプレッドシートでも同じです。

この表の部分だけをキャプチャ(切り抜き)して、はてなブログに画像としてはります。

エクセルのキャプチャした表の画像

わたしはファストストーンキャプチャという無料ツールを使用して、画像をキャプチャしています。

Windowsに初期で入っている、「ペイント」という無料ソフトでも表の切り抜きができます!

やり方は動画で解説しています。

 

【3】はてなブログのMarkdownで表組みを作成する方法

はてなブログのMarkdownで表組みする方法は、あまりおすすめはしません

見たままモードを使用できないため、とてもめんどくさいからです。

いままで見たままモードで記事を書いていた方は、書き方が違うため苦戦するとおもいます。

 

はてなブログのMarkdownで作る表はこんな感じです。

はてなダイアリーヘルプページキャプチャ画像

どうしてもやりたい方はこちらの記事をお読みください。

表組みをつくる(表組み記法)

 

はてなブログの表がスマホレスポンシブデザインで見切れてしまうときの対策

はてなブログの表がスマホの「レスポンシブデザイン」でみると、見切れてしまっています。

スマホだとtableが見切れてしまう

以下の方法で対策をしましょう。

 

【表が見切れてしまう対策1】(表の画像をキャプチャする)

表の画像をキャプチャする方法は、上記で説明しました。

動画でも解説していますので、そちらをご覧くださいね!

 

【表が見切れてしまう対策2】tableを使って表を横スクロール(スライド)させる方法

エクセル スプレッドシート 画像の表 a b c d
難易度 ★★★ ★★★ ★★★ ★★★ ★★★
見やすさ ★★ ★★★ ★★ ★★ ★★ ★★ ★★
相性 ★★★ ★★★ ★★★ ★★★ ★★★ ★★★

↑スマホからみると、表がはみ出てしまっています。
 

【動画】はてなブログに表を載せる方法!エクセル変換でスクロール


 

【1】はてなブログの「デザイン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;
}

デザインCSSの場所説明
【2】エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」で表の「HTMLコード」を作成する。

 

【3】作成した「HTMLコード」を「ここに「変換君で作成した表のコード」を入力します」を消して、貼り付ける。


<div class="scroll"> 
ここに「変換君で作成した表のコード」を入力します
 </div>

できあがったコードを「はてなブログのHTML編集画面」に貼り付けます。

はてなブログのレスポンシブデザインでも、横スクロールできる表が完成します。↓
横スクロールできるデザインに変更

はてなブログの記事編集→スマホのプレビューで見てみましょう!