
★新URL:http://20kaido.com/
★新RSS:http://20kaido.com/index.rdf
いままでFC2ブログで5年間、お世話になりました。感謝です。
移転先でもよろしくお願いいたします!
二十歳街道まっしぐら(FC2ブログ時代)人気記事TOP50まとめ
iBoxのAjaxをブログに導入する方法
※ブログはFC2ブログで紹介します。
※他のブログでも同様の操作で使うことができます。
☆iBoxをダウンロード☆
1.コチラからiBoxのAjaxセットをダウンロードしてください。
アクセス先:http://www.ibegin.com/blog/p_ibox.html
参考画像:

2.ダウンロードしたファイルを解凍します。
参考画像:

☆ブログのCSS(スタイルシート)にiBox追加☆
1.次に、iBoxのフォルダに、「ibox.css」というファイルがあります。これをメモ帳で開き、全体をコピーします。
(メモ帳起動してドラッグ&ドロップで開けます。)
参考画像:

2.そして、ブログ管理画面へ行きます。
3.[環境設定] → [テンプレートの編集]をクリック。
参考画像:

4.自分の現在使っているテンプレートの[編集]をクリック。
編集画面に移動します。
5.編集画面は2つに分かれていて、上がHTML 下がCSS(スタイルシート)です。
6.今、CSS(スタイルシート)を編集する必要があるので、
下の欄に 先ほどコピーした内容を追加します。
(※追加する部分はどこでもかまわないです。)
参考画像:

7.追記したら、[更新]ボタンをクリックします。
☆ローディングイメージをアップロード☆
1.Ajaxで 画像を読み込む際の ローディング画像が必要です。
2.ローディング画像は、ダウンロードしてきた iBoxフォルダのimagesフォルダに入っています。
3.この画像をブログにアップロードします!
参考画像:

4.ファイルのアップロードの仕方は、
ブログ管理画面 → [ツール]の[ファイルアップロード] → [参照]ボタンを押して、ファイル選択 → アップロード です。
5.アップロードが完了したら、その画像のURLをコピーします。
アップロード画像をクリックして URLバーを 見てください。
画像のURLをコピーしましょう。
参考画像:

☆iBoxのJavascriptファイルを少しだけ書き換え☆
1.ダウンロードしてきたiboxフォルダに ibox.js というファイルがあります。
2.この ibox.js をメモ帳で開きましょう。
(メモ帳起動してドラッグ&ドロップでOK)
3.開いたファイルの冒頭に、
var indicator_img_path = "/images/indicator.gif";
とあります。
これを
var indicator_img_path = " さきほどコピーした画像URL ";
に書き換えます。書き換えたら上書き保存してください。
参考画像:

4.そして ibox.js をブログにアップロードします。
(アップロードの仕方は 画像のときと同様)
参考画像:

5.これでiBoxのAjaxが使用できるようになりました!!!
☆どうすればAjaxが使えるか・・・。☆
1.ブログの本文編集画面で 画像を貼り付けます。
2. target="_blank" となっているところがあるはずです。
そこを、 rel="ibox" title="タイトル"
と変更してください。これだけで Ajaxが適用できます。
参考画像:

iBoxのAjax使い方は 以上です。。
- 関連記事