写真の上に文字を書く(ブログ、HP)

web編

 ブログやホームページに掲載する写真の上に文字をのせる方法をご紹介します。写真を加工するのではなく、タグを使って写真の上に文字を表示させる方法です。写真を加工して文字を入れると、どうしてもボケた感じの文字になりがちですが、この方法ならクッキリした文字を表示することができます。

 サンプル画像は、本館で使おうと思っていたパナマ運河の記事のものです。

元画像

(Google Earth)

写真の上に文字を載せるサンプル元画像

文字を載せた状態

こんな感じです。 ↓

  



パナマの写真です
この文字を写真の上にhtmlで書いています
   このページのソースをご覧ください

 ソースからコピーできるのですが、ソースの中を探すのが結構大変かも。コピーするのはソースの中の以下の部分です。

ソース表示部分

 このページのソースを見るには、

 Firefoxでは、ツールバーの [表示]⇒[ページのソース]
 IEでは、ツールバーの [表示]⇒[ソース]です。

 ちなみに、本館の記事は、「パナマ運河建設に参加した日本人がいました」というもので、二回に分けて、青山士(あおやま あきら)とパナマ運河について紹介しています。よろしかったらご覧ください。

パナマ運河建設に参加した日本人がいました(1/2

パナマ運河建設に参加した日本人がいました(2/2)