ブログに商品の比較記事を書こうとしました。
見やすい比較記事には表が欠かせませんよね。
普通の表であれば割と簡単に挿入できますが、セルの結合を含む表は苦労しました。
結果良いツールを見つけたので共有します。
なお私のブログは、テーマ「UnderShirt 」を利用しています。
その他のテーマで上手くいくかはわかりませんのでご理解下さい。
まずはご自身が挿入したい表をエクセルで作成して下さい。
今回は他の記事用に「MacBook の比較表」 を作成しました。
こんな感じで、ヘッダー部分に色をつけ、共通部分のセルは結合しています。
エクセルの表をそのまま貼り付ける
① エクセルで対象部分のセルを選択する。
② マウスを右クリックして「コピー」を選択する。
③ はてなブログの記事編集画面にてマウスを右クリックし「貼り付け」を選択する。
すると、こんな感じになります。
なんか編集画面から表がはみ出してますね。
記事を公開してブラウザで見てみるとこんな感じです。
編集画面では表がはみ出して見えましたが、ちゃんと記事内に収まっています。
ただし、
– ヘッダーの色がなくなっている
– セルの結合がなくなっている
– 中央揃えも無視されている
など、エクセルで作った表とは全く別物になってしまいます。
エクセルの表を HTML で貼り付ける
もう少しきれいな表を挿入したい場合は HTML を使います。
HTML なんてわからない人のために以下のようなツールが公開されています。
① エクセルから挿入したい表をコピーする。
② 「変換しちゃう君」の 「STEP1.?エクセルとかからCSV (TSV)をコピーしてを貼り付け」 に貼り付ける。
③ 「STEP2. オプションを選択して変換」の右サイドにある「CSS を出力しない」にチェックを入れる。
④ 変換ボタンを押す。
⑤「 STEP3. HTML タグをコピーして使う」にHTML が出力される。
⑥ HTML をコピーして HTML 編集画面で挿入したい場所に貼り付ける。
この時に CSS は出力していないので、味気ない感じの表になっています。
表をカスタマイズするには、以下のコードを「デザインCSS」にコピペします。
/* 表 */
.entry-content table {
width:auto; /* 大きさを自動に */
}
.entry-content table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.entry-content table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: #B0DFFF; /* 背景色 */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
.entry-content table td { /* 普通のセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
こちらは「うしるさん」の以下の記事から転用させて頂きました。
（うしるさん、ありがとうございました。）
はてなブログで表を作成する方法とデザインをカスタマイズする方法を紹介しますの！
大きさ、色などの体裁は自由に変更して下さい。
するとこんな感じになります。
色がついて、セルの結合も一応できていますが、文字の中央揃えができません。
（デザインCSS をいじればできるのかもしれませんが、私にはわかりません。）
エクセルの表をイメージで貼り付ける
実は、表をイメージにしてそのまま貼り付けるのが一番簡単です。
（実際にこの記事内のイメージは同じ方法で貼り付けています。）
① エクセルで作成した表を画面キャプチャする。（Windows の場合、PrtSc を押す。）
② ペイントを立ち上げ、貼り付けボタンを押す。
③ 必要な部分のみ選択して「トリミング」ボタンを押す。
④ 名前をつけて保存する。
⑤ はてなブログで写真を挿入する手順で貼り付ける。
これは写真を撮って貼り付けているだけなので、作った表がそのまま掲載できます。
でも、イメージの切り出しでサイズがまちまちになったりして、なんかイマイチ。
セルの結合を含むエクセルの表を HTML で貼り付ける
?他に方法はないのか、Google 先生に聞いてみると、良いもの見つけました。
これ凄く簡単で便利です。
① エクセルで作った表をコピーする。
② 「Table Generator」の File → Paste table data で貼り付け、Load ボタンを押す。
③ 現れた表のイメージを編集する。
エクセルをロードすると以下のように表のイメージが現れます。
この画面でエクセルと同様のオペレーションで「文字の中央揃え」や「セルの結合」ができます。
④ 編集が完了したら Generate ボタンを押す。
（Tables Generator では 「Do not generate CSS」にチェックは入れない。）?
④ 画面下部に出力された HTML + CSS を HTML 編集で貼り付けます。
変換しちゃう君の HTML と Tables Generator の HTML + CSS を HTML 編集画面に貼り付けるとこんな感じになります。
Tables Generator で作成した表は「セルの結合」「文字の中央揃え」が反映されています。
注意点は「デザインCSS」に貼り付けた表の見栄えを調整するコードはそのままにしておく事です。
Tables Generator で作成したコードには CSS も含まれるので「必要なし」と思い、削除したら色とかが消えてしまいました。
分かる人がコードを見れば理由が分かるのかもしれませんが、私には分かりません。
ただ、目的は達成できたので当分はこのまま放おっておこうと思います。
どなたか試してみて、より良い方法、綺麗な設定方法などわかりましたら教えて下さい。
