2017年02月25日

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


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

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

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

WORD文章をHTML形式で出力

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

 『CONVERT WORD DOCUMENTS to CLEAN HTML』

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

CONVERT-WORD-TO-CLEAN-HTML01.jpg


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

CONVERT-WORD-TO-CLEAN-HTML02.png


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

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

WORDでつくったページ

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

  強調文字

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

項 目

種  類

値 段

ミケ猫

50円

不思議猫

100万円

ただの犬

0円

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

*** ここまで ****

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

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

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

 この複数行を1行にするEXCELマクロは、以下の過去記事からダウンロードできます。

 『PDFファイルのテキストをコピーするときに役立つテキストの結合方法


posted by ネコ師 at 01:31 | Comment(0) | 役立つ知識(web編) | このブログの読者になる | 更新情報をチェックする

2017年01月18日

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


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

 
kuzushi-ji-hana.png


 「花」だろうと思うのですが、100%自信があるかと言われるとまったくない。
 そこで、「花」のくずし字はどう書くのか調べてみました。

 東京大学史料編纂所が『木簡・くずし字解読システム』を公開しています。
 ここに、不明な文字の画像をドロップし、[解析する]ボタンをクリック。すると、データベースの中から候補が出力されます。

kuzushiji-analize-system.png


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

kuzushiji-analize-system2.png


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

kuzushiji-analize-system3.png


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

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

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

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

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


posted by ネコ師 at 00:37 | Comment(0) | 役立つ知識(web編) | このブログの読者になる | 更新情報をチェックする

2016年10月11日

「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」と書かれた警告文が表示されています。

Google_Search_Consol_Error1.png


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

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

Google_Search_Consol_Error5.png


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

Google_Search_Consol_Error2.png


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

@ 『Validation Status : FAIL』となっています。エラーがあることを示しています。ちなみに、エラーが消えると『Validation Status : PASS』と表示されます。

A エラーの内容を確認し、サイト内の問題のページを修正します。
B 修正が完了したら、B「VALIDATE」ボタンをクリック。『Validation Status : PASS』と表示されれば修正完了です。

Google_Search_Consol_Error3.png


Google_Search_Consol_Error4.png


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


posted by ネコ師 at 00:13 | Comment(0) | 役立つ知識(web編) | このブログの読者になる | 更新情報をチェックする

2016年05月19日

アイキャッチ画像と文字入れ


 先日書いた「アメ横」の記事で使った下の画像。結構インパクトがあるのではないかと思います。

 今日は、この作り方を書きたいと思います。

Ameyoko005.jpg


 この画像のように、写真の上に大きな文字を書くという手法は、アイキャッチ画像としては優れているように思います。かなりのインパクトがあります。

 しかし、闇雲に文字を書いたのでは期待したようなインパクトのある画像にはならないようです。
 そこで、今回のやり方が重要になります。何をしたのでしょうか(笑)。

アイキャッチ画像に文字入れする


1.フォント
 文字入れするときに最も重要となるのがフォントを何にするかです。
 今回は、『Mgen + 2cp heavy』というフォントを使っています。このフォントは角張っていて、文字に切れがあります。

2.文字間隔
 今回は、Wordで文字を書いています。
 Wordの規定値では文字間隔が広すぎるので、これを狭く設定します。これにより、文字が引き締まった印象になります。

 文字間隔を縮めるには「文字の拡大/縮小」アイコンを使いますが、デフォルトではメニューにありません。そこで、[リボンのユーザー設定]から、「文字の拡大/縮小」を探し、メニューバーに表示します。

 記入した文字を選択した状態で、表示設定した「文字の拡大/縮小」⇒[その他]と進みます。

文字入れ1.png


 [詳細設定]タブで、 [文字間隔]を[狭く]にし、[間隔]の値を[0.6pt]程度に設定します。

文字入れ2.png


3.行間隔とセンタリング

 文字は適当な長さで改行し、行間隔を調整します。また、センタリングします。

 
文字入れ3.png


 上の画像では文字色は黒ですが、最終的には「白」に変更します。
 
 さて、ここからが問題です。これを背景透明のpng形式で出力するのですが、・・・・どうしましょう。
 管理人は、Power Pointにコピーし、出力しています。Wordでもできるかも知れませんが。

 Power Pointで、文字を白に変更して、図として出力します。背景が透明なきれいな文字として出力できます。

 これをPhotoshopなどのレタッチソフトに読み込み、画像の上に重ねています。
 もちろん、Power Point上でその作業をすることもできます。文字が劣化せず、キレイに仕上がると思います。


posted by ネコ師 at 01:16 | Comment(0) | 役立つ知識(web編) | このブログの読者になる | 更新情報をチェックする

2015年10月01日

Googleマップなどの邪魔な検索窓やアイコンを非表示にする方法

 Googleマップは、行き先の確認などで使う機会が多いのですが、困るのがドデカい検索窓が表示されたり、アイコンがあちこちに表示されていて見にくいこと。特に、検索窓が不必要に巨大で、困ってしまう。


inconvenience googlemap view

 このような邪魔な検索窓やアイコンを非表示にする方法を紹介します。bingマップでも同様にできますが、Yahooマップには対応していないようです。


邪魔な検索窓やアイコンを非表示にする方法
 

下の画像のように非表示にします。


google mapの検索窓を非表示にする方法

Firefoxの場合

 ブラウザは、Firefoxで説明します。
1.メニューの[ツール] ⇒ [アドオン]
2.左ペインの[アドオン入手] ⇒ 検索窓に[Fullscreen Maps]と入力して検索。

inconvenience googlemap view


 Firefoxアドオン[Fullscreen Maps]をインストールします。
 インストールが完了すると、メニューバーに「菱形のアイコン」が表示されます。


3.メニューバーの右端にある三本線のメニューアイコンから[全画面表示]を選択
4.メニューバーの菱形のアイコン Logo Fullscreen Maps で、余計な検索窓の非表示/表示の切り替えができます。

 もし、菱形アイコンがクリックではない場合は、アドオンを削除し、上のリンクから再度、インストールして下さい。動かないリンクがありましたので。


Google Cromeの場合

 『FullScreen for GoogleMaps』をインストールします。

 Chromeのアドオン(拡張機能)は『Chromeウェブ ストア』でインストールすることができます。

 検索窓に、『FullScreen for GoogleMaps』と入力して検索します。するとアドオンリストが表示されるので、『FullScreen for GoogleMaps』をインストールします。


inconvenience googlemap sample view

** *** **

posted by ネコ師 at 00:03 | Comment(0) | 役立つ知識(web編) | このブログの読者になる | 更新情報をチェックする

▲ このページのTOPに戻る