文字をクリックすると画像がポップアップする方法 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ 文字をクリックすると画像がポップアップする方法

① 下記記事でポップアップします。
画像のポップアッププラグインの最新バーション
http://ameblo.jp/new-blue-777/entry-11131277134.html

簡易版のポップアップ でもOKです。


② 画像を記事に載せます。





リアナのカスタマイズ日記(CSS編集用デザイン)


② HTMLタグを表示のタブをクリックしてHTMLを表示します。
  (投稿ボタンの左上にあるタブです)


③ 画像のHTMLタグ部分は下記の様に表示されます。


<a href="http://stat.ameba.jp/user_images/20120421/08/new-blue-777/7d/9e/j/o0800060011927554299.jpg"><img border="0" src="http://stat.ameba.jp/user_images/20120421/08/new-blue-777/7d/9e/j/t02200165_0800060011927554299.jpg" alt="リアナのカスタマイズ日記(CSS編集用デザイン)" /></a>



④ img タグに style="display:none;" を挿入します。
  そしてリンクする文字(文章)を入れます。ここでは、画像①と入れてみます。



<a href="http://stat.ameba.jp/user_images/20120421/08/new-blue-777/7d/9e/j/o0800060011927554299.jpg"><img border="0" src="http://stat.ameba.jp/user_images/20120421/08/new-blue-777/7d/9e/j/t02200165_0800060011927554299.jpg" alt="リアナのカスタマイズ日記(CSS編集用デザイン)" style="display:none;"/>画像①</a>


⑤ 後は、投稿して完了です。








画像①