カテゴリー別アーカイブ: タグの作り方・貼り方

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

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

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

元画像

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

文字を載せた状態

こんな感じです。 ↓

  



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

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

ソース表示部分

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

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

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

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

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

イメージマップのタグをExcelで自動生成する

 ホームページの画像をクリックすると、クリックする場所により、別のリンク先に飛べる「イメージマップ」。

 このタグを簡単にExcelで生成するファイルを作ってみました。ダウンロードしてお使い下さい。

 クリックする範囲の頂点の座標を、黄色いセルに入力するだけでタグが生成されます。多角形の場合は、このタグを作るのはめんどくさいので、ちょっと便利かも。

 座標は、Windows付属の「ペイント」を使って調べます。使用する画像を「ペイント」で開き、「えんぴつ」アイコンをクリックして画像をポイントすると、画面下に座標が表示されるので、それをメモします。X、Y座標が、200,255 のように表示されます。

 黄色のセルに数値が入っていますが、テスト用のダミーです。消して下さい。
 EXCELファイルは、下のフラッシュのような内容です。一番下のピンク色のセルのタグをコピーしてホームページやブログに貼ります。使用する画像のURLの記入をお忘れなく。





 EXCELファイル(ImageMapTag.xlsx)は、下のハチドリのアイコンをクリックするとダウンロードできます。(配布サービスは終了しました)

イメージマップを使ったサンプル

 下の画像をクリックするとイメージマップのサンプルページが別ページに表示されます(下の画像は、イメージマップではありません)。素材は以前EXCELで作ったピンクキャットです。8タイプのピンクキャットが1枚の画像になっています。それぞれの顔をクリックすると、クリックした猫の拡大画像が表示されます。”円”のタグで作っています。カーソルを当てて確認してみて下さい。

p_cat0.jpg

 EXCELで作ったこのピンクキャットは結構気に入っています。フラッシュ版を本館にアップしているので、よろしかったらご覧下さい。管理人のお気に入りのフラッシュです。

『Excel2007で作るGIFアニメーション』へのリンク

 イメージマップは、いろいろな使い方ができます。例えば、地図をイメージマップにして、ある場所をクリックすると、その場所の写真が表示されるなど。

 他には、ある完成図の一部をクリックすると、その部品のアップ写真が表示されるなど。

Seesaaブログのトップタイトルをフラッシュにする

前々からやりたかったブログのトップタイトル、つまりトップバナーをフラッシュにしました。このブログではありません。
(一度フラッシュにしたのですが、また、元に戻しました。 管理人の別サイト『南米植物写真集プランタス』はフラッシュのままなので、そちらをサンプルとしてご覧下さい。)

 本館では、GIFアニメをトップタイトルに使っていましたが、GIFアニメはファイルのサイズがどうしても大きくなるため、ページを開くのに時間がかかかる欠点があり、それは訪問者の負担になってしまいます。この点、フラッシュにすると、大幅にファイルのサイズダウンできる他、様々な効果を入れることができます。

 Seesaaブログでこのような設定をする方法は、ネットで探した限りどこにもありませんでした。そこで、適当に設定してみたら、うまくいきました(笑)。と思ったら、世の中、簡単ではない。Firefoxでは表示されるが、IEでは表示されない。
今日(11/6)、やっと設定し終わりました。

 FirefoxでもIEでも正常に表示されているので、他のブラウザでも大丈夫かなと思います。

【追記 2011.2.15】
 具体的な方法を書きましたので、よろしかったらご覧下さい。
 難しくはないのですが、「めんどくさい」です。やってみれば分かります。

Seesaaブログのトップバナーをフラッシュにする方法