HTML on Word機能紹介:その他機能

埋め込み画像の出力

Word文書上に挿入された画像を出力して、HTMLファイルに<img>タグでリンクして表示できます。

埋め込み画像の出力

Wordの図の配置で指定したレイアウトオプションの種類(折り返しの種類と配置)によって<img>タグにclass属性を付与して出力しますので、その「class」を用いてスタイルを設定することで、Word上での画像の表示状態に近似した表示にすることができます。

詳細はオンラインマニュアルの「図および図の配置」をご参照ください。

HTML on Word オンラインマニュアル

また、コマンドラインからの実行時のオプションで、画像を文字列(データURIスキーム)に変換してHTMLに直接埋め込むこともできます。この場合、画像ファイルは別ファイルとして出力されず、一つのHTMLファイルのみ出力されます。

オプションの指定でスマホ対応、CSS、JavaScriptの指定

オプションの指定でスマホ対応、CSS、JavaScriptの指定

コマンドラインからの実行時にオプションを指定することで、スマホなどの表示に最適なレスポンシブ対応をさせたり、JavaScriptの指定でインタラクティブな表示やユーザーインターフェイスを加えることができます。

レスポンシブ対応に便利なオプション

viewport

HTMLの<head>に次の形式のメタタグを出力します。
<meta name=”viewport” content=”contentに指定した内容”>
「viewport」を設定することで、スマホなどモバイル端末などでの表示状態を設定できます。

コマンドの例

Word2HTML.exe c:\document\manual.docx c:\out\index.html -viewport width=device-width,user-scalable=yes
                     

CSS、JavaScriptの指定

CSS

CSSファイルを指定してHTMLから読み込むことができます。メディアクエリで端末(画面幅)ごとにスタイルを適用することで、スマホなどでも最適に表示することができます。
※CSSファイルは本製品にサンプルを同梱しておりますので自由にご利用ください。

CSSファイルの指定はWordアドインからの変換時とコマンドラインからの変換時に指定することができます。

Wordアドインからの変換時

Wordアドインの「指定したCSSを用いる」オプションにチェックをすると、CSSファイルの指定ダイアログを表示しますので、この画面で使用したいCSSファイルを指定します。

CSSファイルを指定

「HTMLへ変換」を実行すると指定したCSSファイルがHTMLの出力先にコピーされ、HTML内からリンク(相対リンク)されます。出力されたHTMLをWebブラウザで表示すると読み込んだCSSのスタイルが反映されます。

CSSファイルがHTMLの出力先にコピーされ、HTML内からリンク

コマンドラインからの変換時

コマンドラインから実行する場合は次のオプションを付与して実行します。

-css cssfile [media]
                  

「cssfile」箇所にはCSSファイルがあるWindows上のパスを指定します。
「[media]」箇所にはCSSの適用されるメディアの種類(screen、print など)を指定します。指定しない場合は不要です。

コマンドの例

Word2HTML.exe c:\document\manual.docx c:\out\index.html -css c:\document\sample.css screen
                     

コマンドを実行すると指定したCSSファイルがHTMLの出力先にコピーされ、HTML内からリンク(相対リンク)されます。出力されたHTMLをWebブラウザで表示すると読み込んだCSSのスタイルが反映されます。

-cssとCSSファイルの組を複数記述することで、複数のCSSファイルをリンクすることができます。

複数のCSSファイルをリンク

JavaScript

JavaScriptを記述したjsファイルを指定してHTMLから読み込むことができます。JavaScriptをリンクすることでパソコンやスマホでインタラクティブな表示や、操作を快適にするユーザーインターフェイスを実装できます。また、JavaScriptを利用したアクセス解析を導入することもできます。
※jsファイルはお客様で必要なものをご用意ください。
※jsファイルのオプションはコマンドラインからの変換時のみとなります。
※jsファイルはコピーされません。ファイルのパスをHTMLの<head>内に記述するのみとなりますので、指定したパスと同じ場所にjsファイルを保存してください。

コマンドの例

Word2HTML.exe c:\document\manual.docx c:\out\index.html -js sample.js
                  

-jsとjsファイルのパスの組を複数記述することで、複数のjsファイルを指定することができます。

スマホ表示に便利な目次表示

スマホ表示時に目次の表示/非表示用のボタンが設置できるように、タグを出力するようにしました。

スマホ用ボタンタグ
スマホ用ボタンに利用できるタグ
スマホ用ボタンの実装例
スマホ用ボタンの実装例

