fc2ブログ
2024年05月 / 04月≪ 12345678910111213141516171819202122232425262728293031≫06月

2009.09.12 (Sat)

FC2ブログでthickbox設置

FC2ブログは、さまざまなファイルをUP出来るみたいで、
自分でthickboxも設定が出来るんですね( ´艸`)

まず、thickbox3.1のページから下記ファイルをダウンロードしてきます。
「URL」(青い四角2枚) †SbWebs†http://jquery.com/demo/thickbox/

downloadタブより
thickbox.js
ThickBox.css
loadingAnimation.gif
compressed version of jQuery

の4つ。
ダウンロードしたthickbox用ファイル
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で表示させるタイトル)"


を埋め込みます。
Entry作成内タグの書き方
こんなカンジです。


分かりにくいですが、以上で、画像をクリックしたときに
thickboxをプレビューしたところ
こんなカンジで表示されるようになりました( ´艸`)

テーマ : ホームページ・ブログ制作 - ジャンル : コンピュータ

01:38  |  ☆Blog Customize  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
 | HOME |