2017年07月20日

ブログにExcelの表を貼り付けるいろいろな方法

ブログの記事内に、ちょっとした表を入れたいと思ったときは、HTMLのtable(テーブル)を使うと表を作ることができます。
ブログのエディタによっては、簡単に表を作れる機能を持っているものもあります。
(Seesaaブログや忍者ブログにはその機能があります)

でも、表を作るのは Excel で作った方が全然簡単ですし、作った後の編集や、データのソートなどを考えると、Excel で表を作ってブログに貼り付けられればいいなと思います。

それには、いくつかの方法があります。

表をキャプチャして画像として挿入する


表をコピーして使ってもらったり、表の中の情報も検索エンジンに認識してほしい、などテキストとして使うことが必要ないなら、画像として挿入するのが簡単でいいと思います。

1)Excel上で画像化したい範囲のセルを選択して、コピー([Ctrl]+[C])。
2)ペイントなどの画像処理アプリに貼り付け([Ctrl]+[V])。
3)名前を付けてファイルを保存。(PNG または JPEG で保存がオススメ)。


SnapCrabなどの画面キャプチャーアプリを使うのも、いいと思います。

 高機能スクリーンショットツール SnapCrab - マウスひとつで、即キャプチャ | フェンリル


Excelの表をHTMLに変換するツールを利用する


「Excelの表をHTMLに変換」などの言葉でWeb検索すると、そういった機能のWebサイトが見つかります。
こういったツールを使うと、単なる画像ではないデータとしての表を、ブログに挿入できます。

1)Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited

2)エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

3)Web便利ツール/ExcelのHTMLテーブル化フォーム(簡易版) - TAG index
 

Excel で HTML形式ファイルを出力する(今のところ Seesaaブログ限定)


上の方法を使えば、たいていの場合は問題なく目的を果たすことができます。
ただし、表の中にハイパーリンクを使ったセルがある場合は、そのセルに埋め込まれたリンクが反映されないという問題があります。

例えば、ブログ記事の一覧表を作って、タイトルの昇順でソートしたり、カテゴリーでソートしたりしたものを、ブログ記事内に挿入したいということがあるかもしれません。
どの程度需要があるか分かりませんが、Seesaaブログであればそれが可能です。
(今のところSeesaaブログ以外ではうまくいっていませんが、CSSを適切に設定すれば他のブログでも可能だと思います)

以下、その手順です。

1)Excelの表の中のHTML化したい範囲を選択します。

 このとき、HTML化したい範囲の幅を、ブログの記事部分の幅より小さくしておくと、幅がはみ出さないでうまくいきます。

2)Excel左上の[Office]ボタンをクリックして、「名前を付けて保存」→「その他の形式」の順に進みます。

3)保存したいフォルダを選んで、「ファイルの種類」を「Web ページ」にして、ファイル名を入力します。

4)「上書き保存:」の所を「選択範囲(E): シート」に変えて、[発行]ボタンをクリックします。

SC1771923437.png

5)「Webページとして発行」ウィンドウの[発行]ボタンをクリックします。

SC17719233123.png

6)発行したファイルを、右クリックから「プログラムから開く」を選び、メモ帳またはテキストエディタで開きます。

7)120行目くらいのところに「<table border=0」で始まる行があります。
  そこから、最後より少し上にある「</table>」までを選択してコピーします。

8)Seesaaブログの記事の「ソースコード」をクリックして、7)でコピーしたコードを貼り付けて、[OK]ボタンをクリックします。

SC17719234855.png

9)表の上の「<![if supportMisalignedColumns]><![endif]>」は不用なので、削除します。

SC17719235426.png

10)このままだと罫線が点線で、タイトル行も目立たないので、少し手を加えます。
 「ソースコード」のアイコンをクリックして、コードを表示して以下の変更をし、[OK]ボタンをクリックします。

 ・ 最初の方にある「border="0"」を「border="1"」に変更
 ・ タイトル行部分の左端の「<td」を「<th」に変更
SC17720038.png

11)出来上がりはこんな感じです。

SC177200207.png


今のところ、Seesaaブログでしか上手くいかないのですが、この方法であれば、リンク付きの表でもリンクを生かしたままブログに貼ることができます。

 

にほんブログ村 IT技術ブログ フリーソフトへブログランキングならblogram
この記事へのコメント
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/6504974

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

ブログ内を検索
ファン
最新記事
カテゴリー
最新コメント
ツイッター
広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール