二十歳街道まっしぐら
お得なサイト お得なツール 小ネタ ゲーム ニュース 画像関連 動画関連 音楽関連 このブログの読者になる
TOP > お得なサイト >
タレコミNEW!! | メルマガ | お問い合わせ

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

iBoxのAjaxをブログに導入する方法 このエントリーを含むはてなブックマーク あとで読む

iBoxのAjaxの使い方です。

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



☆iBoxをダウンロード☆

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

参考画像:
ibox ajax



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

参考画像:
ibox ajax



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


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

参考画像:
ibox ajax



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

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

参考画像:
ibox ajax



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


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

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

参考画像:
ibox ajax



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


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

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

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

3.この画像をブログにアップロードします!

参考画像:
ibox ajax



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


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

参考画像:
ibox ajax



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

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

2.この ibox.js  をメモ帳で開きましょう。
(メモ帳起動してドラッグ&ドロップでOK)

3.開いたファイルの冒頭に、

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

とあります。

これを

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

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

参考画像:
ibox ajax



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

参考画像:
ibox ajax



5.これでiBoxのAjaxが使用できるようになりました!!!


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


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

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

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

参考画像:
ibox ajax



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

100マス計算でボケ防止! トップページへ戻る 見たい夢を見る方法