いまさらですが・・Thickbox
いまさらながらですが・・・Thickbox
注意！新しいデザインのブログでは動作しません
（立ち上がるけど消せないだけなんですが・・・）
jqueryの新しいバージョンを読み込んでいる場合も同じようにうまくいきません
古いデザインに標準で読み込まれているjqueryでも新しいから（1.2なんですが・・）ダメです
Google Libraries API の中の一番古いのでもダメでした・・・？当然最新の1.6.2なんてダメに決まっています？
この記事は全部をすでにアメブロに入っているもを使って行う方法です
自分でサーバーを用意できる方はそちらに最新のjqueryやThickboxでもLightboxでも入れて使ってください
まずは見本のブログから・・・
記事中の写真をクリックしてください
↑ちなみにこのブログはランダムでヘッダーや背景や文字色が変わります
こちらは新しいデザインにつけた場合・・・
写真クリックで立ち上がりますが・・・
消すことが出来ません（T_T)
立ち上がった写真の中でクリックすれば消えるようですが・・・
×アイコンや写真の外側クリックでは消えてくれません・・・・
新しくHTML5になってclass名が変わっちゃったからですね・・
フリープラグインにすでに入っているブログパーツなどの影響で動作しない場合があります
試してみるって方は今のフリープラグインをメモ帳とかにコピーして保存してから行ってください
フリープラグインの最初に書いたり一番最後に書いたりしてダメだったらさっさとあきらめてください
フリープラグインに・・・
<link href="http://stat.ameba.jp/blog/ucs/css/common/thickbox.css" rel="stylesheet" type="text/css" media="screen,print" />
<script type="text/javascript" language="javascript" src="http://stat.ameba.jp/blog/ucs/js/common/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://stat.ameba.jp/blog/ucs/js/common/thickbox.js"></script>
<script type="text/javascript" language="javascript" src="http://stat.ameba.jp/blog/ucs/js/editor/selectimage_100412.js"></script>
<script type="text/javascript">
window.onload = function(){initializeUpload(false, false);fileUpForm();}
</script>
次は記事に手を加えます
記事に画像を貼り付けます
画像を貼ったらHTMLタグを表示に・・・
画像部分のタグが表示されたら・・
<a href="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/o0500037511389331152.jpg"><img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/t02200165_0500037511389331152.jpg" border="0" /></a>
a と href の間に class="thickbox" を付け加えます
また・・ title="●●●●"とつけると画像の枠に●●●●とタイトルが付きます
設定しない場合は「タイトル未設定」と表示されます（画像フォルダのThickboxを使っているから・・）
<a class="thickbox" title="●●●●" href="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/o0500037511389331152.jpg"><img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/t02200165_0500037511389331152.jpg" border="0" /></a>
最後に付け加えるのはNGです
アメブロに加工されて今まで通りの表示になってしまいます
<a href="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/o0500037511389331152.jpg"><img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/t02200165_0500037511389331152.jpg" border="0" class="thickbox"/></a>
タグ編集エディタの場合も・・・
タグが表示されたら標準エディタと同じように・・
<a href="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/o0500037511389331152.jpg"><img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/t02200165_0500037511389331152.jpg" border="0" /></a>
a と href の間に class="thickbox" を付け加えます
また同じように・・ title="●●●●"とつけると画像の枠に●●●●とタイトルが付きます
<a class="thickbox" title="●●●●" href="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/o0500037511389331152.jpg"><img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110802/08/exlink/ae/03/j/t02200165_0500037511389331152.jpg" border="0" /></a>
以上で記事に貼り付けた画像をクリックすれば・・・
↓このように立ち上がるようになります（titleを入れてないので「タイトル未設定」と表示されています）
全部の画像のHTMLタグをいちいち加工する必要があるので・・・・
以前のように自動で出来ちゃえれば楽なんですがね・・・
それでも良いって～方だけ使ってくださいな
今回のは全部をアメブロ内でまかなう場合です
自分でサーバーを用意できる方はそちらにThickboxでもLightboxでも入れて使ってください
注意！新しいデザインのブログでは動作しません