2009.09.12 (Sat)
FC2ブログでthickbox設置
FC2ブログは、さまざまなファイルをUP出来るみたいで、
自分でthickboxも設定が出来るんですね( ´艸｀)
まず、thickbox3.1のページから下記ファイルをダウンロードしてきます。
http://jquery.com/demo/thickbox/
downloadタブより
thickbox.js
ThickBox.css
loadingAnimation.gif
compressed version of jQuery
の4つ。
compressed version of jQueryは、jquery.jsにリネームしました。
loadingAnimation.gifを『ファイルのアップロード』で、アップロードします。
thickbox.jsをテキストエディタなどで開き、
8行目くらいにある
var tb_pathToImage = "images/loadingAnimation.gif";
の赤字の部分を、実際にloadingAnimation.gifをUPしたURLに変更します。
この、thickbox.jsのファイルを保存するときに、
文字コードをUTF-8にしておく必要があるようです。
日本語Shift-JISで保存したら、thickboxが動作しませんでした
残りの
thickbox.js
thickbox.css（今回はCSSを編集して背景を水色にしています）
jquery.js
をアップロード。
そして、<head>～</head>の中に、
を記述しておきます。
テンプレート自体の設定は終了。
あとは、Entryを書く際に、画像を埋め込んだら
<a>タグの中に、
を埋め込みます。
こんなカンジです。
分かりにくいですが、以上で、画像をクリックしたときに
こんなカンジで表示されるようになりました( ´艸｀)
自分でthickboxも設定が出来るんですね( ´艸｀)
まず、thickbox3.1のページから下記ファイルをダウンロードしてきます。
http://jquery.com/demo/thickbox/downloadタブより
thickbox.js
ThickBox.css
loadingAnimation.gif
compressed version of jQuery
の4つ。
compressed version of jQueryは、jquery.jsにリネームしました。
loadingAnimation.gifを『ファイルのアップロード』で、アップロードします。
thickbox.jsをテキストエディタなどで開き、
8行目くらいにある
var tb_pathToImage = "images/loadingAnimation.gif";
の赤字の部分を、実際にloadingAnimation.gifをUPしたURLに変更します。
var tb_pathToImage = http://blog-imgs-**.fc2.com/*/*/*/FC2ID/loadingAnimation.gif;
この、thickbox.jsのファイルを保存するときに、
文字コードをUTF-8にしておく必要があるようです。
日本語Shift-JISで保存したら、thickboxが動作しませんでした
残りの
thickbox.js
thickbox.css（今回はCSSを編集して背景を水色にしています）
jquery.js
をアップロード。
そして、<head>～</head>の中に、
<script type="text/javascript" src="http://（ファイルアップロード画面に表示されたURL）/jquery.js"></script>
<script type="text/javascript" src="（ファイルアップロード画面に表示されたURL/thickbox.js"></script>
<link rel="stylesheet" href="（ファイルアップロード画面に表示されたURL/thickbox.css" type="text/css" media="all" />
を記述しておきます。
テンプレート自体の設定は終了。
あとは、Entryを書く際に、画像を埋め込んだら
<a>タグの中に、
class="thickbox" title="（thickboxで表示させるタイトル）"
を埋め込みます。
こんなカンジです。
分かりにくいですが、以上で、画像をクリックしたときに
こんなカンジで表示されるようになりました( ´艸｀)
テーマ : ホームページ・ブログ制作 - ジャンル : コンピュータ
この記事のトラックバックURL
この記事へのトラックバック
| HOME |
