TKPnのブログ一覧

こないだ説明した写真の貼り方だと、

サムネイル（小さめの画像）クリック→元画像（大きい画像）が表示

というふうにならないので、ちょっと応用。

応用といっても、私はHTMLをかじったどころか舐めた程度の知識しかありません…ＩＴではメシが食えないスキルです（哀）。

まるそうさんのほうが、1万倍ぐらい「コッチの世界」に明るいですな…。

分かりやすいように、前回貼った事例。

＜img src='https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg' border='0' alt=''width=480 /＞

これだと、480と指定した画像の大きさになりますが、元画像の大きさでは見られません。

そこで、前回の記述（HTMLタグといいます）を、まずはこんな感じに修正します。

＜a href="https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg" target="_blank"＞

修正前：border='0' alt=''width=480 /
修正後：target="_blank"

これだけだと、画面に何も表示されませんので、さらにもう一行追加します。

＜a href="https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg" target="_blank"＞
＜img src="https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg" alt=" border=" 0="" height="360" width="480" /＞＜/a＞

すると、こんな感じ。クリックで拡大されます。



…急に英語記述が倍になったので、もっと分かりやすく。

＜a href="（画像のＵＲＬ）" target="_blank"＞
＜img src="（画像のＵＲＬ）" alt=" border=" 0="" height="360" width="480" /＞＜/a＞

これをコピーして、

（画像のＵＲＬ）部分に、

貼りたい画像のＵＲＬ（今回の例だと、https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg）を貼って＜＞を半角に直せば、あら簡単。（そうでもない？）

最終形はこんな感じ。

＜a href="https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg" target="_blank"＞
＜img src="https://cdn.snsimg.carview.co.jp/carlife/images/User/1007009/p1.jpg" alt=" border=" 0="" height="360" width="480" /＞＜/a＞

上記をコピーして、http…を自分の画像のＵＲＬに書き換えて、＜＞を半角に直すほうが分かりやすいかな？

なお、heightとwidthの部分は、３：４ぐらいの比率になっていれば、見た目も歪みません。あとは好みで調節して下さいな。

お粗末さまでした。