2014年09月11日

エクセルで作成した「表」をHTMLに変換してブログやサイトに貼り付ける

エクセルで作成した表

上のような「表」をエクセルにて作成しましたので

 この「表」を使って

  「エクセルで作成した「表」をHTMLに変換してブログやサイトに貼り付ける」を

    説明していきます

この操作の概略は以下のとおりです

 @ エクセルで「表」を作成する

 A ZOHO Sheetを起動する

 B エクセルで作成した「表」をZOHO Sheetにインポート(※下記参照)する

ここからは以下の当ブログのページで説明しています
   ↓ ↓ ↓ ↓ ↓ ↓
ZOHO Sheetで作った「表」をHTMLに変換してブログやサイトに貼り付ける方法 

 C ZOHO Sheetにインポートした「表」を [HTMLドキュメント]でエクスポートする

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

 E <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起動

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

 「プルダウンメニュー」の[インポート]をクリックします

インポートをクリック.jpg
       [見辛い場合、全ての画像はクリックすると拡大表示されます]

↓ 「インポート」のダイアログボックスが表示されます

  [ローカル・ファイル]のラジオボタンを押して

   [参照]をクリックしてインポートしたいファイルを探します

インポート ファイルの参照

↓ インポートしたいファイルをクリックします
  (今回の例えでは「国連分担金」です)

UPロードするファイルの選択

↓ ファイル名を確認して

  [開く(O)]をクリックします

UPロードするファイルの選択 確認 開く

↓ そうしますと「インポート」の画面に戻ります

  該当するファイルが表示されていることを確認後

   [インポート]をクリックします

参照&ドキュメント名 インポートクリック

↓ 「インポートが成功しました」と表示されます

   「国連分担金」と青文字部分をクリックします

インポートが成功しました

↓ これで「ZOHO Sheet」にエクセルの「表」がインポートされました

ZOHO Sheetにインポートした表

以後は前述のように

 C ZOHO Sheetにインポートした「表」を [HTMLドキュメント]でエクスポートする

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

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

の操作となりますので
   ↓ ↓ ↓ ↓ ↓ ↓

ZOHO Sheetで作った「表」をHTMLに変換してブログやサイトに貼り付ける方法
   をご覧ください


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

2014年国連通常予算分担金
順位 国名 分担率 分 担 金 額    (百万ドル)
1 米国 22.00% 621.2
2 日本 10.83% 276.5
3 ドイツ 7.14% 182.2
4 フランス 5.59% 142.7
5 英国 5.18% 132.2




             出典:外務省ホームページ


「Internet Explorer」と「Chrome」では
  少し表示が違いますのでご承知おきください



【語句説明】
インポート:他のソフトのファイルを読み込み、データ変換をして現ソフトで
       利用できるようにすること



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

【INDEX】(総索引)へ

posted by computer at 15:32 | Seesaaブログ カスタマイズ | このブログの読者になる | 更新情報をチェックする

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ブログ カスタマイズ | このブログの読者になる | 更新情報をチェックする

2014年08月20日

SeesaaブログのHTML文の「%」はどういう働きをするのか(「%」の意味)

最近、Seesaaブログのカスタマイズを

 行っているのですが

  なにしろ、「HTML」も「CSS」もあまり判らないので

   苦労しています

特に、「インターネットエクスプローラー(IE)」と
 「クローム(Google Crome)」では見え方が違う点・・・
   (IEでは正常に表示されるのにCromeでは表示が崩れるなど)

ところで本題ですが、SeesaaブログのHTMLを見てみると

 <% 〜 %>の記述がやたらと多いんです!

  この「%」とは、どういう意味があるんだろう

↓下のような記述です

HTML文「%」意味


「HTML」の入門書などを調べてみましたが

  どこにも書いてい無いじゃあ〜りませんか


そこで、ネットを隅から隅まで(ちょっと大げさ、いやかなり大げさ)

 検索して管理人なりの結論に至りました


この「%」には意味が無い

 サーバー側でのみ判るタグだそうです

 一般ユーザーは無視して良いようです

ということであんまり深く考えずに(私はそうします)

 もっと研究したい方はどうぞ・・・


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



 
posted by computer at 16:46 | Seesaaブログ カスタマイズ | このブログの読者になる | 更新情報をチェックする


スポンサードリンク








×

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