★新URL：http://20kaido.com/
★新RSS:http://20kaido.com/index.rdf
いままでFC2ブログで5年間、お世話になりました。感謝です。
移転先でもよろしくお願いいたします！
二十歳街道まっしぐら（FC2ブログ時代）人気記事TOP50まとめ

iBoxのAjaxをブログに導入する方法

iBoxのAjaxの使い方です。

※ブログはFC2ブログで紹介します。
※他のブログでも同様の操作で使うことができます。

☆iBoxをダウンロード☆

１．コチラからiBoxのAjaxセットをダウンロードしてください。
アクセス先：http://www.ibegin.com/blog/p_ibox.html

参考画像：

２．ダウンロードしたファイルを解凍します。

参考画像：

☆ブログのCSS（スタイルシート）にiBox追加☆

１．次に、iBoxのフォルダに、「ibox.css」というファイルがあります。これをメモ帳で開き、全体をコピーします。
（メモ帳起動してドラッグ＆ドロップで開けます。）

参考画像：

２．そして、ブログ管理画面へ行きます。

３．[環境設定]　→　[テンプレートの編集]をクリック。

参考画像：

４．自分の現在使っているテンプレートの[編集]をクリック。
編集画面に移動します。

５．編集画面は２つに分かれていて、上がHTML　下がCSS(スタイルシート)です。

６．今、CSS(スタイルシート)を編集する必要があるので、
下の欄に　先ほどコピーした内容を追加します。
（※追加する部分はどこでもかまわないです。）

参考画像：

７．追記したら、[更新]ボタンをクリックします。

☆ローディングイメージをアップロード☆

１．Ajaxで　画像を読み込む際の　ローディング画像が必要です。

２．ローディング画像は、ダウンロードしてきた iBoxフォルダのimagesフォルダに入っています。

３．この画像をブログにアップロードします！

参考画像：

４．ファイルのアップロードの仕方は、
ブログ管理画面　→　[ツール]の[ファイルアップロード]　→　[参照]ボタンを押して、ファイル選択　→　アップロード　です。

５．アップロードが完了したら、その画像のURLをコピーします。
アップロード画像をクリックして　URLバーを　見てください。
画像のURLをコピーしましょう。

参考画像：

☆iBoxのJavascriptファイルを少しだけ書き換え☆

１．ダウンロードしてきたiboxフォルダに ibox.js というファイルがあります。

２．この ibox.js 　をメモ帳で開きましょう。
（メモ帳起動してドラッグ＆ドロップでOK）

３．開いたファイルの冒頭に、

var indicator_img_path = "/images/indicator.gif";

とあります。

これを

var indicator_img_path = " さきほどコピーした画像URL ";

に書き換えます。書き換えたら上書き保存してください。

参考画像：

４．そして ibox.js　をブログにアップロードします。
（アップロードの仕方は　画像のときと同様）

参考画像：

５．これでiBoxのAjaxが使用できるようになりました！！！

☆どうすればAjaxが使えるか・・・。☆

１．ブログの本文編集画面で　画像を貼り付けます。

２． target="_blank"　となっているところがあるはずです。
そこを、 rel="ibox" title="タイトル"

と変更してください。これだけで　Ajaxが適用できます。

参考画像：