カテゴリー別アーカイブ: 役立つ知識(web編)

WORDでつくったページをきれいなHTMLに出力する方法

 WORDでホームページが作れると便利です。スペルチェックなどもできるし、表も簡単に作ることができます。

 しかし、問題があります。WORDには作った文章をHTMLとして出力する機能があるのですが、その出力結果を見ると驚くほどタグが多い。不要なタグや重複したタグがたくさんあり、こんなものをアップしたらページの読込に時間がかかるのは間違いない、と思ってしまいます。

 そこで、WORDでつくったページを余分なタグを削除したきれいなHTMLに出力する方法をご紹介します。表が入っていてもきれいに出力できます。

WORD文章をHTML形式で出力

 タグの生成には、以下のサイトのWord文書-HTML変換サービスを使います。外国サイトですが、日本語でも問題なく変換できます。

 『CONVERT WORD DOCUMENTS to CLEAN HTML』
 使い方はとても簡単。WORDの文章を全てコピーして、このサイトの窓に貼り付け、「convert」ボタンをクリックするだけです。

 では、実際にやってみましょう。
 WORDに下のような記事を書いたとします。

 これをHTMLに変換して、このブログに貼り付けると下のようになります。

 **** ここから ****

WORDでつくったページ

これは、WORDで作っています。

 文字の装飾は強調だけ認識できます。

項 目

種  類

値 段

ミケ猫

50円

不思議猫

100万円

ただの犬

0円

 表は、セル内の文字配置に対応しています。

*** ここまで ****

 WORDの文字装飾で反映されるのは、「文字の強調」だけのようです。
 インデントは無効です。
 表は、セル内の文字の配置やセルの結合などは反映できます。
 ハイパーリンクは問題なく使えるのでとても便利です。

 生成されたタグをそのままブログに貼ると、表の上部に広いスペースが表示されてしまいます。これは改行が改行タグとして認識されてしまうために発生するトラブルです。このため、生成されたタグを1行にします。

 この作業は、以前公開した複数行の文章を1行に変換するExcelマクロを使います。このEXCELファイルに生成されたタグをコピーペして、ボタンを押すだけで簡単にできます。

 この複数行を1行にするEXCELマクロは、以下の過去記事からダウンロードできます。
 『PDFファイルのテキストをコピーするときに役立つテキストの結合方法

東京大学の『木簡・くずし字解読システム』がくずし字の解読に使えて便利!

 下の画像の文字は、何と書かれているでしょうか。

 「花」だろうと思うのですが、100%自信があるかと言われるとまったくない。

 そこで、「花」のくずし字はどう書くのか調べてみました。

 東京大学史料編纂所が『木簡・くずし字解読システム』を公開しています。

 ここに、不明な文字の画像をドロップし、[解析する]ボタンをクリック。すると、データベースの中から候補が出力されます。

 リストの中にないので、[さらに見る]ボタンを押して、次の候補リストを表示させます。すると、ありました!

 全く同じです。これで安心して「花」であると言い切ることができます。

 ちなみに、上の画像で[草露貫珠]のリンクをクリックすると、「花」のくずし字がたくさん表示されます。これは本当に便利だ。

 この画像の文字は、1785年に出版された『柚珎秘密箱(ゆうちん秘密箱)』という書物の中の「百柚くすり湯の方」という項目にあるのですが、この文字以外でも分からない文字がたくさんあり過ぎ。

 そう、「花」のあとに続く文字は「柚」。「花柚(はなゆず)」です。柚の果実が「柚子」。中国原産と言われています。日本の歴史書に飛鳥・奈良時代に栽培していたという記載があり、花ユズは日本原産とも言われているそうです。

 管理人のように、古文書をにわか勉強している初心者にとって『木簡・くずし字解読システム』は、とても役立つツールです。

 たかだか100年前の人が書いた文章を読むために、特別な知識が必要となるのってどこかおかしい気がします。100年前の人が書いた文章が読めると、200年前でも、500年前でも、1000年前でも読めてしまうから不思議。

 高校の「古文」の授業のカリキュラム編成に問題があるように思います。くずし字と変体かなの読み方をどこかで習っていたら楽だったのですが。本来は「古文」の授業で学ぶべきことのように思います。

「Google Search Console」からサイトのエラーについての通知が来た

 「Google Search Console」、以前は「Google ウェブマスター・ツール」という名前だったような。ここに登録しているものの、滅多に使うことはありません。

 ところで、先日、「Google Search Console Team」から本サイトのAMPページエラーがありますよ、「AMP ページのエラーを修正してください」というメールが届きました。こんな連絡が来るなんて初めてのこと。ちなみに、AMPとは「Accelerated Mobile Pages (AMP) 」のことです。

 最初に疑ったのは、このメール自体が偽物で、ウイルスではないかということでした。しかし、本物のようです。
 しばらく放って置いたのですが、やはり気になる。そこで、今日は、エラーの解消をすることにしました。
 結論から書くと、ページに使われているhtmlタグが古いタイプで無効だったり、非推奨のものに対してエラーとして認識され、エラーメッセージが送信されるようです。

 今までこんな通知は受けたことなどないし、最近アップしたページに問題が見つかったのかと思ったのですが、そうではなく、過去に遡ってエラーが表示されています。要は、モバイルページに対するGoogleのthml文法判定基準が最近変更になったということでしょう。

 管理人の場合は、「table」タグの中の表の罫線のカラー設定が引っかかったようです。また、色つきラインを引いていた「<hr>」タグもすべて引っかかりました。全部で26記事でエラーが出ています。

 原因が分かれば、修正は簡単です。「table」タグは、最近使っている(公開中の)Excelマクロで表のhtmlタグを出力し、ブログに貼り付け直しました。この方が手間がかからない。

スポンサーリンク




修正手順

1.「Google Search Console」にログインすると、下のような「Fix errors on your AMP pages」と書かれた警告文が表示されています。

2.「詳細を表示」をクリック。開いたページの大きな青いアイコン「See AMP Errors」をクリック。

3.「Accelerated Mobile Pages」のページが開くので、エラーを確認します。「Issue」を見ると、3タイプ、全部で26のエラーがあるようです。一つずつエラーを修正します。最初は、「1. Prohibited or invalid use of HTML Tag」から。これをクリック。

 エラーページのリストが表示されるので、ひとつずつ開いてエラーを修正します。
 
4.エラーページのひとつのリンクをクリックすると下の画面が表示されるので、①の「Run Validator」をクリックしてエラーの内容を確認します。ページの修正には、ページの日付けが必要なので、②のリンクをクリックしてページを表示し、作成日を確認します。

4.「Run Validator」をクリックすると下のページが開きます。

① 『Validation Status : FAIL』となっています。エラーがあることを示しています。ちなみに、エラーが消えると『Validation Status : PASS』と表示されます。
② エラーの内容を確認し、サイト内の問題のページを修正します。
③ 修正が完了したら、③「VALIDATE」ボタンをクリック。『Validation Status : PASS』と表示されれば修正完了です。

 他のエラーも同様に修正します。

 ただし、タグのエラーはどう修正すべきか分からないので、当面、放置します。

スポンサーリンク