画像をクリックで拡大する設定方法

質問

こんにちは　治療院のＨＰとアメーバーブログを自作しています。

　お客さまアンケートの画像を挿入して、クリックしていただくと

　拡大するような設定にしたいのですが、

　やり方をおしえていただけないでしょうか？

　よろしくおねがいします。)^o^(

回答No.3

Kaneyan-R

アメーバブログがどうなっているかなど知りませんので、質問者様が示された動作になるHTMLを掲示しただけです。

＞(1)まず、ＪＰＧのところに＊＊＊＊.JPGと表示されるような文字列の表示つくれないです。汗
＞ＰＣのペイントやフォトスコープで加工するとＪＰＧでの保存となりますが、画像が実際保存される感じで
＞＊＊＊＊.JPGのような表示にならないので、ここに入れることができない状態です。

何が問題なのか分かりません。
JPEGだろうが、GIFだろうが、PNGだろうが、ブラウザで表示できる画像ならなんでも良いんですけど？

「ここに入れる」とはどこ（何）のこと？

＞(2)ＪＰＧの表示にするのに、アメブロのＣＳＳ編集のところからなんとか＊＊＊＊.JPGの表示にできました。（ここに保存できる容量がかぎられているので、この方法は仮にしか使っていません。）

意味不明。CSSなんて関係ありません。

＞ この＊＊＊.jpgの表示を下に表示していただいたものの＋＋＋.jpgのところに入れてみましたが、
＞ （アメブロのＨＬＭタグ表示のところにです。）
＞< img src="img.jpg" width="横のサイズ" height="縦のサイズ"> < /a> のものを以下の通りいれました。

<a href="http://stat.blogskin.ameba.jp/blogskin_images/20150121/15/bf/MP/j/o02260300yuukou551421821492413.jpg" target="_blank">
<img src="img.jpg" width="500" height="500">
< /a>

画像のURLとファイル名はそれで合ってるんですか？
記事投稿時の仮置き場ってことはないんですよね？

あと、掲示されたタグだと、縮小表示の画像は「img.jpg」と言うファイル名で、記事と同じURLの場所に置いてあるように記載されてますが、そこに本当にあるの？
画像がブログ記事と同じ場所に配置されるブログなんて、見たことないですが・・・

画像のURLが合ってるのなら

<a href="http://stat.blogskin.ameba.jp/blogskin_images/20150121/15/bf/MP/j/o02260300yuukou551421821492413.jpg" target="_blank">
<img src="http://stat.blogskin.ameba.jp/blogskin_images/20150121/15/bf/MP/j/o02260300yuukou551421821492413.jpg" width="500" height="500">
< /a>

こうなりますけど？

＞これをタグの非表示のページにもっていくと、変な文字列がでて画像表示ができなかったです。

意味不明。
「非表示」なんだから表示されないのは当たり前では？

とりあえず今言えることは「HTMLの記述方法を理解して下さい」です。

同じHTMLで拡大表示させているページを適当に作りましたので、参考に。
http://mr4club.flxsrv.org/kaneyan-r/test/img_thmb.html

回答No.2

Kaneyan-R

綴り間違えてましたm(_ _)m

×　<a herf=
○　<a href=

訂正ついでにタグの解説ですが、前者は縮小表示用の小さいサイズの画像を準備しておいて、クリックすると元の画像が別ウインドウ（またはタブ）で表示されるパターン。
後者は元々の画像をwidth（幅）とHeight（高さ）の値に縮小表示させて、それをクリックすると縮小無しで表示させるパターン。表示のされ方はどちらも同じです。

前者と後者どっちが良いかは正直どっちでも良いんですが、メリットとデメリットは次のようになります。

【前者の場合】

メリット
・画像サイズを小さく出来るので、ページの読み込み時間が速くなる。
・別の画像を使える（ボタンやバナー等）。

デメリット
・縮小用画像を別に作る必要がある。
・元の画像を表示させる場合時間がかかる。

【後者の場合】

メリット
・縮小画像を作る必要がない。
・縮小画像と元の画像は同じものなので、元の画像を表示する場合、ブラウザのキャッシュが利用されすぐに表示される。

デメリット
・縮小画像と元の画像は同じものなので、ページの読み込みに時間がかかる。
・別の画像を使えない（ボタンやバナー等）。

と言うわけで、「ページを表示するのを早くしたい」なら前者、「拡大画像をすぐに表示したいなら」後者が良い事になります。

補足

Kaneyan-Rさま
　こんにちは　なんどもありがとうございます。
　2点質問です。
　(1)まず、ＪＰＧのところに＊＊＊＊.JPGと表示されるような文字列の表示つくれないです。汗
　ＰＣのペイントやフォトスコープで加工するとＪＰＧでの保存となりますが、画像が実際保存される感じで
　＊＊＊＊.JPGのような表示にならないので、ここに入れることができない状態です。

　(2)ＪＰＧの表示にするのに、アメブロのＣＳＳ編集のところからなんとか＊＊＊＊.JPGの表示にできました。（ここに保存できる容量がかぎられているので、この方法は仮にしか使っていません。）
この＊＊＊.jpgの表示を下に表示していただいたものの＋＋＋.jpgのところに入れてみましたが、
（アメブロのＨＬＭタグ表示のところにです。）
< img src="img.jpg" width="横のサイズ" height="縦のサイズ"> < /a> のものを以下の通りいれました。

<a href ="http://stat.blogskin.ameba.jp/blogskin_images/20150121/15/bf/MP/j/o02260300yuukou551421821492413.jpg

" target="_blank">
< img src="img.jpg" width="500" height="500">
< /a>

これをタグの非表示のページにもっていくと、変な文字列がでて画像表示ができなかったです。

　何度もすいません。ありがとうございます。

Kaneyan-Rさまへ感謝をこめて☆

回答No.1

Kaneyan-R

<a herf="large_img.jpg" target="_blank">
<img src="small_img.jpg">
</a>

とか、

<a herf="img.jpg" target="_blank">
<img src="img.jpg" width="横のサイズ" height="縦のサイズ">
</a>

とか。あとはJavaScript使うとか。

補足

kanevan-Rさま　回答かりがとうございます。
いただいたＨＴＭＬを使用してなんども試したのですが、うまくいきません。

.JPGのところにＪＰＧの画像を入れてみたり、いったんアメブロでＵＰしてそのＵＲＬを入れてみたりしましたがうまくできませんでした。

お手数ですが、もうすこし詳しくおねがいできないでしょうか？

よろしくおねがいします。<m(__)m>

kanevan-Rさまへ感謝をこめて☆