2011年12月20日

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


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

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

【元画像】(Google Earth)

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


【文字を載せた状態】
こんな感じです。 ↓
  


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

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

ソース表示部分


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

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

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

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

 
posted by ネコ師 at 01:29 | Comment(0) | タグの作り方・貼り方 | このブログの読者になる | 更新情報をチェックする

2011年07月08日

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


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

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

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

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

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






 EXCELファイル(ImageMapTag.xlsx)は、下のハチドリのアイコンをクリックするとダウンロードできます。

タグ生成Excelファイルダウンロードリンク


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

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

p_cat0.jpg


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

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

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



posted by ネコ師 at 01:14 | Comment(0) | タグの作り方・貼り方 | このブログの読者になる | 更新情報をチェックする

2009年10月26日

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

 前々からやりたかったブログのトップタイトル、つまりトップバナーをフラッシュにしました。このブログではありません。

 ご覧になりたい方は、本館『ネコ肉球4個分の幸せ』をご訪問ください。 本館と同じ設定が画像のアップ等で何かと便利なので、このブログも同じ設定にしました。

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

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

 今日(11/6)、やっと設定し終わりました。
 FirefoxでもIEでも正常に表示されているので、他のブラウザでも大丈夫かなと思います。


【追記 2011.2.15】

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

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

posted by ネコ師 at 11:41 | Comment(0) | タグの作り方・貼り方 | このブログの読者になる | 更新情報をチェックする

2009年07月23日

ブログに表を貼ると上にスペースができてしまう

 ブログにTableタグで表を貼り付けた時、表の上部に広くスペースができてしまうことがあります。

 これは、自動で改行が入ってしまうために起きます。
 こんな感じです。表との間にスペースは入れていないのですが、広いスペースが空いてしまいます。










項 目
鳴き声にゃんわん
うなり声フーうぉーん
性格自由奔放順応
社会性協調性なし協調性あり


タグは下のようになっています。このように、複数の行に書くと自動で改行が入ってしまうため、表の上部にスペースができます。
<Table Border><Tr>
<Td>項 目</Td><Td>猫</Td><Td>犬</Td> </Tr>
<Tr>
<Td>鳴き声</Td><Td>にゃん</Td><Td>わん</Td> </Tr>
<Tr>
<Td>うなり声</Td><Td>フー</Td><Td>うぉーん</Td> </Tr>
<Tr>
<Td>性格</Td><Td>自由奔放</Td><Td>順応</Td> </Tr>
<Tr>
<Td>社会性</Td><Td>協調性なし</Td><Td>協調性あり</Td> </Tr></Table>

 スペースが空かないようにするには、改行せずに、続けて書きます。
 こんな感じです。

<Table Border><Tr><Td>項 目</Td><Td>猫</Td><Td>犬</Td> </Tr><Tr><Td>鳴き声</Td><Td>にゃん</Td><Td>わん</Td> </Tr><Tr><Td>うなり声</Td><Td>フー</Td><Td>うぉーん</Td> </Tr><Tr><Td>性格</Td><Td>自由奔放</Td><Td>順応</Td> </Tr><Tr><Td>社会性</Td><Td>協調性なし</Td><Td>協調性あり</Td> </Tr></Table>

 そうすると、スペースの空かない表を貼り付けることができます。



項 目
鳴き声にゃんわん
うなり声フーうぉーん
性格自由奔放順応
社会性協調性なし協調性あり



【追記 2010.11.21】

 実は、このタグをつなげる作業は結構大変です。Seesaaブログの場合には、このようなことをしなくても、スペースの空かない表を簡単に作ることができます。

【方法(Seesaaブログ)】

 [設定]⇒[記事設定]
  「改行HTMLタグ変換」で、[改行を<br />タグに変換しない]にチェックを入れる。
   この設定のあとで『新規記事』を開き、表を書けば、上部にスペースのあかない表ができます。自動で改行されないためです。

 Seesaaブログの場合、この設定は、その記事にのみ適用されます。このタグ設定を変更しても、アップロード済みの記事には反映されません。逆に言うと、アップロードした記事を見て、表がおかしいのでこの設定をしたとしても、その変更は反映されないと言うことです。設定を変更した後で、『新規記事』に張り直すというのが最も早い方法だと思います。

 普段、[改行を<br />タグに変換する]で作業をしているのであれば、表のある記事を書いた後は、忘れずに、もとに戻しておく必要があります。

 
posted by ネコ師 at 09:41 | Comment(0) | タグの作り方・貼り方 | このブログの読者になる | 更新情報をチェックする

2008年04月03日

フリーソフトのホームページエディター「alphaEDIT」をVistaで使う方法


 フリーソフトのホームページエディターとして有名な「alphaEDIT」をVistaで使う方法について。

 このソフトはXPまで対応だが、Vistaでも使える。その方法は、このソフトを使って別ページを作ったので、そちらを見て下さい。
   ↓ このリンクから入れます。

FIREFOXでは正しく表示されないことに気づきました。お手数ですが、INTERNET EXPLOREで開いてみて下さい。 修正しました。



 このソフトは、操作が簡単で、直感的に扱うことができ、すごく便利ですね。

【追記】

 FireFoxで正しく表示されない不具合をやっと直しました。アップした新しいファイルが認識されないという不具合もあり、長い間ご迷惑をおかけしました。検索エンジンにキャッシュされているので、ファイル名を変更したくなかったのですが、どうやってもだめなので、仕方なくファイル名を変更しました。このページから入る方には全く影響ありませんが。

posted by ネコ師 at 21:30 | Comment(0) | タグの作り方・貼り方 | このブログの読者になる | 更新情報をチェックする

▲ このページのTOPに戻る