小さい写真を大きく表示する方法

 令和2年(2020年)4月09日 (日)
 ホームページで小さい写真を大きく表示する方法はサムネールで表示した画像を、別に作った大きい画像にリンクして表示するのが一般的ですが私は少し違うやり方をしています。
以下にその手順を説明します。

1.標示したい写真を決めた大きさに縮小しておきます。

 写真をMicrosoft office Picture Manager を使って、サイズをドキュメント小の800×600ピクセルに統一します。
 これをやっておかないと統一した画像が入れられません

(Picture Managerを使用するのは以前から使っているためです。他のソフトでも構いません。大きさもWeb大で表示するならば640×480ピクセル、ドキュメント大ならば1,024×968ピクセルにします。
必要とする数値を入れてください。)

2.HPB(ホームページビルダー)でHTMLの新規作成をクリックして.文章を入れ、写真を挿入します。(私のサンプルではチューリップとシバザクラの写真を入れました)

 写真は大きな画像がそのまま入るため、画像の上で右クリックし、更に「属性の変更」をクリックしてサイズを100×75ピクセルに変更してクリックするとサムネールの大さになります。

3.HTMLに「hana」と名前を付け、上書き保存します。

4.HTMLの新規作成をクリックして「hana」で挿入した写真のHTMLを作成し、「hana1」という名前を付け保存します。

5.「hana」を開いて4.の「hana1」にリンクを付けます。

6.この状態で5.の「hana」を上書き保存しFFFTPでアップし、画像をクリックすると、右側が広く開いた画像が表示されます。
(参考:私がアップしたhanaというHTMLを開いて画像をクリックしてください)

  この時の写真のHTMLを「ページ編集」ではなく、「ベース/ソース」で開くと、<a href="hana1.html"><img src="hana1.JPG" width="100" height="75" border="0"></a とソースが記してあります。
<a href="hana1.html">はhana1.htmlにリンクしたということです
<img src="hana1.JPG" width="100" height="75" border="0">は、属性の変更で小さくした写真ということです。
 
7.これではスペースが広すぎるので、前項の画像の枠を整えるために「hana」を「ベース/ソース」で開き、 
<a href="hana1.html">の前に<A onclick="window.open(this.href, '_blank','width=800,height=600,scrollbars=no,resizable=no,toolbar=no,
directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"
と、クリックしたときの画像の状態を規制する内容をコピーして書き入れると、余分なスペースがない画像になります。
(参考:私がアップしたhana x を見てください)

 これを私のパソコンで開いた場合、インターネットエクスプローラ(InternetExplorer)で開くとぴったりの寸法に入りますが、エッジ(Edge)やグーグルクローム(Googlechrome)で開くと画像が少し大きすぎて縦・横に少し動かしてみる画像になりますので、出来るだけインターネットエクスプローラで開いてください。


; (この項終わり)
 
 

                  Home