2014年09月09日

エクセル風(ZOHO Sheet)で作った「表」をHTMLに変換してブログやサイトに貼り付ける方法

「表」をブログに貼り付ける

 一番、簡単な方法は「表」を画像として貼り付けることですが

  これでは、検索エンジンが表の内容を読み取ってくれません
   (SEO的に不利ですがSEOを気にしない方にはどうでも良いことになります)

そこで管理人がたどり着いた「表」をHTMLに変換して

 ブログやサイトに貼り付ける方法を備忘録として記述しておきます
  (これは管理人の「独り善がり」です、もっと良い方法があるかも知れません)

なお、タイトルに「エクセルで作った[表]」としていますが
 正確にはエクセルに似たZOHO Sheetで作成した「表」です

この、「エクセルで作った[表]」をブログやサイトに貼り付けるには
 以下の操作が新たに要します

 「エクセルで作った[表]」⇒ZOHO Sheetにインポート



「エクセルで作った「表」をHTMLに変換してブログやサイトに貼り付ける方法」は
  こちらをご覧ください
   ↓ ↓ ↓ ↓ ↓ ↓
エクセルで作成した「表」をHTMLに変換してブログやサイトに貼り付ける


  
それでは本題のZOHO Sheetで作った「表」を
 ブログに貼り付ける方法の概略

 @ ZOHO Sheetで「表」を作成する

 A 作成した「表」を [HTMLドキュメント]でエクスポートする

 B TeraPadでHTMLを表示して<TABLE>から</TABLE>までをコピーする

 C <TABLE>から</TABLE>までを記事作成欄に貼り付ける



以下の二つをインストールしておいてください


「ZOHO Sheet」のダウンロード&インストールはコチラ
  今回扱う機能は無料で利用できます
   ↓ ↓ ↓ ↓ ↓ ↓
https://www.zoho.com/docs/
  (ZOHO SheetとはWeb上で利用できる表計算ソフト、共有・共同
   編集・Excelファイルをインポート&エクスポートなどができる)


「TeraPad」のダウンロード&インストールはコチラ
  フリーソフト(無料)です
   ↓ ↓ ↓ ↓ ↓ ↓
http://www.vector.co.jp/soft/dl/win95/writing/se104390.html
   (TeraPadとはフリーで利用できる多機能なテキストエディッター)


↓ ZOHO Sheet新規作成画面

  「ZOHO Sheet」は、Microsoftの表計算ソフト「Excel」と、
   ほぼ同じような操作で「表」を作成することが出来ます

ZOHO Sheet画像
       [全ての画像はクリックすると拡大表示されます]


↓ 「ZOHO Sheet」にて下の画像のような「表」を作ってみました

  この「表」をSeesaaブログに貼り付けます

ZOHO成績表の例

↓ この上の「表」をエクスポート(※下記参照)します

  [ファイル]をクリックします

   次に「マウスポインター」を[次の形式でエクスポート]欄まで
     もってきます

 
ファイルクリック次の形式でエクスポート

↓ そうしますと右横に

 下の画像のような選択画面が表示されます


ZOHOエクスポート形式選択

↓ [HTMLドキュメント]をクリックします

ZOHO HTMLドキュメントクリック

↓ 「ZOHO Sheet」の左下側に
   [HTMLドキュメント]が作成されたことが判ります

ZOHO HTMLエクスポート完了

↓ ここで、「TeraPad」を起動して

 今回の例えで云う「3年2組成績表.html」を
  「TeraPad」のHTML文の表示領域に
    ドラッグ・アンド・ドロップします


ZOHO TeraPad開いてドラッグ&ドロップ

↓ 「TeraPad」にHTMLが表示されます

ZOHO TeraPadにHTML表示

↓ このHTMLの<TABLE>から</TABLE>までをコピーして

  Seesaaブログの記事作成欄に貼り付けます

      (コピー・アンド・ペースト)

ZOHO TeraPadのhtmlコピー

↓ 下の「表」が実際に貼り付けた状態です

 横位置の「中央揃え」、縦位置、塗りつぶしの色、フォントの色、
 フォントのサイズ(「うさ恵」のフォントだけ小さい)など忠実に
 再現表示されています


3年2組 成績表
名前 国語 算数
たぬ吉 65 78
うさ恵 81 54
ワン太郎 62 59
にゃん子 90 77
平均点 75 67

なお、このまま「表」を貼り付けますと上の部分に
 空間ができますので、記事の設定時に
  「改行を<br/>タグに変換しない」にして

 <br/>タグにて改行を指示します

改行を<br/>タグに変換しない.jpg

<br/>タグを使って記事の改行を調整します

【語句説明】
エクスポート:簡単に言うとデータを出して保存したりすること


当サイトの関連ページ
 ↓ ↓ ↓ ↓ ↓ ↓
【INDEX】(総索引)へ




スポンサードリンク
posted by computer at 20:35 | Seesaaブログ カスタマイズ | このブログの読者になる | 更新情報をチェックする


スポンサードリンク








×

この広告は180日以上新しい記事の投稿がないブログに表示されております。