1. 画像左・折り返し(例)  ↓:HTML

 <p><a href="index2.html" target="_blank"><img border="0" src="yosi2.jpg" title="ここに吹き出し文字を記述します。" align="left" width="100" height="75"></a> <font size="2"> 1. 画像左・折り返し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 2. 画像右・折り返し(例)  ↓:HTML

<p><a href="http://www.google.com/intl/ja/" target="_top"><img border="0" src="yosi3.jpg" align="right" title="ここに吹き出し文字を書いたるんや!。" width="100" height="75"></a> <font size="2"> 2. 画像左・折り返し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

 3. 画像上・折り返し無し(例)  ↓:HTML

<p><a href="http://www.alltheweb.com/" target="_self"><img border="0" src="hamamugi.jpg" title="マウスオーバーで表示する文字や、”バルーン”。" align="top" width="106" height="80"></a> <font size="2"> 3. 画像上・折り返し無し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

 4. 画像中央(縦)・折り返し無し(例)  ↓:HTML

<p><font size="2"><a href="http://windowsmedia.microsoft.com/" target="_blank"><img border="0" src="katabami.jpg" align="middle" title="代替え表示文字をここに書くのサ〜*。" width="109" height="80"></a> 4. 画像中央(縦)・折り返し無し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

 5. 画像標準・折り返し無し(例)  ↓:HTML

<p><a href="http://entertainment.msn.com/" target="_parent"><img border="0" src="sora1.jpg" title="タグでテキストを記述したんだよ…*。" width="100" height="75"></a> <font size="2"> 5. 画像標準・折り返し無し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

ホーム へ       サンプルページ  画像配置  gazouhaiti.htm

画像の、左・右・上・中・下に、テキストを配置(折り返し有・無)。  HTML。  画像、配置などのカスタマイズはテキストエディターなどで可。  all 対応。  コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、 Winサイズの変化 、マウスオーバー時の吹き出し、画像からのリンク先オープンなどで。

 

< ご使用方法 >

 ・ 保存gazouhaiti.htmwttec.gif を右クリック、又は画像を右クリック 【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。  ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。

 ・ ペーストは、♪ をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。   ※: テキストモードコード/HTMLタグ挿入/HTMLメニュー など。

 ・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。  下記の(例) (*1) と、(*2)  を参考に太字部分の編集を任意に行います。 

※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。  画像の alt タグは不可、サイズ指定の pt などの省略は注意。  スクリプト構文中への 改行混入注意。

 ・ アップロードは、hogehoge.htm と同じホルダーに、使用してる 上記画像 などがあればアップロードします。   別ホルダーの場合は、hogehoge.htm の該当パス注意。  転送モード注意。

 ・ 作動テストは Edge〜 などで。  更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。  (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。  更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。  留めに、(3) サーバーのファイルを一旦削除。

 ・ 関連情報 : 色記号 RGB5 〃6 〃8 フォントスタイルシートリファレンスホームページ開設入門HTMLをテキストエギタ-で編集

 

(*1) gazouhaiti.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

URL前・ツールバーに表示のアイコンファイル名(削除可)favicon_**.ico など

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 画像 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

お気に入りなどに表示 : ページ名(≠ファイル名)

 

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none }
a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:メイリオ.Lucida Sans Regular,MS PGothic,; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  画像配置</title>

(*2) gazouhaiti.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

 

1.

画像からのリンク 新しいWinで開く

画像外枠太さ 画像ファイル名・URL 吹き出し 画像左折り返し 画像幅 〃高さ 連番 テキスト

以下、同様。


 

2.  ページ全体で開く
画像右折り返し

 

 

 

 

 

3. 同じフレームで開く
画像上折り返し無し

 


 

 

 

4. 新しいWinで開く
画像中央(縦)折り返し無し

 

 


 

 

5. 親フレームで開く
画像標準折り返し無し(タグ記述無し)、 画像下折り返し無し  align="bottom" と同じ。

 

<p><a href="index2.html" target="_blank">

