ｓんごのブログ一覧

みんカラブログを充実させる会（第１回）の「画像表示サイズの指定」、
コメントやメッセージ、ありがとうございました。
お返事ついでに、第２回を書き上げてみました。

---

「クリックで拡大」についてのネタバラし。

みんカラの「ブログ」や「フォトギャラリー」では、
自分の投稿した画像や写真が画面上に縮小表示されていて、
画像をクリックすると大きいサイズの写真が表示される機能が付いてます。
今回は「この機能を自分で貼った画像にも実装してしまおう」というのが目的です。

さて、前回説明した方法で、「縮小画像」の表示までは出来ていると思います。
ここからは「前回作った『縮小画像』」をクリックするだけで、
「本来の大きさの画像（元画像）」が表示されるようネタを仕込みます。

「リンク機能」は、みんカラの標準機能で提供されている機能なので、
自分のブログから外へのリンクに使用している方も多いと思います。
（手順→リンクさせたい文字列を「グリッ」と囲って、リンクボタンを押し、URLを打ち込み。）
画像の時も考え方は同様で、「画像のタグ」を囲ってリンクを張る手順です。

それじゃ今回の素材を。↓JPEG Image 800px x 600px 96dpi 24bits color

今回は「元画像」と「縮小画像」との違いが
わかりやすいよう「800 x 600」という
ちょっと大きめの画像を用意しました。

左の画像は、用意した素材を前回の手順に従って
横幅：200ピクセルに縮小表示したものです。
（↓のタグの赤文字は縮小のために追記した部分）

【貼り付けに使用したタグ】
<img src='img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200>


では次に、この「縮小画像」からリンクの結びつけを行います。
まずは、「縮小画像」のタグをマウスで「グリッ」っと囲ってください。

<img src='img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200>
このタグ全体を…
　　↓　　↓　　↓
<img src='img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200>
こんな感じで全部囲みます。

タグが囲めたら「リンク」ボタンを押しましょう。※キチンと全部囲まないとタグが壊れますよ～
ダイアログが表示され、リンク先のURLを求められます。

ここで入力したURLが、画像をクリックした際の飛び先になります。
今回は「縮小してない『元画像』」を表示させたいわけですから、
「縮小画像」のタグの中から、元ネタになっている「元画像」のURLを
コピってもらってきましょう。

【ダイアログに貼り付けたURL】
https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg

ダイアログ入力後「OK」を押すと、組み上がったリンクタグが表示されるハズです。

【出来上がったリンクタグ】
<a href='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' target='_blank'><img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200></a>

このタグを「投稿」や「確認画面」で見てみるとこんな感じになってると思います。↓

どうでしょう？画像にカーソルを乗せると
「人差し指」にカーソルが変わりますか？

変わるのが確認出来たら、
画像をクリックしてみてください。
元の大きさ(800x600)の画像が
画面上に表示されるはずです。

縮小画像からのリンクはコレが基本パターンになります。（あとは画像の数分だけ繰り返し）
どうでしょう？おわかり頂けましたでしょうか？


※リンク先は作り手の考え方次第なので、
　１．フォトギャラリーの１画像そのもの（今回の説明に使用したパターン）
　２．フォトギャラリーの１画像のページ
　３．フォトギャラリーのトップページ
　４．みんカラ以外の外部webスペースの画像
と、色々なパターンがあると思います。
オイラの場合は「クリックで開いて、クリックで閉じる」という
ラクな操作が好きなので、ほとんどの場合「２」を使用してます。