Lightbox FC2への設置方法



    (◎´∀`)ノ どもー

    本日は画像をFC2ブログでかっこよくポップアップさせて表示させる方法を書いてみます。

    少々長いですがよろしくです。まずは 公式ホームページ にいって 本体をダウンロード

    してください。どんな表示の仕方かダウンロード先案内で例として表示してみますね。


lightbox-1.jpg



    こんなやつです。とりあえずコレを落としたら開きましょう。ほいだらこんな構成に

    なってるはずです。


image03_20100313134302.jpg    image06_20100313135637.jpg



    では、まず一番左のCSSフォルダを開き ⇒ lightbox.css を エディタでひらきましょう

    エディタがわからない方は非常に見づらくなりますが、メモパッドにドラックして開いてもOK


image06_20100313135637.jpg    image04_20100313134301.jpg



    開くとこんな感じなので赤色の所のように3箇所書き換えてください。

    ※注 赤色は自分の画像の置いてあるURLにしてくださいね。

    これでひとつ準備完了。次に jsフォルダ ⇒ lightbox.js をエディタ開いてください。


image07_20100313135637.jpg    image05_20100313135421.jpg



    あとは index.html 以外をアップロードしてください。FC2ではこんな感じですね


image08_20100313140618.jpg



    これで下準備完了です。次はプログラムに移るのでテンプレートをいじりましょう。

    テンプレートのいじりかたが解らない人は諦めてくださいw せめてそれぐらいは

    できるようになってから挑戦しましょうね(*´ω`*)


image09_20100313141620.jpg




     ~  の間 特に  の直前に 青枠で囲ったプログラムを入れてください。

    ※注 赤色は自分のアップロードしたURLにしてくださいね。


    よーし。ここまできたらもう完了目前です!後は画像を貼り付けるときに


image10_20100313142534.jpg



    青文字 が 普通に挿入したときの 文字列 で 赤文字のように書き換えて記述して

    ください。これで完成でーす(*ノ∀ノ) 
関連記事

コメント

こんばんは。
FC2は色々とできますよね~。
アメブロも見習ってほしいもんです(笑

2010/03/13 (Sat) 19:54 | sktm #- | URL | 編集

おぉぉ!
あざ~す!!
ここまで親切に説明していただき感謝です!
これを参考に slimebox(lightboxはvideoboxとケンカしてしまい共存できないとどっかで見ました)
を導入したいと思います^^
本当にありがとうございます!

2010/03/13 (Sat) 20:21 | paaakun #- | URL | 編集

こんばんは~

飲み過ぎで調子が悪いので、挨拶のみで失礼します・・・

コピペでスミマセン。

2010/03/13 (Sat) 22:00 | 貧乏おやじ #- | URL | 編集

こんばんは。
やはり、がくさんのメカいじりのテクニックはプロ級でしたか!!
私は、FC2のフリースペースと長いこと戦ってます・・・。

2010/03/13 (Sat) 22:42 | がおぶー #- | URL | 編集

がくさん、おはようございます^^

普通の表示の仕方よりかっこいいです!!
私の知らない、色々な機能が有るのですね^^;;

2010/03/14 (Sun) 07:47 | 魚屋 #- | URL | 編集

私のブログはがくさんのブログと比べると、かなり見づらいので何か研究が必要ですね^^;

2010/03/14 (Sun) 09:07 | WIN #- | URL | 編集

ポップアップはいいですね(*´ω`*)
画像が見やすくなりますから(ノ´∀`*)

2010/03/14 (Sun) 17:29 | 虫@貯蓄 #- | URL | 編集

コメントの投稿


管理者にだけ表示を許可する