<img border="0" src="yosi2.jpg" title="ここに吹き出し文字を記述します。" align="left" width="100" height="75"></a> <font size="2"> 1. 画像左・折り返し(例)  ↓:HTML</font></p>
<p><font size="2"> &lt;p&gt;&lt;a href=&quot;index2.html&quot;
target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;yosi2.jpg&quot; alt=&quot;ここに吹き出し文字を記述します。&quot;
align=&quot;left&quot; width=&quot;100&quot; height=&quot;75&quot;&gt;&lt;/a&gt; &lt;font
size=&quot;2&quot;&gt;画像左・折り返し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>
<p> </p>

<p><a href="http://www.google.com/intl/ja/" target="_top"><font size="2">
<img border="0" src="yosi3.jpg" align="right" title="ここに吹き出し文字を書いたるんや!。" width="100" height="75"></font></a><font size="2"> 2. 画像右・折り返し(例)  ↓:HTML</font></p>
<font SIZE="2">
<p>&lt;p&gt;&lt;a href=&quot;http://www.google.com/intl/ja/&quot; target=&quot;_top&quot;&gt;&lt;img border=&quot;0&quot;
src=&quot;yosi3.jpg&quot; align=&quot;right&quot; alt=&quot;ここに吹き出し文字を書いたるんや!。&quot; width=&quot;100&quot;
height=&quot;75&quot;&gt;&lt;/a&gt; &lt;font size=&quot;2&quot;&gt;画像左・折り返し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p>
</font>

<p> </p>
<p> </p>

<p><a href="http://www.alltheweb.com/" target="_self"><font size="2">
<img border="0" src="hamamugi.jpg" title="マウスオーバーで表示する文字や、”バルーン”。" align="top" width="106" height="80"></font></a><font size="2"> 3. 画像上・折り返し無し(例)  ↓:HTML</font></p>
<font SIZE="2">
<p>&lt;p&gt;&lt;a href=&quot;http://www.alltheweb.com/&quot; target=&quot;_self&quot;&gt;&lt;img border=&quot;0&quot;
src=&quot;hamamugi.jpg&quot; alt=&quot;マウスオーバーで表示する文字や、”バルーン”。&quot; align=&quot;top&quot; width=&quot;106&quot;
height=&quot;80&quot;&gt;&lt;/a&gt; &lt;font size=&quot;2&quot;&gt;画像上・折り返し無し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>
<p> </p>

<p><font size="2"><a href="http://windowsmedia.microsoft.com/" target="_blank">
<img border="0" src="katabami.jpg" align="middle" title="代替え表示文字をここに書くのサ〜*。" width="109" height="80"></a> 4. 画像中央(縦)・折り返し無し(例)  ↓:HTML</font></p><font SIZE="2">
<p>&lt;p&gt;&lt;font size=&quot;2&quot;&gt;&lt;a href=&quot;http://windowsmedia.microsoft.com/&quot;
target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;katabami.jpg&quot; align=&quot;middle&quot;
alt=&quot;代替え表示文字をここに書くのサ〜*。&quot; width=&quot;109&quot;
height=&quot;80&quot;&gt;&lt;/a&gt; 画像中央(縦)・折り返し無し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>
<p> </p>

<p><a href="http://entertainment.msn.com/" target="_parent">
<img border="0" src="sora1.jpg" title="alt=&quot;  &quot; タグでテキストを記述したんだよ…*。" width="100" height="75"></a> <font size="2"> 5. 画像標準・折り返し無し(例)  ↓:HTML</font></p>
<font SIZE="2">
<p>&lt;p&gt;&lt;a href=&quot;http://entertainment.msn.com/&quot; target=&quot;_parent&quot;&gt;</p>
<p>&lt;img border=&quot;0&quot; src=&quot;sora1.jpg&quot; alt=&quot;alt=&amp;quot;  &amp;quot; タグでテキストを記述したんだよ…*。&quot;
width=&quot;100&quot; height=&quot;75&quot;&gt;&lt;/a&gt; &lt;font size=&quot;2&quot;&gt;画像標準・折り返し無し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>