クリックで拡大

【大きな画像を縮小して貼り付けてクリックで拡大する方法】

まず，普通に画像を貼り付けるときの例ですが
<img src="/_images/blog/_563/warainosisya/panda.jpg" width="362" height="318" border="0" align="" alt="panda.jpg" />　で

と表示されます。意味は
src="ファイル名”
width="幅（ピクセル数または%，ただし%はブラウザにより意図されない表示になる事あり）"
height="高さ（ピクセル数または%，ただし%はブラウザにより意図されない表示になる事あり）"
border=”枠線の太さ（ピクセル数）（0にすると表示されない）"
align="画像の位置（topで上，middleで中央，bottomで下，leftで画像を左に配置しテキストを右側に回り込ませる，rightで画像を右側に配置しテキストを左側に回りこませる。省略するとbottomが適用される）"
alt="表示できないときの代替テキスト"
です。たとえば，
<img src="/_images/blog/_563/warainosisya/panda.jpg" width="181" height="159" border="0" align="left" alt="panda.jpg" />
とすると，幅も高さも半分になり，テキストが右側に回り込むわけです。
さて，この画像にリンクを設定しましょう。






<a href="/_images/blog/_563/warainosisya/panda.jpg" target="_blank">
<img src="/_images/blog/_563/warainosisya/panda.jpg"  width="181" height="159" border="0" align="left" alt="panda.jpg" /></a>
とすると，画像にリンクが設定され，クリックすると新しいウィンドウで元の大きさの画像が表示されます。
target="_blank"が新しくウィンドウ＜タブ＞を開くという意味です。
クリックすると新しいウィンドウで拡大表示しますよ♪

といった感じです。　





【おまけ】
カスタムペイン使用するとき，枠いらないんだよなあというとき，コンテンツHTML編集で
<div class="sidebar">
<h3 class="sidebar-title"><% content.title | html %></h3><% content.header -%>
<div class="sidebar-body custom-body">
<% content.free.text | nl2br_filter %>
</div>
<% content.footer-%>
<div class="sidebar-end"></div>
</div>　を

<div class="sidebar">
<% content.free.text | nl2br_filter %>
</div>　とすれば枠がなくなります。真ん中にそろえたいときは

<div class="sidebar" style="text-align:center">
<% content.free.text | nl2br_filter %>
</div>
とすれば良いでしょう。

タグ：画像 クリック 拡大

コメント 16

こんばんは。

ありがとうございます。
自分で調べようと思ったのですが、
解りやすく説明して頂いて助かりますｍ(_ _)m
by bigbang (2008-09-22 02:26) 

次は「onmouseover、onmouseout」かな？
最近使ってる方を見かけたのでｗ
by nano (2008-09-22 05:31) 

おはようございます。
カスタムペインの枠の外し方。
参考にさせて頂きます♪
※箱出ない時は、ホント出ませんよね－－；
毎日ＧＥＴされてる方には、ホントに尊敬しますね。
☆
by デルフィー (2008-09-22 07:19) 

おおっ！お勉強会ですね♪
HTMLはガッチリやったけれど…、
スタイルは後回しにしちゃって！
今となっては、お勉強するのもチョ～面倒です。(-_-;)
気合の入っているときに、一気にやっちゃえば良かった。
by ムーン (2008-09-22 08:58) 

こういうことができたらって思うんですが、羅列をみるとめまいも＾＾；
☆
by sasapand (2008-09-22 09:32) 

さすが先生ですね！
解りやすい説明が、お上手！！＾＾
by Yuki (2008-09-22 09:45) 

ここ、普通に貼ってwidth=とかで調節すると、そうならないのかな。
bigbangさんとか変わった貼り方してたので。
☆
by goro2001 (2008-09-22 12:39) 

げげっ、私いつもパーセントにしてました。
ちゃんと数値を指定した方が確実ですね。
by ティファロックハート (2008-09-22 16:13) 

ＰＣにもお詳しいのですね～
カスタマイズに興味がありますが、難しそうなイメージで・・

by pearl (2008-09-22 16:37) 

ん～やっぱり教えるのが上手ですね(ﾟｰﾟ)
今日は勉強になりましたm(_ _)m☆
by にゃんたま (2008-09-22 17:34) 

いつも「字面」なんて見ないでやってました…。
(だって何がなんだかよーわからんのだもん)σ(^_^;)?
今度よく見てみます。講義有難うございますm(__)m
by felix__U^ェ^Uわん (2008-09-22 18:40) 

へぇ・・・
こうゆう意味だったんですか！
私はただ英語がたくさん並んでいて何がなんだか
分からないだけでした＾＾；

お勉強になりました！！ｍ（＿　＿）ｍ
by リカ６４１３ (2008-09-22 20:54) 

ご訪問ありがとうございました。
また、宜しくお願いいたします。
by yuutomo (2008-09-22 21:11) 

こんばんは。
スタイルって覚えようとおもったんですが…。＾＾；
今日は勉強になりました。ｍ（_ _）m


by チロ (2008-09-22 22:33) 

なるほど、枠を外すことも出来るんですね。
by こぱんだつま (2008-09-22 22:40) 

＞bigbangさんへ
ちょうどいいネタになりました。
＞nanoさんへ
必要な方がいればやりますよ。
＞デルフィーさんへ
今日は，暇だったから良かったのですが，
箱出すのに相当時間とられますね。
＞ムーンさんへ
歳を取ると新しい事を覚えるのがつらいです・・・
＞sasapandさんへ
ちょっと加えたりするだけですから簡単ですって
＞Yukiさんへ
どうもありがとうございます。
Yukiさんと違って，私は不器用です・・・
＞goro2001さんへ
普通に貼り付けた後に数字変更でいいと思いますが・・・
＞ティファロックハートさんへ
一般的なブラウザなら％で大丈夫だと思うのですが。
＞pearlさんへ
凝った事は私も出来ません。
＞にゃんたまさんへ
それじゃあ，いろいろいじってみましょうか。
＞felix__U^ェ^Uわんさんへ
まあ，貼るだけなら簡単ですものね・・・
＞リカ６４１３さんへ
ちょっといじってみると面白いですよ。
＞yuutomoさんへ
こちらこそよろしくお願いします。
＞チロさんへ
覚えようと思ったんですが・・・
やめましたか・・・あらら
＞こぱんだつまさんへ
外せますよ，外したいときはどうぞ。
by 笑いの使者 (2008-09-23 01:01)