ワードの持つワードアートの機能は、魅力あるものです。ワードで作成したワードアートを Web ページに貼り付けてみました。この中では特に、「HTML クリーンアップ」 と 「構文エラー修正」 機能を使って、ワード特有のタグに対処をしております。
今回は、下図のワードアートを例として貼り付けています。
手順は以下の通りです。
この方法は Word 2007 までのワードアートに対応しています
ここで説明する方法は、Word 2007 以前のワードアートに対応しています。
Word 2010 ではワードアートの機能がそれまでとは変更になり、ここで説明する方法は適用できません。Word 2010 の互換モードのワードアートでも適用できません。詳細は Word 2010 の場合を参照ください。
① 下図のようなワードアートをワードで作成します。
② 作成したワードアートを選択してコピーします。
③ ホームページ・ビルダー側の 「ページ編集」 で、ワードアートを挿入する場所にカーソルを持っていき、貼り付けます。
ワードアートを貼りつけた時の HTML ソース
以下が、貼付直後のソースです。驚くべき量です。これがクリーンアップでどのようになるか見ましょう。
HTML クリーンアップ とは
ホームページ・ビルダーの機能で、HTML ソースをチェックし、ページの表示に影響しない無駄・冗長なタグを取り除くなどして、HTML ソースをクリーンアップすることができます。HTML ソースを最適化することでファイル容量を圧縮し、読み込みを軽くすることができます。
④ 「ツール」 から 「HTML クリーンアップ」 そして 「設定」 をクリックします。
「HTML クリーンアップ設定」 ダイアログが表示されます。
⑤ 「HTML クリーンアップ設定」 ダイアログで、設定を確認・変更し、「OK」 ボタンをクリックします。
「HTML クリーンアップ」 を行うと、ページの見栄えが変更されます
「HTML クリーンアップ設定」 の [オプション] で [Pタグ] や [FONTタグ] にチェック マークを付け、「HTML クリーンアップ」 を実行すると、中央揃えにした文字が左寄せになったり文字の色が変わるなど、ページの見栄えが変わってしまうことがあります。
ページの見栄えをまったく変えたくない場合には、[Pタグ] や [FONTタグ] のクリーンアップは実行しないこと。
⑥ 「ツール」 から 「HTML クリーンアップ」 そして「クリーンアップ」 をクリックします。
「HTML クリーンアップ」 ダイアログが表示されます。
⑦ 「HTML クリーンアップ」 ダイアログで、「全て削除」 をクリックし、次に 「OK」 をクリックします。
HTML クリーンアップ後の HTML ソース
以下が、HTML クリーンアップ直後のソースです。
注: src="............" が変更されていますが、これは途中でページの保存がなされたためです。
構文エラーの修正 とは
ホームページ・ビルダーで作成、編集したページには、通常 HTML のまちがいはありません。しかし、HTML ソースを直接編集した場合は、入力ミスなどにより構文エラーが生じる可能性があります。このような場合を想定して、ホームページ・ビルダーの初期設定では、ページを開いたときに自動的に構文エラーが修正されるようになっています。
構文エラーの自動修正を実行したくない場合は、次の手順で設定を解除してください。
HTML の構文をチェックして、エラーを修正することができます。
⑧ 編集中のページに戻ります。「ツール」 から 「HTML構文チェック」 をクリックします。
構文エラーの画面が表示されます。現在編集中のページの構文エラー情報が表示されます。
⑨ 1行目が選択されているところで、「エラー行を表示」 をクリックします。
「エラーを全て修正」 ボタン
ボタンが表示され、クリックできるようになっていれば、[エラー情報] に表示されているエラーをすべて修正してくれることになっています。この例の場合は、クリックできるようになりません。
⑩ 選択され反転表示されている <![if /> を削除します。
⑪ 次に構文エラー画面の2列目を選択して、「エラー行を表示する」 をクリックします。
ソースのエラー行が反転表示されます。
⑫ 反転表示されたエラー行の中で v:shapes= で始まる指定を選択して削除します。
⑬ 構文エラーが消えたことを確認します。構文エラーの画面が残っていたら、「最新の情報に更新」 をクリックします。「エラーはありません」 と出れば、完了です。
⑭ 「閉じる」 をクリックして 「構文エラー」 画面を閉じます。
⑮ ページ編集画面に戻ります。ワードアートが挿入されていること、他のエラーなどが表示されていないことを確認します。
構文エラー修正後の HTML ソース
以下が、構文エラー修正後のソースです。非常にスッキリしました。
Word 2010 の場合、ワードアートはそれまでの Word 2007 までと似て非なるものとなりました。これは標準モードの場合だけでなく、互換モードでも言えます。簡単にいうと、2010 で作るワードアートは図形ではなくなったということです。
このために、Word 2010 で作成したワードアートを Web ページにコピーして貼り付けるには、ワードアートを図形にする必要があります。
幸いワードの機能のコピー・貼り付けで、図形で貼り付けるということができるので、ワード文書の中でワードアートを一旦コピーして図形で貼り付ける操作を行います。次に、図形になったワードアートを再度コピーしてWebページに貼り付けることができます。
① ワードアートをコピーする
② 図形式で貼り付ける
③ 図形式になったワードアートをコピーし、Web ページに貼り付ける
この方法で行った場合、HTMLのクリーンアップも必要なくなり、またHTML構文エラーも無くなります。