• プロフィール

    木星人

    Author:木星人
    おまべでつ。

    懐かしさに浸ってまつ。

    みんな元気?

  • カレンダー

    プルダウン 降順 昇順 年別

    09月 | 2017年10月 | 11月
    1 2 3 4 5 6 7
    8 9 10 11 12 13 14
    15 16 17 18 19 20 21
    22 23 24 25 26 27 28
    29 30 31 - - - -


  • カウンター

  • オンラインカウンター

    現在の閲覧者数:
  • Blog内検索


--/--/--(--) --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Home | Category : スポンサー広告 |  Comment  |  Trackback
2009/11/03(Tue) 23:28

Slimbox(jQuery版)FC2への設置方法



こんにちわ まべです_・)ノ

さて、今回はサムネイル画像を格好よく拡大させるSlimboxの設置方法について書いてみたいと思います。

私もまったくの初心者で少々苦労しましたので「誰でもできる設置方法」というスタンスでw

ただし、これはFC2のみの設置方法のようで他社blogへは通用しませんでした(;・∀・)

また時間があったらlivedoorVerをやるかも?(Sariさんごめんなさいっ!)

ではいってみましょうー


【1】 まずはSlimbox公式サイトより最新版(Ver2.02)をダウンロードしましょう。

   保存先は分かりやすくデスクトップがいいと思います


最新版(2.02)DL

【2】 ダウンロードしたファイルを展開します。

   次に作成されたフォルダの中にあるjsフォルダを開き、その中のslimbox2.jsをアップロードします。

アップロードのやり方は通常Blogに画像をアップする方法と全く同じです。

【3】 cssフォルダ内にある画像(closelabel.gif、loading.gif、nextlabel.gif、prevlabel.gif)をアップロードします。


【4】 cssフォルダ内のslimbox2.cssを開き、画像パスをアップロードした画像のURLになるように

   書き換えます。変更箇所はloading.gif、prevlabel.gif、nextlabel.gif、closelabel.gifを指定している部分。
cssファイル変更


ご自分のアップロードした画像のURL(赤文字の部分)はBlogのアップロードページにある該当ファイルを右クリックしてプロパティを見ればURLを確認できますのでそちらからコピーしてください。

 
【5】 書き換えが出来たslimbox2.cssファイルをアップロードします。

【6】 テンプレートの<head>~</head>内に以下を貼り付けます。

   ただし、赤文字の部分は自分のアップロードしたURLに書き換えてください!!

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/j/u/p/jupitermab/slimbox2.js"></script>
<link rel="stylesheet" href="http://blog-imgs-30.fc2.com/j/u/p/jupitermab/slimbox2.css" type="text/css" media="screen" />


【7】 設置は以上で完了です♪次は使い方。

記事中に画像ファイルを挿入すると下記のように画像ファイルのURLがあると思いますがこのURLの後ろに 『rel="lightbox"』 (赤字の部分)を付け加えます。単体の画像であればこれだけです。

さらに拡大画像の下にタイトルを入れたい場合は、下記青色の部分『target="_blank"』に『title="タイトル名"』を上書きします。
   

<a href="http://blog-imgs-30.fc2.com/j/u/p/jupitermab/Ver2-02DL.jpg" rel="lightbox" target="_blank"><img height="245" border="0" width="300" src="http://blog-imgs-30.fc2.com/j/u/p/jupitermab/Ver2-02DLs.jpg" alt="最新版(2.02)DL" /></a>

 



以上が基本的な使い方です。

とりあえずここまで出来たら一度下書きでもいいので実際に画像を記事に貼り付けて試してみましょう(・∀・)

【画像のグループ化】

複数の画像をグループ化することで簡単な画像ギャラリーを作る事ができます。

こんな感じ。

1枚目
2枚目
3枚目
4枚目

こんな感じでページをめくれます。

やり方は、先ほどの単体画像の時は画像リンクの後に『rel="lightbox"』と書き加えますが

グループ化を行う場合は『rel="lightbox-グループ名"』と書き加えます。

もちろんグループ名は半角です

以上で完了です。出来ましたか?

なんか分かりやすいようにと細かく書いたつもりなんですが

今自分で読み返してみると逆にごちゃごちゃしてわかりにくくしてるのかも・・・(;´Д`)

今回参考にさせて頂いたサイトさんはこちら → BLUE DROPS

すっきり纏めて説明してくれてるので分かりやすいかも(・∀・)

以上、Slimbox(jQuery版)FC2への設置方法でした(*ノε`*)ノシ 


Home | Category : Blog改造メモ |  コメントアイコン Comment5  |  Trackback0

トラックバック ▼


この記事にトラックバックする(FC2ブログユーザー)

コメント ▼


    
  • 老体ねぇw

    まべさん
    老体ですかw どうして知ってるの?
    今後いたわってくださいね^^
    さぶさん、モチベダウン症候群みたいですよね、
    ここを乗り切ると何があっても楽しめるんですけどね。
    今日も、超早朝からコメントを(げ、まだ4時じゃん、
    老体は起きるの早いわw)書き込んでるpapioです

  • >ぱぴさん

    おかえんなさいヽ(´ー`)ノ
    老体に鞭打ちながらの登山ご苦労様でした( ゚∀゚)
    さぶ氏がモチベさがってうなだれてますので
    無理やりにでも引っ張り出して遊んでやってください(ぁ

  • No Title

    おはようございます。
    昨日、山登りから帰ってきました。
    また、プリで遊べるw

  • >ハノイさん

    そうでしたか^^;
    まぁblog開設そのものはそんなに難しいことはないんですけどね^^
    むしろ勉強がてらにやってみるのも手かとw
    っと無理に勧めてもあれですね^^;
    まぁ開設が厳しければ色んな方のBlogでコメしていれば
    おのずと交友も広がるんじゃないでしょうか( ^▽^)
    それがモチベアップに繋がればいいですね~♪
    楽しみ方も色々ありますし、たまには登りとかもやってみては?
    結構時間を忘れて没頭しちゃいますよ?ヽ(´ー`)ノ
    オロさんのBlogのぷり散策ってカテゴリで色んな場所の登り方紹介してくれてますから是非一度みてみてください(´▽`*)

  • まべさん…[e:263]

    私にはブログなんて無理ですよ

    …なにせPCの基本動作すらあんまり把握してないですから

    仕事でチョロチョロっと…使う程度なもので

    まべさんが説明してたナンタラbox?←スイマセン、すでに理解してません…の説明さっぱりチンプンカンプンですし


    …最近やっとキーボードに指が慣れてきたかなってレベルですちなみにプリでは狩場レベルが高いと…ロクに挨拶すらする余裕がなくなります

Home Home | Top Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。