※ボタンの設置や動作にはjavascriptとcssが必要です。サンプルページにボタンを設置したサンプルを用意していますのでご利用ください。

サンプルページ

サンプルCSS同梱

装飾したWebページをすぐにご利用いただけるように、本製品にサンプルのCSSを同梱しています。お好みに合わせて自由にご利用ください。

また、このサンプルをもとにカスタマイズしていただくこともできますので、少ない作業でWebページを公開することができます。

関連情報メモ

サンプルCSSファイルは『HTML on Word』のインストール先の「CSS」フォルダ内にあります。

インストール時の初期状態のフォルダーの場合: C:\Program Files\Antenna House\xhw21\CSS\

サンプルCSS
CSSファイル名 適用例 スマホイメージ 説明
sample.css
拡大表示 サンプルCSSイメージ sample.css
拡大表示 サンプルCSSイメージ スマホ表示 sample.css
シンプルなデザイン。PC表示時の最大幅を900ピクセルに設定してます。
sample-basic.css
拡大表示 サンプルCSSイメージ sample-basic.css
拡大表示 サンプルCSSイメージ スマホ表示 sample-basic.css
シンプルなデザイン。PC表示時の最大幅が画面幅いっぱいに設定してます。
sample-news.css
拡大表示 サンプルCSSイメージ sample-news.css
拡大表示 サンプルCSSイメージ スマホ表示 sample-news.css
シンプルなデザイン。PC表示時の最大幅が画面幅いっぱいに設定してます。
sample-simple.css
拡大表示 サンプルCSSイメージ sample-simple.css
拡大表示 サンプルCSSイメージ スマホ表示 sample-simple.css
シンプルなデザイン。PC表示時の最大幅を900ピクセルに設定してます。
sample-theme-green.css
拡大表示 サンプルCSSイメージ sample-theme-green.css
拡大表示 サンプルCSSイメージ スマホ表示 sample-theme-green.css
背景を薄いグレー、見出しなどにライムグリーンのアクセントカラーを使用したデザインです。PC表示時の最大幅を900ピクセルに設定してます。
sample-theme-warm.css
拡大表示 サンプルCSSイメージ sample-theme-warm.css
拡大表示 サンプルCSSイメージ スマホ表示 sample-theme-warm.css
背景を薄いイエロー、見出しなどにワインレッドのアクセントカラーを使用したデザインです。PC表示時の最大幅を900ピクセルに設定してます。
sample-toc.css
拡大表示 サンプルCSSイメージ sample-toc.css
拡大表示 サンプルCSSイメージ スマホ表示 sample-toc.css
目次をサイドバーにレイアウトしたデザインです。
モバイル表示時に目次をスライドインさせるにはjavascriptの指定が必要です。
サンプルを用意しましたので、サンプルページをご参照ください。
関連情報同梱のサンプルCSSについて
  • 『HTML on Word』に同梱しているサンプルのCSSファイルはお客様が自由にご利用(Webサーバーへアップロードしてリンクなどを含む)いただけます。
  • また、サンプルをもとにお客様で自由に編集してご利用いただくことができます。

表の装飾

コマンドラインからの実行時に「-tablestyle」オプションを指定することで、Word文書中の表や表のセルに指定されている、背景色や枠線の太さ・色・スタイル(一部のスタイルのみ対応)、表の幅を各HTMLタグのstyle属性で出力します。

Wordの表の装飾をHMTLへ変換
Wordの表の装飾をHMTLへ変換

言語コードの設定

HTMLの言語(lang属性)を任意で指定できるようになりました。コマンドラインからの実行時に「-lang」オプションに続けて言語コードを指定することで、HTMLの言語を指定できます。(例. 日本語の場合:ja、英語の場合:en)

また「-lang」オプションに続けて「none」を指定した場合は、<;html>タグにlang属性を出力しません。

※本オプションの指定がない場合は、従来通りWord文書を解析して「ja」または「en」を設定します。

コマンドオプション 「-lang ja」を指定した例

言語コードの出力結果:日本語を指定
言語コードの出力結果:日本語を指定

特許庁申請用HTML対応

特許庁申請用HTML

Wordで作成した文書を特許庁の申請用HTMLとして使うためのオプションを追加しました。使い方についての説明を用意しましたのでぜひご活用ください。

日本の特許庁HTML作成用オプション利用法